Added simple sidebar

src/components/dashboard/sidebar.tsx

@@ -0,0 +1,89 @@
+"use client"
+
+import { LayoutDashboard, List, PanelLeft, Plus } from "lucide-react"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+
+import {
+    Sidebar,
+    SidebarContent,
+    SidebarFooter,
+    SidebarGroup,
+    SidebarGroupContent,
+    SidebarGroupLabel,
+    SidebarHeader,
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+    useSidebar
+} from "@/components/ui/sidebar"
+import { SidebarUserDropdown } from "./sidebar-user-dropdown"
+
+const items = [
+    {
+        title: "Dashboard",
+        url: "/dashboard",
+        icon: LayoutDashboard
+    },
+    {
+        title: "List",
+        url: "/dashboard/list",
+        icon: List
+    },
+    {
+        title: "Create",
+        url: "/dashboard/create",
+        icon: Plus
+    }
+]
+
+export function DashboardSidebar() {
+    const pathname = usePathname()
+    const { toggleSidebar } = useSidebar()
+
+    return (
+        <Sidebar collapsible="icon">
+            <SidebarHeader>
+                <SidebarMenu>
+                    <SidebarMenuItem>
+                        <SidebarMenuButton
+                            onClick={toggleSidebar}
+                            tooltip="Toggle Sidebar"
+                        >
+                            <PanelLeft />
+                            <span>Toggle Sidebar</span>
+                        </SidebarMenuButton>
+                    </SidebarMenuItem>
+                </SidebarMenu>
+            </SidebarHeader>
+            <SidebarContent>
+                <SidebarGroup>
+                    <SidebarGroupLabel className="group-data-[collapsible=icon]:hidden">
+                        Navigation
+                    </SidebarGroupLabel>
+                    <SidebarGroupContent>
+                        <SidebarMenu>
+                            {items.map((item) => (
+                                <SidebarMenuItem key={item.title}>
+                                    <SidebarMenuButton
+                                        asChild
+                                        isActive={pathname === item.url}
+                                        tooltip={item.title}
+                                    >
+                                        <Link href={item.url}>
+                                            <item.icon />
+                                            <span>{item.title}</span>
+                                        </Link>
+                                    </SidebarMenuButton>
+                                </SidebarMenuItem>
+                            ))}
+                        </SidebarMenu>
+                    </SidebarGroupContent>
+                </SidebarGroup>
+            </SidebarContent>
+            <SidebarFooter>
+                <SidebarUserDropdown />
+            </SidebarFooter>
+        </Sidebar>
+    )
+}