init commit

resources/js/components/AppSidebar.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    import NavFooter from '@/components/NavFooter.svelte';
+    import NavMain from '@/components/NavMain.svelte';
+    import NavUser from '@/components/NavUser.svelte';
+    import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
+    import { type NavItem } from '@/types';
+    import { Link } from '@inertiajs/svelte';
+    import { BookOpen, Folder, LayoutGrid } from 'lucide-svelte';
+    import AppLogo from './AppLogo.svelte';
+
+    const mainNavItems: NavItem[] = [
+        {
+            title: 'Dashboard',
+            href: '/dashboard',
+            icon: LayoutGrid,
+        },
+    ];
+
+    const footerNavItems: NavItem[] = [
+        {
+            title: 'Repository',
+            href: 'https://github.com/oseughu/svelte-starter-kit',
+            icon: Folder,
+        },
+        {
+            title: 'Admin Dashboard',
+            href: '/admin',
+            icon: LayoutGrid,
+            requireAdmin: true,
+        },
+    ];
+</script>
+
+<Sidebar collapsible="icon" variant="inset">
+    <SidebarHeader>
+        <SidebarMenu>
+            <SidebarMenuItem>
+                <SidebarMenuButton size="lg">
+                    <Link href={route('dashboard')}>
+                        <AppLogo />
+                    </Link>
+                </SidebarMenuButton>
+            </SidebarMenuItem>
+        </SidebarMenu>
+    </SidebarHeader>
+
+    <SidebarContent>
+        <NavMain items={mainNavItems} />
+    </SidebarContent>
+
+    <SidebarFooter>
+        <NavFooter items={footerNavItems} class="mt-auto" />
+        <NavUser />
+    </SidebarFooter>
+</Sidebar>