docs: auto-close the burger menu

purescraps · May 17, 2024 · 18addee · 18addee
1 parent e421211
commit 18addee
Showing 1 changed file with 44 additions and 11 deletions.
diff --git a/docs/app/app-layout.tsx b/docs/app/app-layout.tsx
@@ -2,15 +2,18 @@
 
 import { AppShell, Burger, Code, Group } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
+import { IconTerminal2 } from '@tabler/icons-react';
 import { usePathname } from 'next/navigation';
+import { useCallback } from 'react';
+import { ColorSchemeToggle } from '../src/components/ColorSchemeToggle';
 import { DocsAnchor } from '../src/components/DocsAnchor';
 import { DocsNavLink } from '../src/components/DocsNavLink';
-import { ColorSchemeToggle } from '../src/components/ColorSchemeToggle';
 
 export function AppLayout({ children }: { children: React.ReactNode }) {
   const [mobileOpened, { toggle: toggleMobile }] = useDisclosure();
   const pathname = usePathname();
   const inPlayground = pathname.endsWith('playground');
+  const closeBurger = useCallback(() => toggleMobile(), [toggleMobile]);
 
   return (
     <>
@@ -41,24 +44,54 @@ export function AppLayout({ children }: { children: React.ReactNode }) {
 
             <DocsAnchor
               href="/playground"
-              pos={{ sm: 'relative', md: 'absolute' }}
-              right={{ sm: '', md: '1em' }}
+              pos="absolute"
+              right="1em"
               size="sm"
+              visibleFrom="xs"
             >
               Playground
             </DocsAnchor>
           </Group>
         </AppShell.Header>
 
         <AppShell.Navbar p="md">
-          <DocsNavLink label="Introduction" href="/#intro" />
-          <DocsNavLink label="Getting Started" href="/#getting-started" />
-          <DocsNavLink label="Basics" href="/#basics" />
-          <DocsNavLink label="Constant Config" href="/#constant-config" />
-          <DocsNavLink label="Arrays" href="/#arrays" />
-          <DocsNavLink label="Objects" href="/#objects" />
-          <DocsNavLink label="Transformers" href="/#transformers" />
-          <DocsNavLink label="Union Config" href="/#union-config" />
+          <DocsNavLink
+            hiddenFrom="xs"
+            href="/playground"
+            label="Playground"
+            leftSection={<IconTerminal2 />}
+            mb="sm"
+            onClick={closeBurger}
+          />
+
+          <DocsNavLink
+            label="Introduction"
+            href="/#intro"
+            onClick={closeBurger}
+          />
+          <DocsNavLink
+            label="Getting Started"
+            href="/#getting-started"
+            onClick={closeBurger}
+          />
+          <DocsNavLink label="Basics" href="/#basics" onClick={closeBurger} />
+          <DocsNavLink
+            label="Constant Config"
+            href="/#constant-config"
+            onClick={closeBurger}
+          />
+          <DocsNavLink label="Arrays" href="/#arrays" onClick={closeBurger} />
+          <DocsNavLink label="Objects" href="/#objects" onClick={closeBurger} />
+          <DocsNavLink
+            label="Transformers"
+            href="/#transformers"
+            onClick={closeBurger}
+          />
+          <DocsNavLink
+            label="Union Config"
+            href="/#union-config"
+            onClick={closeBurger}
+          />
         </AppShell.Navbar>
 
         <AppShell.Main>{children}</AppShell.Main>