users update create delete tested

frontend/components/sidebar/navs/nav-documents.tsx

@@ -0,0 +1,92 @@
+"use client"
+
+import {
+    IconDots,
+    IconFolder,
+    IconShare3,
+    IconTrash,
+    type Icon,
+} from "@tabler/icons-react"
+
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import {
+    SidebarGroup,
+    SidebarGroupLabel,
+    SidebarMenu,
+    SidebarMenuAction,
+    SidebarMenuButton,
+    SidebarMenuItem,
+    useSidebar,
+} from "@/components/ui/sidebar"
+
+export function NavDocuments({
+    items,
+}: {
+    items: {
+        name: string
+        url: string
+        icon: Icon
+    }[]
+}) {
+    const { isMobile } = useSidebar()
+
+    return (
+        <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+            <SidebarGroupLabel>Documents</SidebarGroupLabel>
+            <SidebarMenu>
+                {items.map((item) => (
+                    <SidebarMenuItem key={item.name}>
+                        <SidebarMenuButton asChild>
+                            <a href={item.url}>
+                                <item.icon />
+                                <span>{item.name}</span>
+                            </a>
+                        </SidebarMenuButton>
+                        <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                                <SidebarMenuAction
+                                    showOnHover
+                                    className="data-[state=open]:bg-accent rounded-sm"
+                                >
+                                    <IconDots />
+                                    <span className="sr-only">More</span>
+                                </SidebarMenuAction>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent
+                                className="w-24 rounded-lg"
+                                side={isMobile ? "bottom" : "right"}
+                                align={isMobile ? "end" : "start"}
+                            >
+                                <DropdownMenuItem>
+                                    <IconFolder />
+                                    <span>Open</span>
+                                </DropdownMenuItem>
+                                <DropdownMenuItem>
+                                    <IconShare3 />
+                                    <span>Share</span>
+                                </DropdownMenuItem>
+                                <DropdownMenuSeparator />
+                                <DropdownMenuItem variant="destructive">
+                                    <IconTrash />
+                                    <span>Delete</span>
+                                </DropdownMenuItem>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+                    </SidebarMenuItem>
+                ))}
+                <SidebarMenuItem>
+                    <SidebarMenuButton className="text-sidebar-foreground/70">
+                        <IconDots className="text-sidebar-foreground/70" />
+                        <span>More</span>
+                    </SidebarMenuButton>
+                </SidebarMenuItem>
+            </SidebarMenu>
+        </SidebarGroup>
+    )
+}

frontend/components/sidebar/navs/nav-main.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import { IconCirclePlusFilled, IconMail, type Icon } from "@tabler/icons-react"
+
+import { Button } from "@/components/ui/button"
+import {
+    SidebarGroup,
+    SidebarGroupContent,
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+} from "@/components/ui/sidebar"
+
+export function NavMain({
+    items,
+}: {
+    items: {
+        title: string
+        url: string
+        icon?: Icon
+    }[]
+}) {
+    return (
+        <SidebarGroup>
+            <SidebarGroupContent className="flex flex-col gap-2">
+                <SidebarMenu>
+                    <SidebarMenuItem className="flex items-center gap-2">
+                        <SidebarMenuButton
+                            tooltip="Quick Create"
+                            className="bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground min-w-8 duration-200 ease-linear"
+                        >
+                            <IconCirclePlusFilled />
+                            <span>Quick Create</span>
+                        </SidebarMenuButton>
+                        <Button
+                            size="icon"
+                            className="size-8 group-data-[collapsible=icon]:opacity-0"
+                            variant="outline"
+                        >
+                            <IconMail />
+                            <span className="sr-only">Inbox</span>
+                        </Button>
+                    </SidebarMenuItem>
+                </SidebarMenu>
+                <SidebarMenu>
+                    {items.map((item) => (
+                        <SidebarMenuItem key={item.title}>
+                            <SidebarMenuButton tooltip={item.title}>
+                                {item.icon && <item.icon />}
+                                <span>{item.title}</span>
+                            </SidebarMenuButton>
+                        </SidebarMenuItem>
+                    ))}
+                </SidebarMenu>
+            </SidebarGroupContent>
+        </SidebarGroup>
+    )
+}

frontend/components/sidebar/navs/nav-secondary.tsx

@@ -0,0 +1,42 @@
+"use client"
+
+import * as React from "react"
+import { type Icon } from "@tabler/icons-react"
+
+import {
+    SidebarGroup,
+    SidebarGroupContent,
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+} from "@/components/ui/sidebar"
+
+export function NavSecondary({
+    items,
+    ...props
+}: {
+    items: {
+        title: string
+        url: string
+        icon: Icon
+    }[]
+} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+    return (
+        <SidebarGroup {...props}>
+            <SidebarGroupContent>
+                <SidebarMenu>
+                    {items.map((item) => (
+                        <SidebarMenuItem key={item.title}>
+                            <SidebarMenuButton asChild>
+                                <a href={item.url}>
+                                    <item.icon />
+                                    <span>{item.title}</span>
+                                </a>
+                            </SidebarMenuButton>
+                        </SidebarMenuItem>
+                    ))}
+                </SidebarMenu>
+            </SidebarGroupContent>
+        </SidebarGroup>
+    )
+}

frontend/components/sidebar/navs/nav-user.tsx

@@ -0,0 +1,110 @@
+"use client"
+
+import {
+    IconCreditCard,
+    IconDotsVertical,
+    IconLogout,
+    IconNotification,
+    IconUserCircle,
+} from "@tabler/icons-react"
+
+import {
+    Avatar,
+    AvatarFallback,
+    AvatarImage,
+} from "@/components/ui/avatar"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuGroup,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import {
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+    useSidebar,
+} from "@/components/ui/sidebar"
+
+export function NavUser({
+    user,
+}: {
+    user: {
+        name: string
+        email: string
+        avatar: string
+    }
+}) {
+    const { isMobile } = useSidebar()
+
+    return (
+        <SidebarMenu>
+            <SidebarMenuItem>
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <SidebarMenuButton
+                            size="lg"
+                            className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                        >
+                            <Avatar className="h-8 w-8 rounded-lg grayscale">
+                                <AvatarImage src={user.avatar} alt={user.name} />
+                                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                            </Avatar>
+                            <div className="grid flex-1 text-left text-sm leading-tight">
+                                <span className="truncate font-medium">{user.name}</span>
+                                <span className="text-muted-foreground truncate text-xs">
+                                    {user.email}
+                                </span>
+                            </div>
+                            <IconDotsVertical className="ml-auto size-4" />
+                        </SidebarMenuButton>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent
+                        className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+                        side={isMobile ? "bottom" : "right"}
+                        align="end"
+                        sideOffset={4}
+                    >
+                        <DropdownMenuLabel className="p-0 font-normal">
+                            <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                                <Avatar className="h-8 w-8 rounded-lg">
+                                    <AvatarImage src={user.avatar} alt={user.name} />
+                                    <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                                </Avatar>
+                                <div className="grid flex-1 text-left text-sm leading-tight">
+                                    <span className="truncate font-medium">{user.name}</span>
+                                    <span className="text-muted-foreground truncate text-xs">
+                                        {user.email}
+                                    </span>
+                                </div>
+                            </div>
+                        </DropdownMenuLabel>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuGroup>
+                            <DropdownMenuItem>
+                                <IconUserCircle />
+                                Account
+                            </DropdownMenuItem>
+                            <DropdownMenuItem>
+                                <IconCreditCard />
+                                Billing
+                            </DropdownMenuItem>
+                            <DropdownMenuItem>
+                                <IconNotification />
+                                Notifications
+                            </DropdownMenuItem>
+                        </DropdownMenuGroup>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem>
+                            <IconLogout />
+                            Log out
+                        </DropdownMenuItem>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            </SidebarMenuItem>
+        </SidebarMenu>
+    )
+}