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>
+ )
+}