refactor(mantine): migrate privacy

inertia/components/footer/footer.module.css

@@ -0,0 +1,23 @@
+.footer {
+	margin-top: rem(40px);
+	border-top: rem(1px) solid
+		light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
+}
+
+.inner {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding-top: var(--mantine-spacing-md);
+	padding-bottom: var(--mantine-spacing-md);
+
+	@media (max-width: $mantine-breakpoint-xs) {
+		flex-direction: column;
+	}
+}
+
+.links {
+	@media (max-width: $mantine-breakpoint-xs) {
+		margin-top: var(--mantine-spacing-md);
+	}
+}

inertia/components/footer/mantine_footer.tsx

@@ -0,0 +1,53 @@
+import PATHS from '#constants/paths';
+import { Link } from '@inertiajs/react';
+import { route } from '@izzyjs/route/client';
+import { Anchor, Group, Image } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import ExternalLink from '~/components/common/external_link';
+import packageJson from '../../../package.json';
+import classes from './footer.module.css';
+
+export function MantineFooter() {
+	const { t } = useTranslation('common');
+
+	const links = [
+		{ link: route('privacy').url, label: t('privacy') },
+		{ link: route('terms').url, label: t('terms') },
+		{ link: PATHS.EXTENSION, label: 'Extension' },
+	];
+
+	const items = links.map((link) => (
+		<Anchor
+			c="dimmed"
+			component={Link}
+			key={link.label}
+			href={link.link}
+			size="sm"
+		>
+			{link.label}
+		</Anchor>
+	));
+
+	return (
+		<div className={classes.footer}>
+			<div className={classes.inner}>
+				<Image src="/logo-light.png" h={40} alt="MyLinks's logo" />
+
+				<Group gap={4}>
+					{t('footer.made_by')}{' '}
+					<Anchor component={ExternalLink} href={PATHS.AUTHOR}>
+						Sonny
+					</Anchor>
+					{' • '}
+					<Anchor component={ExternalLink} href={PATHS.REPO_GITHUB}>
+						{packageJson.version}
+					</Anchor>
+				</Group>
+
+				<Group gap="xs" justify="flex-end" wrap="nowrap">
+					{items}
+				</Group>
+			</div>
+		</div>
+	);
+}

inertia/components/layouts/mantine/mantine_content_layout.tsx

@@ -0,0 +1,31 @@
+import { Container } from '@mantine/core';
+import { PropsWithChildren } from 'react';
+import { MantineFooter } from '~/components/footer/mantine_footer';
+import BaseLayout from '~/components/layouts/mantine/_mantine_base_layout';
+import MantineNavbar from '~/components/navbar/mantine_navbar';
+
+function MantineContentLayout({ children }: PropsWithChildren) {
+	return (
+		<div
+			style={{
+				minHeight: '100%',
+				width: '100%',
+				backgroundColor: 'rgb(34, 40, 49)',
+			}}
+		>
+			<Container>
+				<MantineNavbar />
+				<main>{children}</main>
+				<MantineFooter />
+			</Container>
+		</div>
+	);
+}
+
+const LayoutWrapper = ({ children }: PropsWithChildren) => (
+	<BaseLayout>
+		<MantineContentLayout>{children}</MantineContentLayout>
+	</BaseLayout>
+);
+
+export { LayoutWrapper as MantineContentLayout };

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)
+		);
+	}
+}

inertia/i18n/locales/en/common.json

@@ -2,6 +2,7 @@
   "slogan": "Manage your links in the best possible way",
   "confirm": "Confirm",
   "cancel": "Cancel",
+	"home": "Home",
   "back-home": "← Back to home",
   "logout": "Logout",
   "login": "Login",

inertia/i18n/locales/fr/common.json

@@ -2,6 +2,7 @@
   "slogan": "Gérez vos liens de la meilleure des façons",
   "confirm": "Confirmer",
   "cancel": "Annuler",
+	"home": "Accueil",
   "back-home": "← Revenir à l'accueil",
   "logout": "Déconnexion",
   "login": "Connexion",

inertia/pages/privacy.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
-import LegalContentLayout from '~/components/layouts/legal_content_layout';
+import { MantineContentLayout } from '~/components/layouts/mantine/mantine_content_layout';
 
 function PrivacyPage() {
 	const { t } = useTranslation('privacy');
@@ -45,6 +45,6 @@ function PrivacyPage() {
 }
 
 PrivacyPage.layout = (page: ReactNode) => (
-	<LegalContentLayout children={page} />
+	<MantineContentLayout children={page} />
 );
 export default PrivacyPage;