Thatsaphorn Atchariyaphap
e42b352216
- Centralize user menu, sidebar items, and breadcrumb logic. - Map consistent API endpoints in `customerRoutes`. - Replace inline route definitions with reusable constants. - Refactor auth configuration file location. - Improve `<Link>` usage to replace static `<a>` elements. - Adjust sidebar and dropdown components to use dynamic navigation configurations.
172 lines
7.7 KiB
TypeScript
172 lines
7.7 KiB
TypeScript
import Link from 'next/link';
|
|
import {
|
|
ChevronUp,
|
|
ChevronRight,
|
|
Scale,
|
|
User2,
|
|
Settings,
|
|
} from "lucide-react";
|
|
import {
|
|
Sidebar,
|
|
SidebarContent,
|
|
SidebarFooter,
|
|
SidebarGroup,
|
|
SidebarGroupContent,
|
|
SidebarGroupLabel,
|
|
SidebarHeader,
|
|
SidebarMenu,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
SidebarMenuSub,
|
|
SidebarMenuSubItem,
|
|
SidebarMenuSubButton,
|
|
} from "@/components/ui/sidebar";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import {
|
|
Collapsible,
|
|
CollapsibleTrigger,
|
|
CollapsibleContent,
|
|
} from "@/components/ui/collapsible";
|
|
import {rheinItems, customerItems, kanzleiItems} from "@/lib/navigation/sidebar-items";
|
|
import {userMenuItems} from "@/lib/navigation/user-menu-items";
|
|
|
|
|
|
export function AppSidebar() {
|
|
return (
|
|
<Sidebar>
|
|
<SidebarHeader/>
|
|
<SidebarContent>
|
|
{/* Rhein section */}
|
|
<SidebarGroup>
|
|
<SidebarGroupLabel>Rhein Software Development</SidebarGroupLabel>
|
|
<SidebarGroupContent>
|
|
<SidebarMenu className="flex flex-col gap-y-1">
|
|
{rheinItems.map((item) => (
|
|
<SidebarMenuItem key={item.title}>
|
|
<SidebarMenuButton
|
|
asChild
|
|
className="hover:bg-accent hover:text-accent-foreground"
|
|
>
|
|
<Link href={item.url}>
|
|
<item.icon/>
|
|
<span>{item.title}</span>
|
|
</Link>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
))}
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</SidebarGroup>
|
|
|
|
<SidebarGroup>
|
|
<SidebarGroupLabel>Kunden</SidebarGroupLabel>
|
|
<SidebarGroupContent>
|
|
<SidebarMenu className="flex flex-col gap-y-1">
|
|
{customerItems.map((item) => (
|
|
<SidebarMenuItem key={item.title}>
|
|
<SidebarMenuButton
|
|
asChild
|
|
className="hover:bg-accent hover:text-accent-foreground"
|
|
>
|
|
<Link href={item.url}>
|
|
<item.icon/>
|
|
<span>{item.title}</span>
|
|
</Link>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
))}
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</SidebarGroup>
|
|
|
|
{/* Demos section */}
|
|
<SidebarGroup>
|
|
<SidebarGroupLabel>Demos</SidebarGroupLabel>
|
|
<SidebarGroupContent>
|
|
<SidebarMenu className="flex flex-col gap-y-1">
|
|
<SidebarMenu className="flex flex-col gap-y-1">
|
|
<SidebarMenuItem key="demo-settings">
|
|
<SidebarMenuButton
|
|
asChild
|
|
className="hover:bg-accent hover:text-accent-foreground"
|
|
>
|
|
<Link href="/demo/settings">
|
|
<Settings/>
|
|
<span>Demo Settings</span>
|
|
</Link>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
</SidebarMenu>
|
|
<SidebarMenu className="flex flex-col gap-y-1">
|
|
<Collapsible className="group/collapsible">
|
|
<SidebarMenuItem className="flex items-center">
|
|
<CollapsibleTrigger asChild>
|
|
<SidebarMenuButton
|
|
className="flex items-center w-full hover:bg-accent hover:text-accent-foreground">
|
|
<Scale/>
|
|
<span className="flex-1">Kanzlei</span>
|
|
<ChevronRight
|
|
className="transition-transform group-data-[state=open]/collapsible:rotate-90"
|
|
size={16}
|
|
/>
|
|
</SidebarMenuButton>
|
|
</CollapsibleTrigger>
|
|
</SidebarMenuItem>
|
|
|
|
<CollapsibleContent>
|
|
<SidebarMenuSub className="ml-4 border-l border-border pl-4 flex flex-col gap-y-1">
|
|
{kanzleiItems.map((item) => (
|
|
<SidebarMenuSubItem key={item.title}>
|
|
<SidebarMenuSubButton asChild>
|
|
<Link href={item.url}>
|
|
{item.title}
|
|
</Link>
|
|
</SidebarMenuSubButton>
|
|
</SidebarMenuSubItem>
|
|
))}
|
|
</SidebarMenuSub>
|
|
</CollapsibleContent>
|
|
</Collapsible>
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</SidebarGroup>
|
|
</SidebarContent>
|
|
|
|
{/* Footer with user dropdown */}
|
|
<SidebarFooter>
|
|
<SidebarMenu>
|
|
<SidebarMenuItem>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<SidebarMenuButton className="hover:bg-accent hover:text-accent-foreground">
|
|
<User2/>
|
|
Username
|
|
<ChevronUp className="ml-auto"/>
|
|
</SidebarMenuButton>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent
|
|
side="top"
|
|
className="w-[--radix-popper-anchor-width]"
|
|
>
|
|
{userMenuItems.map((item) => (
|
|
<DropdownMenuItem key={item.title} asChild>
|
|
<Link href={item.url}>
|
|
{item.icon && <item.icon className="mr-2 h-4 w-4"/>}
|
|
<span>{item.title}</span>
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
))}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
</SidebarFooter>
|
|
</Sidebar>
|
|
);
|
|
} |