Skip to content
This repository was archived by the owner on Feb 28, 2026. It is now read-only.

Commit 440b12e

Browse files
nukeopnukeop
committed
Sidebar navigation
1 parent d7794f9 commit 440b12e

File tree

8 files changed

+168
-20
lines changed

8 files changed

+168
-20
lines changed

‎packages/player/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"@tauri-apps/api": "^2.0.0",
2525
"@tauri-apps/plugin-fs": "~2.4.1",
2626
"@tauri-apps/plugin-updater": "~2.9.0",
27+
"lucide-react": "^0.460.0",
2728
"react": "^18.2.0",
2829
"react-dom": "^18.2.0",
2930
"zustand": "^5.0.7"

‎packages/player/src/App.tsx‎

Lines changed: 49 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,15 @@
1+
import {
2+
BlocksIcon,
3+
CompassIcon,
4+
DiscIcon,
5+
GaugeIcon,
6+
LibraryIcon,
7+
MusicIcon,
8+
Settings2Icon,
9+
SettingsIcon,
10+
UserIcon,
11+
} from 'lucide-react';
12+
113
import {
214
BottomBar,
315
PlayerShell,
@@ -32,13 +44,44 @@ function App() {
3244
onToggle={toggleLeftSidebar}
3345
>
3446
<SidebarNavigation>
35-
<SidebarNavigationCollapsible title="Navigation">
36-
<SidebarNavigationItem>Test</SidebarNavigationItem>
37-
<SidebarNavigationItem>Test2</SidebarNavigationItem>
47+
<SidebarNavigationCollapsible
48+
title="Explore"
49+
icon={<CompassIcon />}
50+
>
51+
<SidebarNavigationItem>
52+
<GaugeIcon />
53+
Dashboard
54+
</SidebarNavigationItem>
55+
</SidebarNavigationCollapsible>
56+
<SidebarNavigationCollapsible
57+
title="Preferences"
58+
icon={<SettingsIcon />}
59+
>
60+
<SidebarNavigationItem>
61+
<Settings2Icon />
62+
Settings
63+
</SidebarNavigationItem>
64+
<SidebarNavigationItem>
65+
<BlocksIcon />
66+
Plugins
67+
</SidebarNavigationItem>
3868
</SidebarNavigationCollapsible>
39-
<SidebarNavigationCollapsible title="Your library">
40-
<SidebarNavigationItem>Favorite albums</SidebarNavigationItem>
41-
<SidebarNavigationItem>Favorite tracks</SidebarNavigationItem>
69+
<SidebarNavigationCollapsible
70+
title="Collection"
71+
icon={<LibraryIcon />}
72+
>
73+
<SidebarNavigationItem>
74+
<DiscIcon />
75+
Favorite albums
76+
</SidebarNavigationItem>
77+
<SidebarNavigationItem>
78+
<MusicIcon />
79+
Favorite tracks
80+
</SidebarNavigationItem>
81+
<SidebarNavigationItem>
82+
<UserIcon />
83+
Favorite artists
84+
</SidebarNavigationItem>
4285
</SidebarNavigationCollapsible>
4386
</SidebarNavigation>
4487
</PlayerWorkspace.LeftSidebar>

‎packages/player/src/__snapshots__/App.test.tsx.snap‎

Lines changed: 100 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -54,12 +54,33 @@ exports[`App > should render snapshot 1`] = `
5454
class="flex flex-col justify-start items-start flex-1"
5555
>
5656
<div
57-
class="flex flex-col gap-2 w-full"
57+
class="flex flex-col mb-4 w-full text-sm"
5858
>
5959
<button
60-
class="transition-all rounded text-foreground bg-transparent inline-flex flex-row items-center justify-between"
60+
class="transition-all rounded text-foreground bg-transparent h-9 px-3 inline-flex flex-row items-center justify-between"
6161
>
62-
Navigation
62+
<svg
63+
class="lucide lucide-compass"
64+
fill="none"
65+
height="24"
66+
stroke="currentColor"
67+
stroke-linecap="round"
68+
stroke-linejoin="round"
69+
stroke-width="2"
70+
viewBox="0 0 24 24"
71+
width="24"
72+
xmlns="http://www.w3.org/2000/svg"
73+
>
74+
<path
75+
d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z"
76+
/>
77+
<circle
78+
cx="12"
79+
cy="12"
80+
r="10"
81+
/>
82+
</svg>
83+
Explore
6384
<div>
6485
<svg
6586
class="lucide lucide-chevron-right"
@@ -81,12 +102,85 @@ exports[`App > should render snapshot 1`] = `
81102
</button>
82103
</div>
83104
<div
84-
class="flex flex-col gap-2 w-full"
105+
class="flex flex-col mb-4 w-full text-sm"
85106
>
86107
<button
87-
class="transition-all rounded text-foreground bg-transparent inline-flex flex-row items-center justify-between"
108+
class="transition-all rounded text-foreground bg-transparent h-9 px-3 inline-flex flex-row items-center justify-between"
88109
>
89-
Your library
110+
<svg
111+
class="lucide lucide-settings"
112+
fill="none"
113+
height="24"
114+
stroke="currentColor"
115+
stroke-linecap="round"
116+
stroke-linejoin="round"
117+
stroke-width="2"
118+
viewBox="0 0 24 24"
119+
width="24"
120+
xmlns="http://www.w3.org/2000/svg"
121+
>
122+
<path
123+
d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
124+
/>
125+
<circle
126+
cx="12"
127+
cy="12"
128+
r="3"
129+
/>
130+
</svg>
131+
Preferences
132+
<div>
133+
<svg
134+
class="lucide lucide-chevron-right"
135+
fill="none"
136+
height="24"
137+
stroke="currentColor"
138+
stroke-linecap="round"
139+
stroke-linejoin="round"
140+
stroke-width="2"
141+
viewBox="0 0 24 24"
142+
width="24"
143+
xmlns="http://www.w3.org/2000/svg"
144+
>
145+
<path
146+
d="m9 18 6-6-6-6"
147+
/>
148+
</svg>
149+
</div>
150+
</button>
151+
</div>
152+
<div
153+
class="flex flex-col mb-4 w-full text-sm"
154+
>
155+
<button
156+
class="transition-all rounded text-foreground bg-transparent h-9 px-3 inline-flex flex-row items-center justify-between"
157+
>
158+
<svg
159+
class="lucide lucide-library"
160+
fill="none"
161+
height="24"
162+
stroke="currentColor"
163+
stroke-linecap="round"
164+
stroke-linejoin="round"
165+
stroke-width="2"
166+
viewBox="0 0 24 24"
167+
width="24"
168+
xmlns="http://www.w3.org/2000/svg"
169+
>
170+
<path
171+
d="m16 6 4 14"
172+
/>
173+
<path
174+
d="M12 6v14"
175+
/>
176+
<path
177+
d="M8 8v12"
178+
/>
179+
<path
180+
d="M4 4v16"
181+
/>
182+
</svg>
183+
Collection
90184
<div>
91185
<svg
92186
class="lucide lucide-chevron-right"

‎packages/ui/src/components/Button/Button.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ const buttonVariants = cva('inline-flex items-center transition-all rounded', {
2020
},
2121
defaultVariants: {
2222
variant: 'default',
23+
size: 'default',
2324
},
2425
});
2526

‎packages/ui/src/components/SidebarNavigation/SidebarNavigationCollapsible.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,10 @@ export const SidebarNavigationCollapsible: FC<
1515
> = ({ children, title, icon }) => {
1616
const [isCollapsed, setIsCollapsed] = useState(true);
1717
return (
18-
<div className={clsx('flex flex-col gap-2 w-full')}>
18+
<div className={clsx('flex flex-col mb-4 w-full text-sm')}>
1919
<Button
20-
variant="text"
20+
variant={isCollapsed ? 'text' : 'noShadow'}
21+
size="sm"
2122
className="inline-flex flex-row items-center justify-between"
2223
onClick={() => setIsCollapsed(!isCollapsed)}
2324
>
@@ -37,7 +38,7 @@ export const SidebarNavigationCollapsible: FC<
3738
animate={{ opacity: 1, height: 'auto' }}
3839
exit={{ opacity: 0, height: 0 }}
3940
transition={{ duration: 0.2, ease: 'easeInOut' }}
40-
className="overflow-hidden"
41+
className="overflow-hidden flex flex-col gap-2 border-l-2 border-l-foreground ml-4 pt-2"
4142
>
4243
{children}
4344
</motion.div>

‎packages/ui/src/components/SidebarNavigation/SidebarNavigationItem.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,9 @@ type SidebarNavigationItemProps = {
88
export const SidebarNavigationItem: FC<SidebarNavigationItemProps> = ({
99
children,
1010
}) => {
11-
return <div>{children}</div>;
11+
return (
12+
<div className="flex flex-row items-center justify-start gap-2 px-2">
13+
{children}
14+
</div>
15+
);
1216
};

‎packages/ui/src/components/index.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
export { PlayerShell } from './Layout';
2-
export { TopBar } from './TopBar';
3-
export { BottomBar } from './BottomBar';
4-
export { PlayerWorkspace } from './PlayerWorkspace';
1+
export * from './Layout';
2+
export * from './TopBar';
3+
export * from './BottomBar';
4+
export * from './PlayerWorkspace';
55
export * from './SidebarNavigation';
6+
export * from './Button';

‎pnpm-lock.yaml‎

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)