aljaz/opencode
1
0
Fork 0
mirror of https://github.com/aljazceru/opencode.git synced 2026-01-23 17:54:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

wip: zen style nav bar

Browse Source
This commit is contained in:
Frank
2025-10-10 00:56:16 -04:00
parent 03d5089436
commit ad7b4b1fcd
6 changed files with 115 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
packages/console/app/src/routes/workspace/[id].css
View File

@@ -14,26 +14,42 @@
border-right: 1px solid var(--color-border);
padding: var(--space-6) var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-2);
justify-content: flex-end;
[data-nav-button] {
padding: var(--space-3) var(--space-4);
border-radius: var(--border-radius-sm);
color: var(--color-text-muted);
text-decoration: none;
font-size: var(--font-size-sm);
font-weight: 500;
transition: all 0.15s ease;
[data-component="nav-items"] {
display: flex;
flex-direction: column;
gap: var(--space-2);
&:hover {
background-color: var(--color-surface-hover);
color: var(--color-text);
}
[data-nav-button] {
padding: var(--space-3) var(--space-4);
border-radius: var(--border-radius-sm);
color: var(--color-text-muted);
text-decoration: none;
font-size: var(--font-size-sm);
font-weight: 500;
transition: all 0.15s ease;
&.active {
background-color: var(--color-surface-hover);
color: var(--color-text);
&:hover {
color: var(--color-text);
}
&.active {
color: var(--color-text);
font-weight: 700;
position: relative;
&::before {
content: '';
position: absolute;
left: calc(-1 * var(--space-0-5));
top: 0;
bottom: 0;
width: 2px;
background-color: var(--color-text);
border-radius: 0 2px 2px 0;
}
}
}
}
}

34
packages/console/app/src/routes/workspace/[id].tsx
View File

@@ -10,23 +10,25 @@ export default function WorkspaceLayout(props: RouteSectionProps) {
<main data-page="workspace">
<div data-component="workspace-container">
<nav data-component="workspace-nav">
<A href={`/workspace/${params.id}`} end activeClass="active" data-nav-button>
Zen
</A>
<Show when={userInfo()?.isAdmin}>
<A href={`/workspace/${params.id}/billing`} activeClass="active" data-nav-button>
Billing
<div data-component="nav-items">
<A href={`/workspace/${params.id}`} end activeClass="active" data-nav-button>
Zen
</A>
</Show>
<A href={`/workspace/${params.id}/keys`} activeClass="active" data-nav-button>
API Keys
</A>
<A href={`/workspace/${params.id}/members`} activeClass="active" data-nav-button>
Members
</A>
<A href={`/workspace/${params.id}/settings`} activeClass="active" data-nav-button>
Settings
</A>
<A href={`/workspace/${params.id}/keys`} activeClass="active" data-nav-button>
API Keys
</A>
<A href={`/workspace/${params.id}/members`} activeClass="active" data-nav-button>
Members
</A>
<Show when={userInfo()?.isAdmin}>
<A href={`/workspace/${params.id}/billing`} activeClass="active" data-nav-button>
Billing
</A>
</Show>
<A href={`/workspace/${params.id}/settings`} activeClass="active" data-nav-button>
Settings
</A>
</div>
</nav>
<div data-component="workspace-content">{props.children}</div>
</div>

2
packages/console/app/src/routes/workspace/[id]/index.css
View File

@@ -1,6 +1,6 @@
[data-page="workspace-[id]"] {
max-width: 64rem;
padding: var(--space-10) var(--space-4);
padding: var(--space-2) var(--space-4);
margin: 0 auto;
width: 100%;
display: flex;

3
packages/console/app/src/routes/workspace/[id]/index.tsx
View File

@@ -3,12 +3,13 @@ import { NewUserSection } from "./new-user-section"
import { UsageSection } from "./usage-section"
import { ModelSection } from "./model-section"
import { ProviderSection } from "./provider-section"
import { IconLogo } from "~/component/icon"
export default function () {
return (
<div data-page="workspace-[id]">
<section data-component="title-section">
<h1>Zen</h1>
<IconLogo />
<p>
Curated list of models provided by opencode.{" "}
<a target="_blank" href="/docs/zen">