Untitled
"use client" import * as React from "react" import { Minus, Plus, Trash2 } from 'lucide-react' import { useTheme } from "next-themes" import { useSettings } from "@/hooks/useSettings" import { useTranslation, type SupportedLanguages } from "@/utils/translations" import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "@/components/ui/collapsible" import { Sidebar, SidebarContent, SidebarGroup, SidebarHeader, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarMenuSub, SidebarMenuSubItem, SidebarMenuSubButton, SidebarRail, } from "@/components/ui/sidebar" import { Button } from "@/components/ui/button" import { Moon, Sun } from 'lucide-react' import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select" export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) { const { theme } = useTheme() const { settings, updateSettings } = useSettings() const { t } = useTranslation(settings?.language as SupportedLanguages || 'EN') const navData = React.useMemo(() => ({ navMain: [ { title: t('navigation.home'), url: "/", isDirectLink: true, }, { title: t('navigation.gallery'), url: "gallery", isDirectLink: true, }, { title: t('navigation.placeholder'), url: "#", items: [ { title: t('navigation.components'), url: "#", }, { title: t('navigation.fileConventions'), url: "#", }, { title: t('navigation.functions'), url: "#", }, ], }, { title: t('navigation.help'), url: "#", items: [ { title: t('navigation.guide'), url: "guide", }, ], }, { title: t('navigation.settings'), url: "#", items: [ { title: t('navigation.components'), url: "#", }, { title: t('navigation.fileConventions'), url: "#", }, { title: t('navigation.functions'), url: "#", }, ], }, ], }), [t]); const handleThemeToggle = () => { const newDarkMode = theme === "light" ? 1 : 0; updateSettings({ dark_mode: newDarkMode }); }; const handleLanguageChange = (value: string) => { updateSettings({ language: value }); }; return ( <Sidebar {...props}> <SidebarHeader className="border-b p-4"> <div className="flex items-center gap-3 px-2"> <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br from-sidebar-primary to-sidebar-primary/80 text-sidebar-primary-foreground"> <Trash2 className="h-6 w-6" /> </div> <div className="flex flex-col"> <span className="text-lg font-semibold text-sidebar-foreground">SortiMate</span> <span className="text-xs text-sidebar-foreground/60"> {t('common.aiAssistant')} </span> </div> </div> </SidebarHeader> <SidebarContent> <SidebarGroup> <SidebarMenu> {navData.navMain.map((item) => ( item.isDirectLink ? ( <SidebarMenuItem key={item.title}> <SidebarMenuButton asChild> <a href={item.url}>{item.title}</a> </SidebarMenuButton> </SidebarMenuItem> ) : ( <Collapsible key={item.title} className="group/collapsible" > <SidebarMenuItem> <CollapsibleTrigger asChild> <SidebarMenuButton> {item.title}{" "} <Plus className="ml-auto group-data-[state=open]/collapsible:hidden" /> <Minus className="ml-auto group-data-[state=closed]/collapsible:hidden" /> </SidebarMenuButton> </CollapsibleTrigger> {item.items?.length ? ( <CollapsibleContent> <SidebarMenuSub> {item.items.map((item) => ( <SidebarMenuSubItem key={item.title}> <SidebarMenuSubButton asChild isActive={item.isActive} > <a href={item.url}>{item.title}</a> </SidebarMenuSubButton> </SidebarMenuSubItem> ))} </SidebarMenuSub> </CollapsibleContent> ) : null} </SidebarMenuItem> </Collapsible> ) ))} </SidebarMenu> </SidebarGroup> </SidebarContent> <div className="mt-auto border-t p-4 space-y-2"> <Button variant="ghost" size="sm" className="w-full justify-between" onClick={handleThemeToggle} > <span className="text-sm">{t('common.theme')}</span> <div className="flex items-center"> <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" /> <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" /> </div> </Button> <Select value={settings?.language || "EN"} onValueChange={handleLanguageChange} > <SelectTrigger className="w-full"> <SelectValue /> </SelectTrigger> <SelectContent> <SelectItem value="EN">{t('common.english')}</SelectItem> <SelectItem value="DE">{t('common.german')}</SelectItem> </SelectContent> </Select> </div> <SidebarRail /> </Sidebar> ); }
Leave a Comment