203 lines
8.3 KiB
TypeScript
203 lines
8.3 KiB
TypeScript
import {
|
|
AppWindowIcon,
|
|
ChevronUp,
|
|
ChevronRight,
|
|
Home,
|
|
Scale,
|
|
User2,
|
|
Settings, LayoutDashboard
|
|
} 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";
|
|
|
|
const rheinItems = [
|
|
{
|
|
title: "Dashboard",
|
|
url: "/",
|
|
icon: Home,
|
|
},
|
|
{
|
|
title: "Apps",
|
|
url: "/apps",
|
|
icon: AppWindowIcon,
|
|
},
|
|
];
|
|
|
|
const customerItems = [
|
|
{
|
|
title: "Kundenübersicht",
|
|
url: "/customers",
|
|
icon: LayoutDashboard,
|
|
},
|
|
];
|
|
|
|
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"
|
|
>
|
|
<a href={item.url}>
|
|
<item.icon/>
|
|
<span>{item.title}</span>
|
|
</a>
|
|
</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"
|
|
>
|
|
<a href={item.url}>
|
|
<item.icon/>
|
|
<span>{item.title}</span>
|
|
</a>
|
|
</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"
|
|
>
|
|
|
|
<a href="/demo/settings">
|
|
<Settings/>
|
|
<span>Demo Settings</span>
|
|
</a>
|
|
</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">
|
|
<SidebarMenuSubItem>
|
|
<SidebarMenuSubButton href="/demo/kanzlei/steuer">
|
|
Steuer
|
|
</SidebarMenuSubButton>
|
|
</SidebarMenuSubItem>
|
|
<SidebarMenuSubItem>
|
|
<SidebarMenuSubButton href="/demo/kanzlei/rechtsanwalt">
|
|
Rechtsanwalt
|
|
</SidebarMenuSubButton>
|
|
</SidebarMenuSubItem>
|
|
<SidebarMenuSubItem>
|
|
<SidebarMenuSubButton href="/demo/kanzlei/bilanzbuchhalter">
|
|
Bilanzbuchhalter
|
|
</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]"
|
|
>
|
|
<DropdownMenuItem>
|
|
<span>Account</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<span>Billing</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<span>Sign out</span>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
</SidebarFooter>
|
|
</Sidebar>
|
|
);
|
|
}
|