feat: finalize kinerja divisi feature implementation

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

src/components/sidebar.tsx

@@ -0,0 +1,91 @@
+import { useNavigate, useLocation } from "@tanstack/react-router";
+import { Search } from "lucide-react";
+import {
+	Stack,
+	Group,
+	Text,
+	Badge,
+	Input,
+	NavLink as MantineNavLink,
+	Box,
+} from "@mantine/core";
+
+interface SidebarProps {
+	className?: string;
+}
+
+export function Sidebar({ className }: SidebarProps) {
+	const location = useLocation();
+	const navigate = useNavigate();
+
+	// Define menu items with their paths
+	const menuItems = [
+		{ name: "Beranda", path: "/dashboard" },
+		{ name: "Kinerja Divisi", path: "/dashboard/kinerja-divisi" },
+		{ name: "Pengaduan & Layanan Publik", path: "/dashboard/pengaduan-layanan-publik" },
+		{ name: "Jenna Analytic", path: "/dashboard/jenna-analytic" },
+		{ name: "Demografi & Kependudukan", path: "/dashboard/demografi" },
+		{ name: "Keuangan & Anggaran", path: "/dashboard/keuangan" },
+		{ name: "Bumdes & UMKM Desa", path: "/dashboard/bumdes" },
+		{ name: "Sosial", path: "/dashboard/sosial" },
+		{ name: "Keamanan", path: "/dashboard/keamanan" },
+		{ name: "Bantuan", path: "/dashboard/bantuan" },
+		{ name: "Pengaturan", path: "/dashboard/pengaturan" },
+	];
+
+	return (
+		<Box className={className}>
+			{/* Logo */}
+			<Box p="md" style={{ borderBottom: "1px solid var(--mantine-color-gray-3)" }}>
+				<Group gap="xs">
+					<Badge
+						color="dark"
+						variant="filled"
+						size="xl"
+						radius="md"
+						py="xs"
+						px="md"
+						style={{ fontSize: "1.5rem", fontWeight: "bold" }}
+					>
+						DESA
+					</Badge>
+					<Badge color="green" variant="filled" size="md" radius="md">
+						+
+					</Badge>
+				</Group>
+				<Text size="xs" c="dimmed" mt="xs">
+					Digitalisasi Desa Transparansi Kerja
+				</Text>
+			</Box>
+
+			{/* Search */}
+			<Box p="md">
+				<Input
+					placeholder="cari apa saja"
+					leftSection={<Search size={16} />}
+					styles={{
+						input: {
+							"&::placeholder": {
+								color: "var(--mantine-color-gray-5)",
+							},
+						},
+					}}
+				/>
+			</Box>
+
+			{/* Menu Items */}
+			<Stack gap={0} px="xs" flex={1} style={{ overflowY: "auto" }}>
+				{menuItems.map((item, index) => (
+					<MantineNavLink
+						key={index}
+						onClick={() => navigate({ to: item.path })}
+						label={item.name}
+						active={location.pathname === item.path}
+						variant="subtle"
+						color="blue"
+					/>
+				))}
+			</Stack>
+		</Box>
+	);
+}