43 lines
1.5 KiB
TypeScript
43 lines
1.5 KiB
TypeScript
import { AppShell, ScrollArea, Stack, Group, Paper, useMantineColorScheme } 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";
|
|
import { memo } from "react";
|
|
|
|
const Navbar = () => {
|
|
const { user, roles } = useAuth()
|
|
const isMobile = useIsMobile();
|
|
const { colorScheme } = useMantineColorScheme();
|
|
|
|
const links = useLinks(user?.id, roles);
|
|
|
|
const isDark = colorScheme === 'dark';
|
|
const borderColor = isDark ? 'var(--mantine-color-dimmed)' : 'black';
|
|
const boxShadowColor = isDark ? 'var(--mantine-color-dimmed)' : 'black';
|
|
// boxShadow: `5px 5px ${boxShadowColor}`, borderColor
|
|
|
|
if (isMobile) return (
|
|
<Paper component='nav' role='navigation' withBorder shadow="sm" radius='lg' h='4rem' w='calc(100% - 1.5rem)' pos='fixed' m='0.75rem' 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.Navbar>
|
|
}
|
|
|
|
export default memo(Navbar);
|