Project Init

apps/backoffice/src/app/layouts/components/AppSidebar.tsx

@@ -0,0 +1,27 @@
+import { NavLink, Stack } from '@mantine/core';
+import { IconDashboard, IconBox } from '@tabler/icons-react';
+import { useNavigate, useLocation } from 'react-router-dom';
+
+const NAV_ITEMS = [
+  { label: 'Dashboard', icon: IconDashboard, path: '/dashboard' },
+  { label: 'Items', icon: IconBox, path: '/items' },
+];
+
+export function AppSidebar() {
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+
+  return (
+    <Stack p="xs" gap={4}>
+      {NAV_ITEMS.map(({ label, icon: Icon, path }) => (
+        <NavLink
+          key={path}
+          label={label}
+          leftSection={<Icon size={18} />}
+          active={pathname.startsWith(path)}
+          onClick={() => navigate(path)}
+        />
+      ))}
+    </Stack>
+  );
+}