init

k-notes-frontend/src/components/app-sidebar.tsx

@@ -0,0 +1,66 @@
+import { Home, Archive, Settings } from "lucide-react"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/components/ui/sidebar"
+import { Link, useLocation } from "react-router-dom"
+import { SettingsDialog } from "@/components/settings-dialog"
+import { useState } from "react"
+
+const items = [
+  {
+    title: "Notes",
+    url: "/",
+    icon: Home,
+  },
+  {
+    title: "Archive",
+    url: "/archive",
+    icon: Archive,
+  },
+]
+
+export function AppSidebar() {
+  const location = useLocation();
+  const [settingsOpen, setSettingsOpen] = useState(false);
+
+  return (
+    <>
+    <Sidebar collapsible="icon">
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>K-Notes</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {items.map((item) => (
+                <SidebarMenuItem key={item.title}>
+                  <SidebarMenuButton asChild isActive={location.pathname === item.url} tooltip={item.title}>
+                    <Link to={item.url}>
+                      <item.icon />
+                      <span>{item.title}</span>
+                    </Link>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+              
+              <SidebarMenuItem>
+                  <SidebarMenuButton onClick={() => setSettingsOpen(true)} tooltip="Settings">
+                      <Settings />
+                      <span>Settings</span>
+                  </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+    <SettingsDialog open={settingsOpen} onOpenChange={setSettingsOpen} />
+    </>
+  )
+}