feat: collapsible nav (#317)

* wip * radix collapsible * initial open state * tweaks
pmndrs · Aug 31, 2024 · 9a2d0b3 · 9a2d0b3
1 parent 87f08b7
commit 9a2d0b3
Show file tree

Hide file tree

Showing 11 changed files with 359 additions and 83 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
   },
   "dependencies": {
     "@codesandbox/sandpack-react": "^2.19.0",
+    "@radix-ui/react-collapsible": "^1.1.0",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/typography": "^0.5.14",
     "clsx": "^2.1.1",

diff --git a/src/app/[...slug]/Menu.tsx b/src/app/[...slug]/Menu.tsx
@@ -60,7 +60,7 @@ export function Menu({
             >
               <nav
                 id="nav"
-                className="sticky?lg:h-(screen-16) relative z-10 overflow-y-auto px-4 pb-10 text-base font-medium lg:pb-14 lg:text-sm"
+                className="sticky?lg:h-(screen-16) relative z-10 overflow-y-auto px-4 pb-10 pl-0 lg:pb-14 lg:text-sm"
               >
                 {nav}
               </nav>

diff --git a/src/app/[...slug]/layout.tsx b/src/app/[...slug]/layout.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import Nav from '@/components/Nav'
+import { Nav } from '@/components/Nav'
 import Search from '@/components/Search'
 import { Toc } from '@/components/mdx/Toc'
 import cn from '@/lib/cn'

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -62,10 +62,10 @@ export default function RootLayout({
       </head>
       <body className={cn(inter.className, 'bg-surface break-words')}>
         <ThemeProvider
-        // attribute="class"
-        // defaultTheme="system"
-        // enableSystem
-        // disableTransitionOnChange
+          // attribute="class"
+          // defaultTheme="system"
+          // enableSystem
+          disableTransitionOnChange
         >
           {children}
         </ThemeProvider>

diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
diff --git a/src/components/Nav/Nav.tsx b/src/components/Nav/Nav.tsx
@@ -0,0 +1,33 @@
+import { Doc } from '@/app/[...slug]/DocsContext'
+import * as React from 'react'
+import { NavCategory } from './NavCategory'
+
+type NavList = Record<string, Record<string, Doc>>
+
+export function Nav({ docs, asPath }: { docs: Doc[]; asPath: string }) {
+  const nav = React.useMemo(
+    () =>
+      docs.reduce((acc, doc) => {
+        const page = doc.slug.at(-1)
+        const category = doc.slug.at(-2) || 'root'
+
+        acc[category] ??= {}
+        if (page) acc[category][page] = doc
+
+        return acc
+      }, {} as NavList),
+    [docs],
+  )
+
+  return (
+    <ul className="mt-8">
+      {Object.entries(nav).map(([category, docs]) => {
+        return (
+          <li key={category}>
+            <NavCategory {...{ category, docs, asPath }} />
+          </li>
+        )
+      })}
+    </ul>
+  )
+}