From ad3e19e9653126292e30effe094993a1b650654d Mon Sep 17 00:00:00 2001 From: Valerio Ageno Date: Wed, 14 Aug 2024 21:28:23 +0200 Subject: [PATCH] fix: documentation sidebar on mobile --- .../src/components/sidebar/sidebar.tsx | 6 +++++- apps/documentation/src/routes/__root.tsx | 6 +++++- .../src/routes/documentation/__root.tsx | 16 ++++++---------- 3 files changed, 16 insertions(+), 12 deletions(-) diff --git a/apps/documentation/src/components/sidebar/sidebar.tsx b/apps/documentation/src/components/sidebar/sidebar.tsx index 22be5bf0..883699bf 100644 --- a/apps/documentation/src/components/sidebar/sidebar.tsx +++ b/apps/documentation/src/components/sidebar/sidebar.tsx @@ -1,7 +1,7 @@ import { AppShell, NavLink } from '@mantine/core' import { Link } from 'tuono' -export default function Sidebar(): JSX.Element { +export default function Sidebar({ close }: { close: () => void }): JSX.Element { return (

Tutorial

@@ -9,24 +9,28 @@ export default function Sidebar(): JSX.Element { href="/documentation/tutorial/intro" component={Link} label="Intro" + onClick={close} />

Documentation

 ) diff --git a/apps/documentation/src/routes/__root.tsx b/apps/documentation/src/routes/__root.tsx index b063f980..619240c2 100644 --- a/apps/documentation/src/routes/__root.tsx +++ b/apps/documentation/src/routes/__root.tsx @@ -6,11 +6,12 @@ import { AppShell, } from '@mantine/core' import { useDisclosure } from '@mantine/hooks' -import { Head } from 'tuono' +import { Head, useRouter } from 'tuono' import Navbar from '../components/navbar' import '@mantine/core/styles.css' import '@mantine/code-highlight/styles.css' +import Sidebar from '../components/sidebar' interface RootRouteProps { children: ReactNode @@ -52,6 +53,8 @@ const theme = createTheme({ export default function RootRoute({ children }: RootRouteProps): JSX.Element { const [opened, { toggle }] = useDisclosure() + const { pathname } = useRouter() + return ( <> @@ -67,6 +70,7 @@ export default function RootRoute({ children }: RootRouteProps): JSX.Element { }} > + {pathname.startsWith('/documentation') && } {children} diff --git a/apps/documentation/src/routes/documentation/__root.tsx b/apps/documentation/src/routes/documentation/__root.tsx index 63e7ae01..608fafe5 100644 --- a/apps/documentation/src/routes/documentation/__root.tsx +++ b/apps/documentation/src/routes/documentation/__root.tsx @@ -1,7 +1,6 @@ import type { ReactNode } from 'react' import { AppShell, Container } from '@mantine/core' import MdxProvider from '../../components/mdx-provider' -import Sidebar from '../../components/sidebar' import EditPage from '../../components/edit-page' interface RootRouteProps { @@ -10,14 +9,11 @@ interface RootRouteProps { export default function RootRoute({ children }: RootRouteProps): JSX.Element { return ( - <> - - - - {children} - - - - + + + {children} + + + ) }