my-links/inertia/mantine/components/dashboard/dashboard_navbar.tsx

import { Link } from '@inertiajs/react';
import { route } from '@izzyjs/route/client';
import {
	AppShell,
	Burger,
	Divider,
	Group,
	NavLink,
	ScrollArea,
	Skeleton,
	Text,
} from '@mantine/core';
import { useTranslation } from 'react-i18next';
import { AiOutlineFolderAdd } from 'react-icons/ai';
import { IoIosSearch } from 'react-icons/io';
import { IoAdd, IoShieldHalfSharp } from 'react-icons/io5';
import { PiGearLight } from 'react-icons/pi';
import { MantineUserCard } from '~/components/common/mantine_user_card';

interface DashboardNavbarProps {
	isOpen: boolean;
	toggle: () => void;
}
export function DashboardNavbar({ isOpen, toggle }: DashboardNavbarProps) {
	const { t } = useTranslation('common');
	const common = {
		variant: 'subtle',
		color: 'blue',
		active: true,
	};
	return (
		<AppShell.Navbar p="md">
			<Group hiddenFrom="sm" mb="md">
				<Burger opened={isOpen} onClick={toggle} size="sm" />
				<Text>Menu</Text>
			</Group>
			<MantineUserCard />
			<Divider mt="xs" mb="md" />
			<NavLink
				{...common}
				component={Link}
				href={route('admin.dashboard').url}
				label={t('admin')}
				leftSection={<IoShieldHalfSharp size="1.5rem" />}
				color="var(--mantine-color-red-5)"
			/>
			<NavLink
				label={t('settings')}
				leftSection={<PiGearLight size="1.5rem" />}
				variant="subtle"
			/>
			<NavLink
				{...common}
				label={t('search')}
				leftSection={<IoIosSearch size="1.5rem" />}
			/>
			<NavLink
				{...common}
				component={Link}
				href={route('collection.create-form').url}
				label={t('collection.create')}
				leftSection={<IoAdd size="1.5rem" />}
			/>
			<NavLink
				{...common}
				component={Link}
				href={route('link.create-form').url}
				label={t('link.create')}
				leftSection={<AiOutlineFolderAdd size="1.5rem" />}
			/>
			<Text size="sm" fw={500} c="dimmed" mt="sm" ml="md">
				{t('favorite')} • {0}
			</Text>
			<ScrollArea>
				{Array(15)
					.fill(0)
					.map((_, index) => (
						<Skeleton key={index} h={28} mt="sm" animate={false} />
					))}
			</ScrollArea>
		</AppShell.Navbar>
	);
}