refactor(mantine): migrate privacy

inertia/components/navbar/mantine_navbar.tsx

@@ -0,0 +1,90 @@
+import PATHS from '#constants/paths';
+import { Link } from '@inertiajs/react';
+import { route } from '@izzyjs/route/client';
+import {
+	Box,
+	Burger,
+	Button,
+	Divider,
+	Drawer,
+	Group,
+	Image,
+	ScrollArea,
+	rem,
+} from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { useTranslation } from 'react-i18next';
+import ExternalLink from '~/components/common/external_link';
+import classes from './mobile_navbar.module.css';
+
+export default function MantineNavbar() {
+	const { t } = useTranslation('common');
+	const [drawerOpened, { toggle: toggleDrawer, close: closeDrawer }] =
+		useDisclosure(false);
+
+	return (
+		<Box pb={40}>
+			<header className={classes.header}>
+				<Group justify="space-between" h="100%">
+					<Image src="/logo-light.png" h={40} alt="MyLinks's logo" />
+
+					<Group h="100%" gap={0} visibleFrom="sm">
+						<Link href="#" className={classes.link}>
+							{t('home')}
+						</Link>
+						<ExternalLink href={PATHS.REPO_GITHUB} className={classes.link}>
+							Github
+						</ExternalLink>
+						<ExternalLink href={PATHS.EXTENSION} className={classes.link}>
+							Extension
+						</ExternalLink>
+					</Group>
+
+					<Group visibleFrom="sm">
+						<Button component={Link} href={route('auth.login').url}>
+							{t('login')}
+						</Button>
+					</Group>
+
+					<Burger
+						opened={drawerOpened}
+						onClick={toggleDrawer}
+						hiddenFrom="sm"
+					/>
+				</Group>
+			</header>
+
+			<Drawer
+				opened={drawerOpened}
+				onClose={closeDrawer}
+				size="100%"
+				padding="md"
+				title="Navigation"
+				hiddenFrom="sm"
+				zIndex={1000000}
+			>
+				<ScrollArea h={`calc(100vh - ${rem(80)})`} mx="-md">
+					<Divider my="sm" />
+
+					<Link href="#" className={classes.link}>
+						{t('home')}
+					</Link>
+					<ExternalLink href={PATHS.REPO_GITHUB} className={classes.link}>
+						Github
+					</ExternalLink>
+					<ExternalLink href={PATHS.EXTENSION} className={classes.link}>
+						Extension
+					</ExternalLink>
+
+					<Divider my="sm" />
+
+					<Group justify="center" grow pb="xl" px="md">
+						<Button component={Link} href={route('auth.login').url}>
+							{t('login')}
+						</Button>
+					</Group>
+				</ScrollArea>
+			</Drawer>
+		</Box>
+	);
+}

inertia/components/navbar/mobile_navbar.module.css

@@ -0,0 +1,31 @@
+.header {
+	height: rem(60px);
+	padding-left: var(--mantine-spacing-md);
+	padding-right: var(--mantine-spacing-md);
+	border-bottom: rem(1px) solid
+		light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+}
+
+.link {
+	display: flex;
+	align-items: center;
+	height: 100%;
+	padding-left: var(--mantine-spacing-md);
+	padding-right: var(--mantine-spacing-md);
+	text-decoration: none;
+	color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+	font-weight: 500;
+	font-size: var(--mantine-font-size-sm);
+
+	@media (max-width: $mantine-breakpoint-sm) {
+		height: rem(42px);
+		width: 100%;
+	}
+
+	@mixin hover {
+		background-color: light-dark(
+			var(--mantine-color-gray-0),
+			var(--mantine-color-dark-6)
+		);
+	}
+}