fix: page transition no longer play when changing collection

inertia/mantine/components/dashboard/dashboard_navbar.tsx

@@ -8,6 +8,7 @@ import {
 	NavLink,
 	ScrollArea,
 	Skeleton,
+	Stack,
 	Text,
 } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
@@ -29,12 +30,17 @@ export function DashboardNavbar({ isOpen, toggle }: DashboardNavbarProps) {
 		variant: 'subtle',
 		color: 'blue',
 		active: true,
+		styles: {
+			label: {
+				fontSize: '16px',
+			},
+		},
 	};
 	return (
 		<AppShell.Navbar p="md">
 			<Group hiddenFrom="sm" mb="md">
 				<Burger opened={isOpen} onClick={toggle} size="sm" />
-				<Text>Menu</Text>
+				<Text>Navigation</Text>
 			</Group>
 			<MantineUserCard />
 			<Divider mt="xs" mb="md" />
@@ -52,6 +58,7 @@ export function DashboardNavbar({ isOpen, toggle }: DashboardNavbarProps) {
 				label={t('settings')}
 				leftSection={<PiGearLight size="1.5rem" />}
 				variant="subtle"
+				styles={common.styles}
 			/>
 			<NavLink
 				{...common}
@@ -72,15 +79,17 @@ export function DashboardNavbar({ isOpen, toggle }: DashboardNavbarProps) {
 				label={t('link.create')}
 				leftSection={<AiOutlineFolderAdd size="1.5rem" />}
 			/>
-			<Text size="sm" fw={500} c="dimmed" mt="sm" ml="md">
+			<Text c="dimmed" mt="xs" ml="md" mb="sm">
 				{t('favorite')} • {0}
 			</Text>
 			<AppShell.Section grow component={ScrollArea}>
-				{Array(15)
+				<Stack gap="xs">
-					.fill(0)
+					{Array(15)
-					.map((_, index) => (
+						.fill(0)
-						<Skeleton key={index} h={28} mt="sm" animate={false} />
+						.map((_, index) => (
-					))}
+							<Skeleton key={index} h={28} animate={false} />
+						))}
+				</Stack>
 			</AppShell.Section>
 		</AppShell.Navbar>
 	);

inertia/mantine/layouts/_mantine_base_layout.tsx

@@ -26,13 +26,24 @@ export default function BaseLayout({ children }: { children: ReactNode }) {
 		}
 	};
 
+	const canTransition = (currentLocation: URL, newLocation: URL) =>
+		currentLocation.pathname !== newLocation.pathname;
+
 	useEffect(() => {
+		const currentLocation = new URL(window.location.href);
 		flipClass(TRANSITION_IN_CLASS, TRANSITION_OUT_CLASS);
-		router.on('start', () =>
+
-			flipClass(TRANSITION_OUT_CLASS, TRANSITION_IN_CLASS)
+		router.on(
+			'start',
+			(event) =>
+				canTransition(currentLocation, event.detail.visit.url) &&
+				flipClass(TRANSITION_OUT_CLASS, TRANSITION_IN_CLASS)
 		);
-		router.on('finish', () =>
+		router.on(
-			flipClass(TRANSITION_IN_CLASS, TRANSITION_OUT_CLASS)
+			'finish',
+			(event) =>
+				canTransition(currentLocation, event.detail.visit.url) &&
+				flipClass(TRANSITION_IN_CLASS, TRANSITION_OUT_CLASS)
 		);
 	}, []);
 

inertia/pages/mantine_dashboard.tsx

@@ -7,13 +7,15 @@ import {
 	Text,
 } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
+import { useEffect } from 'react';
 import DashboardProviders from '~/components/dashboard/dashboard_provider';
 import LinkItem from '~/components/dashboard/link/link_item';
 import { MantineFooter } from '~/components/footer/mantine_footer';
+import useShortcut from '~/hooks/use_shortcut';
+import { DashboardAside } from '~/mantine/components/dashboard/dashboard_aside';
 import { DashboardNavbar } from '~/mantine/components/dashboard/dashboard_navbar';
 import { MantineDashboardLayout } from '~/mantine/layouts/mantine_dashboard_layout';
 import { CollectionWithLinks } from '~/types/app';
-import '../styles/body_overflow_hidden.css';
 import classes from './dashboard.module.css';
 
 interface DashboardPageProps {
@@ -22,15 +24,29 @@ interface DashboardPageProps {
 }
 
 export default function MantineDashboard(props: Readonly<DashboardPageProps>) {
-	const [openedNavbar, { toggle: toggleNavbar }] = useDisclosure();
+	const [openedNavbar, { toggle: toggleNavbar, close: closeNavbar }] =
-	const [openedAside, { toggle: toggleAside }] = useDisclosure();
+		useDisclosure();
+	const [openedAside, { toggle: toggleAside, close: closeAside }] =
+		useDisclosure();
+
+	useShortcut('ESCAPE_KEY', () => {
+		closeNavbar();
+		closeAside();
+	});
+
+	useEffect(() => {
+		document.body.style.overflow = 'hidden';
+		return () => {
+			document.body.style.overflow = 'auto';
+		};
+	}, []);
 
 	return (
 		<MantineDashboardLayout>
 			<DashboardProviders {...props}>
 				<AppShell
 					layout="alt"
-					header={{ height: 60 }}
+					header={{ height: 50 }}
 					navbar={{
 						width: 300,
 						breakpoint: 'sm',
@@ -57,7 +73,7 @@ export default function MantineDashboard(props: Readonly<DashboardPageProps>) {
 									hiddenFrom="sm"
 									size="sm"
 								/>
-								{props.activeCollection.name}
+								<Text lineClamp={1}>{props.activeCollection.name}</Text>
 							</Group>
 							<Burger
 								opened={openedAside}
@@ -80,17 +96,7 @@ export default function MantineDashboard(props: Readonly<DashboardPageProps>) {
 							</Stack>
 						</ScrollArea>
 					</AppShell.Main>
-					<AppShell.Aside p="md">
+					<DashboardAside isOpen={openedAside} toggle={toggleAside} />
-						<Group justify="space-between">
-							<Text>Aside</Text>
-							<Burger
-								opened={openedAside}
-								onClick={toggleAside}
-								hiddenFrom="md"
-								size="md"
-							/>
-						</Group>
-					</AppShell.Aside>
 					<AppShell.Footer pl="xs" pr="xs">
 						<MantineFooter />
 					</AppShell.Footer>

inertia/styles/body_overflow_hidden.css

@@ -1,3 +0,0 @@
-body {
-	overflow: hidden;
-}