feat: add new page transition

inertia/components/common/mantine_theme_switcher.tsx

@@ -1,11 +1,11 @@
-import { useMantineColorScheme, ActionIcon } from '@mantine/core';
+import { ActionIcon, useMantineColorScheme } from '@mantine/core';
-import { TbSun, TbMoonStars } from 'react-icons/tb';
+import { TbMoonStars, TbSun } from 'react-icons/tb';
 
 export function MantineThemeSwitcher() {
 	const { colorScheme, toggleColorScheme } = useMantineColorScheme();
 	return (
 		<ActionIcon
-			variant="default"
+			variant="light"
 			aria-label="Toggle color scheme"
 			onClick={() => toggleColorScheme()}
 			size="lg"

inertia/components/footer/mantine_footer.tsx

@@ -1,7 +1,7 @@
 import PATHS from '#constants/paths';
 import { Link } from '@inertiajs/react';
 import { route } from '@izzyjs/route/client';
-import { Anchor, Group, Image } from '@mantine/core';
+import { Anchor, Group, Image, Text } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import ExternalLink from '~/components/common/external_link';
 import packageJson from '../../../package.json';
@@ -33,13 +33,13 @@ export function MantineFooter() {
 			<div className={classes.inner}>
 				<Image src="/logo-light.png" h={40} alt="MyLinks's logo" />
 
-				<Group gap={4}>
+				<Group gap={4} c="dimmed">
-					{t('footer.made_by')}{' '}
+					<Text size="sm">{t('footer.made_by')}</Text>{' '}
-					<Anchor component={ExternalLink} href={PATHS.AUTHOR}>
+					<Anchor size="sm" component={ExternalLink} href={PATHS.AUTHOR}>
 						Sonny
 					</Anchor>
 					{' • '}
-					<Anchor component={ExternalLink} href={PATHS.REPO_GITHUB}>
+					<Anchor size="sm" component={ExternalLink} href={PATHS.REPO_GITHUB}>
 						{packageJson.version}
 					</Anchor>
 				</Group>

inertia/components/layouts/mantine/_mantine_base_layout.tsx

@@ -1,6 +1,7 @@
+import { router } from '@inertiajs/react';
 import { ColorSchemeScript, createTheme, MantineProvider } from '@mantine/core';
 import dayjs from 'dayjs';
-import { ReactNode } from 'react';
+import { ReactNode, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import '@mantine/core/styles.css';
@@ -8,10 +9,33 @@ import '@mantine/spotlight/styles.css';
 import '../../../styles/index.css';
 
 const theme = createTheme({});
+const TRANSITION_IN_CLASS = '__transition_fadeIn';
+const TRANSITION_OUT_CLASS = '__transition_fadeOut';
 
 export default function BaseLayout({ children }: { children: ReactNode }) {
 	const { i18n } = useTranslation();
 	dayjs.locale(i18n.language);
+
+	const findAppElement = () => document.getElementById('app');
+
+	const flipClass = (addClass: string, removeClass: string) => {
+		const appElement = findAppElement();
+		if (appElement) {
+			appElement.classList.add(addClass);
+			appElement.classList.remove(removeClass);
+		}
+	};
+
+	useEffect(() => {
+		flipClass(TRANSITION_IN_CLASS, TRANSITION_OUT_CLASS);
+		router.on('start', () =>
+			flipClass(TRANSITION_OUT_CLASS, TRANSITION_IN_CLASS)
+		);
+		router.on('finish', () =>
+			flipClass(TRANSITION_IN_CLASS, TRANSITION_OUT_CLASS)
+		);
+	}, []);
+
 	return (
 		<>
 			<ColorSchemeScript />

inertia/components/layouts/mantine/mantine_content_layout.tsx

@@ -4,27 +4,25 @@ 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) {
+const MantineContentLayout = ({ children }: PropsWithChildren) => (
-	return (
+	<Container
-		<Container
+		style={{
+			minHeight: '100%',
+			display: 'flex',
+			flexDirection: 'column',
+		}}
+	>
+		<MantineNavbar />
+		<main
 			style={{
-				minHeight: '100%',
+				flex: 1,
-				display: 'flex',
-				flexDirection: 'column',
 			}}
 		>
-			<MantineNavbar />
+			{children}
-			<main
+		</main>
-				style={{
+		<MantineFooter />
-					flex: 1,
+	</Container>
-				}}
+);
-			>
-				{children}
-			</main>
-			<MantineFooter />
-		</Container>
-	);
-}
 
 const LayoutWrapper = ({ children }: PropsWithChildren) => (
 	<BaseLayout>

inertia/components/navbar/mantine_navbar.tsx

@@ -41,7 +41,7 @@ export default function MantineNavbar() {
 						</ExternalLink>
 					</Group>
 
-					<Group>
+					<Group gap="xs">
 						<MantineThemeSwitcher />
 						<Button
 							component={Link}

inertia/styles/index.css

@@ -1,6 +1,40 @@
 html,
 body {
-	height: 100svh;
+	min-height: 100svh;
 	width: 100%;
 	background-color: light-dark(var(--mantine-color-white), rgb(34, 40, 49));
 }
+
+.__transition_fadeIn {
+	animation: fadeIn 0.25s ease;
+	opacity: 1;
+	scale: 1;
+}
+
+.__transition_fadeOut {
+	animation: fadeOut 0.25s ease;
+	opacity: 0;
+	scale: 0.9;
+}
+
+@keyframes fadeIn {
+	from {
+		opacity: 0;
+		scale: 0.9;
+	}
+	to {
+		opacity: 1;
+		scale: 1;
+	}
+}
+
+@keyframes fadeOut {
+	from {
+		opacity: 1;
+		scale: 1;
+	}
+	to {
+		opacity: 0;
+		scale: 0.9;
+	}
+}