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

import {
	Calculator,
	ChevronRight,
	Coins,
	CreditCard,
	Handshake,
	MonitorSpeaker,
	Smartphone,
	UsersRound,
	Wallet2Icon,
} 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",
					icon: <Smartphone size={16} />,
				},
				{
					title: "Payments",
					url: "/payments",
					icon: <CreditCard size={16} />,
				},
				{
					title: "Parental Control",
					url: "/parental-control",
					icon: <CreditCard size={16} />,
				},
				{
					title: "Agreements",
					url: "/agreements",
					icon: <Handshake size={16} />,
				},
				{
					title: "Wallet",
					url: "/wallet",
					icon: <Wallet2Icon size={16} />,
				},
			],
		},
		{
			title: "ADMIN CONTROL",
			url: "#",
			requiredRoles: ["ADMIN"],
			items: [
				{
					title: "Users",
					url: "/users",
					icon: <UsersRound size={16} />,
				},
				{
					title: "User Devices",
					url: "/user-devices",
					icon: <MonitorSpeaker size={16} />,
				},
				{
					title: "User Payments",
					url: "/user-payments",
					icon: <Coins size={16} />,
				},
				{
					title: "Price Calculator",
					url: "/price-calculator",
					icon: <Calculator size={16} />,
				},
			],
		},
	],
};

export function AppSidebar({
	role,
	...props
}: React.ComponentProps<typeof Sidebar> & { role: string }) {
	return (
		<Sidebar {...props} className="z-50">
			<SidebarHeader>
				<h4 className="p-2 rounded title-bg border text-center uppercase ">
					Sar Link Portal
				</h4>
			</SidebarHeader>
			<SidebarContent className="gap-0">
				{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.icon}
																	<span className="opacity-70 ml-2">
																		{item.title}
																	</span>
																</Link>
															</SidebarMenuButton>
														</SidebarMenuItem>
													))}
												</SidebarMenu>
											</SidebarGroupContent>
										</CollapsibleContent>
									</SidebarGroup>
								</Collapsible>
							);
						}
					})}
			</SidebarContent>
			<SidebarRail />
		</Sidebar>
	);
}