first commit

components/ui/app-sidebar.tsx

@@ -0,0 +1,91 @@
+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: "#",
+			items: [
+				{
+					title: "Devices",
+					url: "/devices",
+				},
+				{
+					title: "Payments",
+					url: "/payments",
+				},
+			],
+		},
+
+	],
+};
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+	return (
+		<Sidebar {...props}>
+			<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>
+				))}
+			</SidebarContent>
+			<SidebarRail />
+		</Sidebar>
+	);
+}