+69

web/src/components/app-sidebar.tsx

reviewed

··· 1 1 + import { 2 2 + Sidebar, 3 3 + SidebarContent, 4 4 + SidebarFooter, 5 5 + SidebarGroup, 6 6 + SidebarGroupContent, 7 7 + SidebarGroupLabel, 8 8 + SidebarHeader, 9 9 + SidebarMenu, 10 10 + SidebarMenuButton, 11 11 + SidebarMenuItem, 12 12 + } from "@/components/ui/sidebar"; 13 13 + 14 14 + import { Calendar, Home, Inbox, Search, Settings } from "lucide-react"; 15 15 + 16 16 + const items = [ 17 17 + { 18 18 + title: "Home", 19 19 + url: "#", 20 20 + icon: Home, 21 21 + }, 22 22 + { 23 23 + title: "Inbox", 24 24 + url: "#", 25 25 + icon: Inbox, 26 26 + }, 27 27 + { 28 28 + title: "Calendar", 29 29 + url: "#", 30 30 + icon: Calendar, 31 31 + }, 32 32 + { 33 33 + title: "Search", 34 34 + url: "#", 35 35 + icon: Search, 36 36 + }, 37 37 + { 38 38 + title: "Settings", 39 39 + url: "#", 40 40 + icon: Settings, 41 41 + }, 42 42 + ]; 43 43 + export function AppSidebar() { 44 44 + return ( 45 45 + <Sidebar> 46 46 + <SidebarHeader /> 47 47 + <SidebarContent> 48 48 + <SidebarGroup> 49 49 + <SidebarGroupLabel>Application</SidebarGroupLabel> 50 50 + <SidebarGroupContent> 51 51 + <SidebarMenu> 52 52 + {items.map((item) => ( 53 53 + <SidebarMenuItem key={item.title}> 54 54 + <SidebarMenuButton asChild> 55 55 + <a href={item.url}> 56 56 + <item.icon /> 57 57 + <span>{item.title}</span> 58 58 + </a> 59 59 + </SidebarMenuButton> 60 60 + </SidebarMenuItem> 61 61 + ))} 62 62 + </SidebarMenu> 63 63 + </SidebarGroupContent> 64 64 + </SidebarGroup> 65 65 + </SidebarContent> 66 66 + <SidebarFooter /> 67 67 + </Sidebar> 68 68 + ); 69 69 + }

+10 -2

web/src/pages/_layout.tsx

reviewed

··· 3 3 import type { ReactNode } from "react"; 4 4 import { AudioPlayer } from "@/components/audio-player"; 5 5 import { Providers } from "@/components/providers"; 6 6 + import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"; 7 7 + import { AppSidebar } from "@/components/app-sidebar"; 6 8 7 9 type RootLayoutProps = { children: ReactNode }; 8 10 ··· 15 17 <link rel="icon" type="image/png" href={data.icon} /> 16 18 <div className="font-['Geist'] pb-36 w-full overflow-x-hidden min-h-screen antialiased flex flex-col items-center h-auto"> 17 19 <Providers> 18 18 - <main className="">{children}</main> 19 19 - <AudioPlayer /> 20 20 + <SidebarProvider> 21 21 + <AppSidebar /> 22 22 + <main className=""> 23 23 + <SidebarTrigger /> 24 24 + {children} 25 25 + </main> 26 26 + <AudioPlayer /> 27 27 + </SidebarProvider> 20 28 </Providers> 21 29 </div> 22 30 </>