Gitlab-Migration/rheinsw-mono-repo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add foundational UI components (sidebar, some basic navigation)

Browse Source
This commit is contained in:
Thatsaphorn
2025-07-01 18:44:15 +09:00
parent 20314c64b2
commit b33b470e7b
16 changed files with 2427 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
internal_frontend/components/app-sidebar.tsx Normal file
View File

@@ -0,0 +1,173 @@
import {
AppWindowIcon,
ChevronUp,
ChevronRight,
Home,
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";
const rheinItems = [
{
title: "Dashboard",
url: "/",
icon: Home,
},
{
title: "Apps",
url: "/apps",
icon: AppWindowIcon,
},
];
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>
{/* 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="/kanzlei/steuer">
Steuer
</SidebarMenuSubButton>
</SidebarMenuSubItem>
<SidebarMenuSubItem>
<SidebarMenuSubButton href="/kanzlei/rechtsanwalt">
Rechtsanwalt
</SidebarMenuSubButton>
</SidebarMenuSubItem>
<SidebarMenuSubItem>
<SidebarMenuSubButton href="/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>
);
}