init

src/features/core/components/navbar.tsx

@@ -0,0 +1,39 @@
+import { AppShell, ScrollArea, Stack, Group, Paper } from "@mantine/core";
+import { Link } from "@tanstack/react-router";
+import { NavLink } from "./nav-link";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import { useAuth } from  "@/contexts/auth-context";
+import { useLinks } from "../hooks/use-links";
+
+const Navbar = () => {
+  const { user, roles } = useAuth()
+  const isMobile = useIsMobile();
+  const links = useLinks(user?.id, roles);
+
+  console.log('rendered')
+
+  if (isMobile) return (
+    <Paper component='nav' role='navigation' withBorder radius='lg' h='4rem' w='calc(100% - 2rem)' shadow='sm' pos='fixed' m='1rem' bottom='0' style={{ zIndex: 10 }}>
+      <Group gap='xs' justify='space-around' h='100%' w='100%' px={{ base: 12, sm: 0 }}>
+        {links.map((link) => (
+          <NavLink key={link.href} {...link} />
+        ))}
+      </Group>
+    </Paper>
+  )
+
+  return <AppShell.Navbar p="xs" role='navigation'>
+    <AppShell.Section grow component={ScrollArea}>
+      <Stack gap='xs' mx='auto' w='fit-content' justify='end' mt='md'>
+        {links.map((link) => (
+          <NavLink key={link.href} {...link} />
+        ))}
+      </Stack>
+    </AppShell.Section>
+    <AppShell.Section>
+      <Link to="/logout">Logout</Link>
+    </AppShell.Section>
+  </AppShell.Navbar>
+}
+
+export default Navbar;