Skip to content

Commit c25b9bf

Browse files
fwangfwang
committed
wip: zen
1 parent ddb2e69 commit c25b9bf

File tree

2 files changed

+154
-46
lines changed

2 files changed

+154
-46
lines changed

‎packages/console/app/src/routes/workspace/[id].css‎

Lines changed: 112 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -16,38 +16,110 @@
1616
justify-content: flex-end;
1717
}
1818

19-
[data-component="workspace-nav-items"] {
20-
display: flex;
21-
flex-direction: column;
22-
gap: var(--space-2);
23-
24-
[data-nav-button] {
25-
padding: var(--space-3) var(--space-4);
26-
border-radius: var(--border-radius-sm);
27-
color: var(--color-text-muted);
28-
text-decoration: none;
29-
font-size: var(--font-size-sm);
30-
font-weight: 500;
31-
transition: all 0.15s ease;
32-
33-
&:hover {
34-
color: var(--color-text);
19+
/* Desktop Navigation */
20+
[data-component="nav-desktop"] {
21+
display: block;
22+
23+
@media (max-width: 48rem) {
24+
display: none;
25+
}
26+
27+
[data-component="workspace-nav-items"] {
28+
display: flex;
29+
flex-direction: column;
30+
gap: var(--space-2);
31+
32+
[data-nav-button] {
33+
padding: var(--space-3) var(--space-4);
34+
border-radius: var(--border-radius-sm);
35+
color: var(--color-text-muted);
36+
text-decoration: none;
37+
font-size: var(--font-size-sm);
38+
font-weight: 500;
39+
transition: all 0.15s ease;
40+
41+
&:hover {
42+
color: var(--color-text);
43+
}
44+
45+
&.active {
46+
color: var(--color-text);
47+
font-weight: 700;
48+
position: relative;
49+
50+
&::before {
51+
content: "";
52+
position: absolute;
53+
left: calc(-1 * var(--space-0-5));
54+
top: 0;
55+
bottom: 0;
56+
width: 2px;
57+
background-color: var(--color-text);
58+
border-radius: 0 2px 2px 0;
59+
}
60+
}
61+
}
62+
}
63+
}
64+
65+
/* Mobile Navigation */
66+
[data-component="nav-mobile"] {
67+
display: none;
68+
69+
@media (max-width: 48rem) {
70+
display: flex;
71+
align-items: stretch;
72+
justify-content: flex-start;
73+
width: 100%;
74+
overflow-x: auto;
75+
overflow-y: hidden;
76+
scrollbar-width: none;
77+
-ms-overflow-style: none;
78+
79+
&::-webkit-scrollbar {
80+
display: none;
3581
}
82+
}
3683

37-
&.active {
38-
color: var(--color-text);
39-
font-weight: 700;
84+
[data-component="workspace-nav-items"] {
85+
display: flex;
86+
flex-direction: row;
87+
align-items: center;
88+
gap: var(--space-1);
89+
min-width: max-content;
90+
height: 100%;
91+
92+
[data-nav-button] {
93+
padding: var(--space-2) var(--space-3);
94+
padding-bottom: calc(var(--space-2) + 4px);
95+
border-radius: var(--border-radius-sm);
96+
color: var(--color-text-muted);
97+
text-decoration: none;
98+
font-size: var(--font-size-sm);
99+
font-weight: 500;
100+
transition: all 0.15s ease;
101+
white-space: nowrap;
102+
flex-shrink: 0;
40103
position: relative;
41104

42-
&::before {
43-
content: '';
44-
position: absolute;
45-
left: calc(-1 * var(--space-0-5));
46-
top: 0;
47-
bottom: 0;
48-
width: 2px;
49-
background-color: var(--color-text);
50-
border-radius: 0 2px 2px 0;
105+
&:hover {
106+
color: var(--color-text);
107+
}
108+
109+
&.active {
110+
color: var(--color-text);
111+
font-weight: 700;
112+
113+
&::after {
114+
content: "";
115+
position: absolute;
116+
bottom: 0;
117+
left: 0;
118+
right: 0;
119+
height: 2px;
120+
background-color: var(--color-text);
121+
border-radius: 2px 2px 0 0;
122+
}
51123
}
52124
}
53125
}
@@ -221,5 +293,16 @@
221293
border-right: none;
222294
border-bottom: 1px solid var(--color-border);
223295
padding: var(--space-4);
296+
justify-content: flex-start;
297+
overflow-x: auto;
298+
overflow-y: hidden;
299+
flex-shrink: 0;
300+
min-height: fit-content;
301+
scrollbar-width: none;
302+
-ms-overflow-style: none;
303+
304+
&::-webkit-scrollbar {
305+
display: none;
306+
}
224307
}
225-
}
308+
}

‎packages/console/app/src/routes/workspace/[id].tsx‎

Lines changed: 42 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,29 +6,54 @@ import "./[id].css"
66
export default function WorkspaceLayout(props: RouteSectionProps) {
77
const params = useParams()
88
const userInfo = createAsync(() => querySessionInfo(params.id))
9+
910
return (
1011
<main data-page="workspace">
1112
<div data-component="workspace-container">
1213
<nav data-component="workspace-nav">
13-
<div data-component="workspace-nav-items">
14-
<A href={`/workspace/${params.id}`} end activeClass="active" data-nav-button>
15-
Zen
16-
</A>
17-
<A href={`/workspace/${params.id}/keys`} activeClass="active" data-nav-button>
18-
API Keys
19-
</A>
20-
<A href={`/workspace/${params.id}/members`} activeClass="active" data-nav-button>
21-
Members
22-
</A>
23-
<Show when={userInfo()?.isAdmin}>
24-
<A href={`/workspace/${params.id}/billing`} activeClass="active" data-nav-button>
25-
Billing
14+
<nav data-component="nav-desktop">
15+
<div data-component="workspace-nav-items">
16+
<A href={`/workspace/${params.id}`} end activeClass="active" data-nav-button>
17+
Zen
18+
</A>
19+
<A href={`/workspace/${params.id}/keys`} activeClass="active" data-nav-button>
20+
API Keys
21+
</A>
22+
<A href={`/workspace/${params.id}/members`} activeClass="active" data-nav-button>
23+
Members
24+
</A>
25+
<Show when={userInfo()?.isAdmin}>
26+
<A href={`/workspace/${params.id}/billing`} activeClass="active" data-nav-button>
27+
Billing
28+
</A>
29+
<A href={`/workspace/${params.id}/settings`} activeClass="active" data-nav-button>
30+
Settings
31+
</A>
32+
</Show>
33+
</div>
34+
</nav>
35+
36+
<nav data-component="nav-mobile">
37+
<div data-component="workspace-nav-items">
38+
<A href={`/workspace/${params.id}`} end activeClass="active" data-nav-button>
39+
Zen
40+
</A>
41+
<A href={`/workspace/${params.id}/keys`} activeClass="active" data-nav-button>
42+
API Keys
2643
</A>
27-
<A href={`/workspace/${params.id}/settings`} activeClass="active" data-nav-button>
28-
Settings
44+
<A href={`/workspace/${params.id}/members`} activeClass="active" data-nav-button>
45+
Members
2946
</A>
30-
</Show>
31-
</div>
47+
<Show when={userInfo()?.isAdmin}>
48+
<A href={`/workspace/${params.id}/billing`} activeClass="active" data-nav-button>
49+
Billing
50+
</A>
51+
<A href={`/workspace/${params.id}/settings`} activeClass="active" data-nav-button>
52+
Settings
53+
</A>
54+
</Show>
55+
</div>
56+
</nav>
3257
</nav>
3358
<div data-component="workspace-content">{props.children}</div>
3459
</div>

0 commit comments

Comments
 (0)