Dodo
89 lines
3.8 KiB
TypeScript
89 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
import {
|
|
Sidebar,
|
|
SidebarContent,
|
|
SidebarFooter,
|
|
SidebarHeader,
|
|
SidebarMenu,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
} from "@/components/ui/sidebar";
|
|
import { footerNavLinks, getNavGroups } from "@/components/app-shared";
|
|
import { NavGroup } from "@/components/nav-group";
|
|
import { useAuth } from "@/lib/auth-context";
|
|
|
|
export function AppSidebar({ activePath }: { activePath?: string }) {
|
|
const { user } = useAuth();
|
|
const groups = getNavGroups(activePath, user?.role);
|
|
|
|
return (
|
|
<Sidebar
|
|
className={cn(
|
|
"*:data-[slot=sidebar-inner]:bg-background",
|
|
"*:data-[slot=sidebar-inner]:dark:bg-[radial-gradient(60%_18%_at_10%_0%,--theme(--color-foreground/.08),transparent)]",
|
|
|
|
// Default text/icon colors for sidebar buttons (faded)
|
|
"**:data-[slot=sidebar-menu-button]:[&>span]:text-foreground/60",
|
|
"**:data-[slot=sidebar-menu-button]:[&>svg]:text-foreground/50",
|
|
"**:data-[slot=sidebar-menu-button]:[&>span]:transition-colors",
|
|
"**:data-[slot=sidebar-menu-button]:[&>svg]:transition-colors",
|
|
|
|
// Hover states for sidebar buttons
|
|
"**:data-[slot=sidebar-menu-button]:hover:bg-sidebar-accent/50",
|
|
"**:data-[slot=sidebar-menu-button]:hover:[&>span]:text-foreground",
|
|
"**:data-[slot=sidebar-menu-button]:hover:[&>svg]:text-foreground",
|
|
|
|
// Active state (Vermilion Pulse theme color)
|
|
"**:data-[slot=sidebar-menu-button]:data-[active]:bg-primary/10!",
|
|
"**:data-[slot=sidebar-menu-button]:data-[active]:[&>span]:text-primary!",
|
|
"**:data-[slot=sidebar-menu-button]:data-[active]:[&>span]:font-semibold",
|
|
"**:data-[slot=sidebar-menu-button]:data-[active]:[&>svg]:text-primary!",
|
|
"**:data-[slot=sidebar-menu-button]:data-[active]:hover:bg-primary/15!",
|
|
|
|
// Default text/icon colors for sidebar sub-buttons (faded)
|
|
"**:data-[slot=sidebar-menu-sub-button]:[&>span]:text-foreground/60",
|
|
"**:data-[slot=sidebar-menu-sub-button]:[&>span]:transition-colors",
|
|
|
|
// Hover states for sub-buttons
|
|
"**:data-[slot=sidebar-menu-sub-button]:hover:bg-sidebar-accent/50",
|
|
"**:data-[slot=sidebar-menu-sub-button]:hover:[&>span]:text-foreground",
|
|
|
|
// Active state for sub-buttons
|
|
"**:data-[slot=sidebar-menu-sub-button]:data-[active]:bg-primary/10!",
|
|
"**:data-[slot=sidebar-menu-sub-button]:data-[active]:[&>span]:text-primary!",
|
|
"**:data-[slot=sidebar-menu-sub-button]:data-[active]:[&>span]:font-semibold",
|
|
"**:data-[slot=sidebar-menu-sub-button]:data-[active]:hover:bg-primary/15!"
|
|
)}
|
|
collapsible="icon"
|
|
variant="sidebar"
|
|
>
|
|
<SidebarHeader className="h-14 justify-center border-b px-2">
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<SidebarMenuButton render={<a href="/dashboard" />}><img src="/waras_io/favicon-32x32.png" className="size-5 shrink-0 rounded" alt="Waras Logo" /><span className="font-medium text-foreground!">Waras</span></SidebarMenuButton>
|
|
</SidebarHeader>
|
|
<SidebarContent>
|
|
{groups.map((group, index) => (
|
|
<NavGroup key={`sidebar-group-${index}`} {...group} />
|
|
))}
|
|
</SidebarContent>
|
|
<SidebarFooter className="gap-0 p-0">
|
|
<SidebarMenu className="border-t p-2">
|
|
{footerNavLinks.map((item) => (
|
|
<SidebarMenuItem key={item.title}>
|
|
<SidebarMenuButton className="text-muted-foreground" isActive={item.isActive} size="sm" tooltip={item.title} render={<a href={item.path} />}>{item.icon}<span>{item.title}</span></SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
))}
|
|
</SidebarMenu>
|
|
<div className="px-4 pt-4 pb-2 transition-opacity group-data-[collapsible=icon]:pointer-events-none group-data-[collapsible=icon]:opacity-0">
|
|
<p className="text-nowrap text-[9px] text-muted-foreground">
|
|
© {new Date().getFullYear()} Waras
|
|
</p>
|
|
</div>
|
|
</SidebarFooter>
|
|
</Sidebar>
|
|
);
|
|
}
|