409/groove-web
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: basic song ui + settings

Browse Source
This commit is contained in:
Shawn
2024-11-24 00:11:36 +01:00
parent 2c9051a265
commit 7ae47d02f2
99 changed files with 3680 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/lib/components/groove/AppSidebar.svelte Normal file
View File

@@ -0,0 +1,73 @@
<script lang="ts">
import { page } from '$app/stores';
import * as Sidebar from '$lib/components/ui/sidebar';
import { Home, Library, ListMusic, Music2, Settings } from 'lucide-svelte';
</script>
<Sidebar.Root collapsible="icon">
<Sidebar.Header>
<Sidebar.Menu>
<Sidebar.MenuItem>
<Sidebar.MenuButton isActive={$page.url.pathname === '/'} class="transition-all">
{#snippet child({ props })}
<a href="/" {...props}>
<Home />
<span>Home</span>
</a>
{/snippet}
</Sidebar.MenuButton>
</Sidebar.MenuItem>
</Sidebar.Menu>
</Sidebar.Header>
<Sidebar.Content>
<Sidebar.Group>
<Sidebar.GroupLabel>Library</Sidebar.GroupLabel>
<Sidebar.Menu>
<Sidebar.MenuItem>
<Sidebar.MenuButton isActive={$page.url.pathname === '/songs'} class="transition-all">
{#snippet child({ props })}
<a href="/songs" {...props}>
<Music2 />
<span>Songs</span>
</a>
{/snippet}
</Sidebar.MenuButton>
</Sidebar.MenuItem>
<Sidebar.MenuItem>
<Sidebar.MenuButton isActive={$page.url.pathname === '/albums'} class="transition-all">
{#snippet child({ props })}
<a href="/albums" {...props}>
<Library />
<span>Albums</span>
</a>
{/snippet}
</Sidebar.MenuButton>
</Sidebar.MenuItem>
<Sidebar.MenuItem>
<Sidebar.MenuButton isActive={$page.url.pathname === '/playlists'} class="transition-all">
{#snippet child({ props })}
<a href="/playlists" {...props}>
<ListMusic />
<span>Playlists</span>
</a>
{/snippet}
</Sidebar.MenuButton>
</Sidebar.MenuItem>
</Sidebar.Menu>
</Sidebar.Group>
</Sidebar.Content>
<Sidebar.Footer>
<Sidebar.Menu>
<Sidebar.MenuItem>
<Sidebar.MenuButton isActive={$page.url.pathname === '/settings'} class="transition-all">
{#snippet child({ props })}
<a href="/settings" {...props}>
<Settings />
<span>Settings</span>
</a>
{/snippet}
</Sidebar.MenuButton>
</Sidebar.MenuItem>
</Sidebar.Menu>
</Sidebar.Footer>
</Sidebar.Root>