jacob-mathison/tuono
1
0
Fork 0
mirror of https://github.com/tuono-labs/tuono synced 2026-07-25 21:02:45 -07:00
Code Issues Packages Projects Releases Wiki Activity

fix: documentation sidebar on mobile

Browse Source
This commit is contained in:
Valerio Ageno
2024-08-14 21:28:23 +02:00
parent 03dead1083
commit ad3e19e965
3 changed files with 16 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/documentation/src/components/sidebar/sidebar.tsx
+5 -1
View File
@@ -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 (
<AppShell.Navbar p="md">
<h3>Tutorial</h3>
@@ -9,24 +9,28 @@ export default function Sidebar(): JSX.Element {
href="/documentation/tutorial/intro"
component={Link}
label="Intro"
onClick={close}
/>
<h3>Documentation</h3>
<NavLink
href="/documentation/installation"
component={Link}
label="Installation"
onClick={close}
/>
<NavLink label="Routing" href="#required-for-focus" defaultOpened>
<NavLink
href="/documentation/routing/intro"
component={Link}
label="FS routing"
onClick={close}
/>
</NavLink>
<NavLink
label="Contributing"
component={Link}
href="/documentation/contributing"
onClick={close}
/>
</AppShell.Navbar>
)
apps/documentation/src/routes/__root.tsx
+5 -1
View File
@@ -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 (
<>
<Head>
@@ -67,6 +70,7 @@ export default function RootRoute({ children }: RootRouteProps): JSX.Element {
}}
>
<Navbar opened={opened} toggle={toggle} />
{pathname.startsWith('/documentation') && <Sidebar close={toggle} />}
{children}
</AppShell>
</MantineProvider>
apps/documentation/src/routes/documentation/__root.tsx
+6 -10
View File
@@ -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 (
<>
<Sidebar />
<AppShell.Main>
<Container component="article" p={20}>
<MdxProvider>{children}</MdxProvider>
<EditPage />
</Container>
</AppShell.Main>
</>
<AppShell.Main>
<Container component="article" p={20}>
<MdxProvider>{children}</MdxProvider>
<EditPage />
</Container>
</AppShell.Main>
)
}