sarlink-portal/components/ui/app-sidebar.tsx

import { ChevronRight } from "lucide-react";

import {
	Collapsible,
	CollapsibleContent,
	CollapsibleTrigger,
} from "@/components/ui/collapsible";
import {
	Sidebar,
	SidebarContent,
	SidebarGroup,
	SidebarGroupContent,
	SidebarGroupLabel,
	SidebarHeader,
	SidebarMenu,
	SidebarMenuButton,
	SidebarMenuItem,
	SidebarRail,
} from "@/components/ui/sidebar";
import Link from "next/link";

const data = {
	navMain: [
		{
			title: "MENU",
			url: "#",
			requiredRoles: ["ADMIN", "USER"],
			items: [
				{
					title: "Devices",
					url: "/devices",
				},
				{
					title: "Payments",
					url: "/payments",
				},
			],
		},
		{
			title: "ADMIN CONTROL",
			url: "#",
			requiredRoles: ["ADMIN"],
			items: [
				{
					title: "Users",
					url: "/users",
				},
				{
					title: "User Devices",
					url: "/user-devices",
				},
				{
					title: "User Payments",
					url: "/user-payments",
				},
			],
		},
	],
};

export function AppSidebar({
	role,
	...props
}: React.ComponentProps<typeof Sidebar> & { role: string }) {
	return (
		<Sidebar {...props} className="z-50">
			<SidebarHeader>
				<h4 className="bg-gray-200 p-2 rounded shadow text-center uppercase dark:bg-gray-800">
					Sar Link Portal
				</h4>
			</SidebarHeader>
			<SidebarContent className="gap-0">
				{/* We create a collapsible SidebarGroup for each parent. */}
				{/* {data.navMain.map((item) => (

					<Collapsible
						key={item.title}
						title={item.title}
						defaultOpen
						className="group/collapsible"
					>
						<SidebarGroup>
							<SidebarGroupLabel
								asChild
								className="group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
							>
								<CollapsibleTrigger>
									{item.title}{" "}
									<ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
								</CollapsibleTrigger>
							</SidebarGroupLabel>
							<CollapsibleContent>
								<SidebarGroupContent>
									<SidebarMenu>
										{item.items.map((item) => (
											<SidebarMenuItem key={item.title}>
												<SidebarMenuButton className="py-6" asChild>
													<Link className="text-md" href={item.url}>
														{item.title}
													</Link>
												</SidebarMenuButton>
											</SidebarMenuItem>
										))}
									</SidebarMenu>
								</SidebarGroupContent>
							</CollapsibleContent>
						</SidebarGroup>
					</Collapsible>
				))} */}
				{data.navMain
					.filter(
						(item) =>
							!item.requiredRoles || item.requiredRoles.includes(role || ""),
					)
					.map((item) => {
						if (item.requiredRoles?.includes(role)) {
							return (
								<Collapsible
									key={item.title}
									title={item.title}
									defaultOpen
									className="group/collapsible"
								>
									<SidebarGroup>
										<SidebarGroupLabel
											asChild
											className="group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
										>
											<CollapsibleTrigger>
												{item.title}{" "}
												<ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
											</CollapsibleTrigger>
										</SidebarGroupLabel>
										<CollapsibleContent>
											<SidebarGroupContent>
												<SidebarMenu>
													{item.items.map((item) => (
														<SidebarMenuItem key={item.title}>
															<SidebarMenuButton className="py-6" asChild>
																<Link className="text-md" href={item.url}>
																	{item.title}
																</Link>
															</SidebarMenuButton>
														</SidebarMenuItem>
													))}
												</SidebarMenu>
											</SidebarGroupContent>
										</CollapsibleContent>
									</SidebarGroup>
								</Collapsible>
							);
						}
					})}
			</SidebarContent>
			<SidebarRail />
		</Sidebar>
	);
}