siakad-itm/resources/js/components/app-sidebar.tsx
Yoga Pangestu fbf29ad4e9
Some checks failed
tests / ci (pull_request) Has been cancelled
feat: Refactor UI components and add new Drawer, Table, and Tabs components
- Removed unnecessary "use client" directive from checkbox and select components.
- Added new Drawer component with associated subcomponents (DrawerTrigger, DrawerClose, etc.) for better UI management.
- Introduced Table component with TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, and TableCaption for structured data display.
- Added Tabs component with TabsList, TabsTrigger, and TabsContent for tabbed navigation.
- Updated user-info component to use full_name instead of name for better clarity.
- Modified user-menu-content to include translations for settings and logout options.
- Added data.json file for mock data in the dashboard.
- Updated dashboard page to utilize new components and improved layout.
- Refactored User type to replace name with full_name for consistency across the application.
2026-08-03 15:57:38 +07:00

142 lines
2.7 KiB
TypeScript

import {
IconCamera,
IconChartBar,
IconDashboard,
IconFileAi,
IconFileDescription,
IconFolder,
IconHelp,
IconInnerShadowTop,
IconListDetails,
IconMessageDots,
IconUsers
} from "@tabler/icons-react";
import * as React from "react";
import { NavMain } from "@/components/nav-main";
import { NavSecondary } from "@/components/nav-secondary";
import {
Sidebar,
SidebarContent,
SidebarHeader,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
} from "@/components/ui/sidebar";
const data = {
navMain: [
{
title: "Dashboard",
url: "#",
icon: IconDashboard,
},
{
title: "Lifecycle",
url: "#",
icon: IconListDetails,
},
{
title: "Analytics",
url: "#",
icon: IconChartBar,
},
{
title: "Projects",
url: "#",
icon: IconFolder,
},
{
title: "Team",
url: "#",
icon: IconUsers,
},
],
navClouds: [
{
title: "Capture",
icon: IconCamera,
isActive: true,
url: "#",
items: [
{
title: "Active Proposals",
url: "#",
},
{
title: "Archived",
url: "#",
},
],
},
{
title: "Proposal",
icon: IconFileDescription,
url: "#",
items: [
{
title: "Active Proposals",
url: "#",
},
{
title: "Archived",
url: "#",
},
],
},
{
title: "Prompts",
icon: IconFileAi,
url: "#",
items: [
{
title: "Active Proposals",
url: "#",
},
{
title: "Archived",
url: "#",
},
],
},
],
navSecondary: [
{
title: "Kritik dan Saran",
url: "#",
icon: IconMessageDots,
},
{
title: "Bantuan",
url: "#",
icon: IconHelp,
},
],
}
export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
return (
<Sidebar collapsible="icon" {...props}>
<SidebarHeader>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton
asChild
className="data-[slot=sidebar-menu-button]:p-1.5!"
>
<a href="#">
<IconInnerShadowTop className="size-5!" />
<span className="text-base font-semibold">Acme Inc.</span>
</a>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarHeader>
<SidebarContent>
<NavMain items={data.navMain} />
<NavSecondary items={data.navSecondary} className="mt-auto" />
</SidebarContent>
</Sidebar>
)
}