92 lines
2.3 KiB
TypeScript
92 lines
2.3 KiB
TypeScript
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-pekerjaan" },
|
|
{ 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>
|
|
);
|
|
}
|