Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | 3x 3x 3x 3x 3x 3x 3x | import {
IconCalendarStats,
IconDeviceDesktopAnalytics,
IconGauge,
IconHome2,
IconInfoCircle,
IconMessages,
IconUserPlus,
} from '@tabler/icons-react';
import { Link, useRouterState } from '@tanstack/react-router';
import {
Box,
Group,
Image,
NavLink,
Stack,
Text,
useComputedColorScheme,
useMantineTheme,
} from '@mantine/core';
const navLinks = [
{ icon: IconHome2, label: 'Home', path: '/' },
{ icon: IconGauge, label: 'Dashboard', path: '/dashboard' },
{ icon: IconMessages, label: 'Conversations', path: '/conversations' },
{ icon: IconInfoCircle, label: 'About', path: '/about' },
{ icon: IconDeviceDesktopAnalytics, label: 'Analytics', path: '/analytics' },
{ icon: IconCalendarStats, label: 'Releases', path: '/releases' },
];
const authLinks = [{ icon: IconUserPlus, label: 'Sign Up', path: '/signup' }];
export function Navbar() {
const currentPath = useRouterState({
select: (state) => state.location.pathname,
});
const theme = useMantineTheme();
const colorScheme = useComputedColorScheme();
const borderColor = colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3];
const isActive = (path: string) =>
path === currentPath || (path !== '/' && currentPath.startsWith(path));
return (
<Stack
component="nav"
h="100%"
gap="md"
p="md"
bg="var(--mantine-color-body)"
style={{ borderRight: `1px solid ${borderColor}` }}
>
<Box pb="sm" mb="xs" style={{ borderBottom: `1px solid ${borderColor}` }}>
<Group gap="xs">
<Image src="/src/logo.png" alt="TinyCongress logo" h={32} w="auto" fit="contain" />
<Text fw={700} c="dimmed">
TinyCongress
</Text>
</Group>
</Box>
<Stack gap={4} style={{ flex: 1 }}>
{navLinks.map((link) => (
<NavLink
key={link.label}
component={Link}
to={link.path}
label={link.label}
leftSection={<link.icon size={18} stroke={1.5} />}
active={isActive(link.path)}
fw={500}
/>
))}
</Stack>
<Box pt="sm" style={{ borderTop: `1px solid ${borderColor}` }}>
<Stack gap={4}>
{authLinks.map((link) => (
<NavLink
key={link.label}
component={Link}
to={link.path}
label={link.label}
leftSection={<link.icon size={18} stroke={1.5} />}
active={isActive(link.path)}
fw={500}
/>
))}
</Stack>
</Box>
</Stack>
);
}
|