feat: new layout (#285)

* wip

* wip

* menu

* fix

src/app/[...slug]/Burger.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import Icon from '@/components/Icon'
+import cn from '@/lib/cn'
+import { ComponentProps } from 'react'
+import { useMenu } from './MenuContext'
+
+export function Burger({ className }: ComponentProps<'button'>) {
+ const [menuOpen, setMenuOpen] = useMenu()
+
+ return (
+ <button
+ className={cn(className, 'flex size-9 items-center justify-center')}
+ type="button"
+ aria-label="Menu"
+ onClick={() => setMenuOpen(!menuOpen)}
+ >
+ {menuOpen ? <Icon icon="close" /> : <Icon icon="menu" />}
+ </button>
+ )
+}

src/app/[...slug]/Menu.tsx

@@ -1,92 +1,28 @@
 'use client'
 
-import Icon from '@/components/Icon'
-import { useLockBodyScroll } from '@/hooks/useLockBodyScroll'
+import { Nav } from '@/components/Nav'
 import cn from '@/lib/cn'
-import * as React from 'react'
+import { ComponentProps, ElementRef, useEffect, useRef } from 'react'
 import { useDocs } from './DocsContext'
 import { useMenu } from './MenuContext'
 
-export function Menu({
- header,
- nav,
- children,
- aside,
- footer,
-}: {
- header: React.ReactNode
- nav: React.ReactNode
- children: React.ReactNode
- aside: React.ReactNode
- footer: React.ReactNode
-}) {
- const { doc } = useDocs()
+export function Menu({ className, asPath }: ComponentProps<'dialog'> & { asPath: string }) {
+ const { doc, docs } = useDocs()
 
- const [menuOpen, setMenuOpen] = useMenu()
- useLockBodyScroll(menuOpen)
+ const [opened, setOpened] = useMenu()
+ const dialogRef = useRef<ElementRef<'dialog'>>(null)
 
- React.useEffect(() => setMenuOpen(false), [setMenuOpen])
-
- const NEXT_PUBLIC_LIBNAME = process.env.NEXT_PUBLIC_LIBNAME
+ useEffect(() => {
+ if (opened) {
+ dialogRef.current?.show()
+ } else {
+ dialogRef.current?.close()
+ }
+ }, [opened])
 
  return (
- <>
- <header className="max-w-8xl bg-surface sticky top-0 z-40 mx-auto flex w-full flex-none border-b border-outline-variant/50 lg:z-50">
- <div className="flex w-full items-center justify-between pr-2">
- {header}
- <button
- className="flex size-9 items-center justify-center lg:hidden"
- onClick={() => setMenuOpen((v) => !v)}
- type="button"
- aria-label="Menu"
- >
- <Icon icon="menu" />
- </button>
- </div>
- </header>
-
- <div className="max-w-8xl mx-auto w-full">
- <div className="lg:flex">
- <div
- id="sidebar"
- className={cn(
- 'fixed inset-0 z-40 h-full w-full flex-none lg:static lg:block lg:h-auto lg:w-60 lg:overflow-y-visible lg:pt-0 xl:w-72',
- !menuOpen && 'hidden',
- )}
- >
- <div
- id="nav-wrapper"
- className="scrolling-touch bg-surface relative z-10 mr-24 h-full overflow-hidden overflow-y-auto lg:sticky lg:top-16 lg:mr-0 lg:block lg:h-auto lg:bg-transparent"
- >
- <nav
- id="nav"
- 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>
- </div>
- <button
- onClick={() => setMenuOpen(false)}
- className={cn(
- 'bg-surface/70',
- 'fixed right-0 top-0 z-0 h-screen w-screen',
- !menuOpen && 'hidden',
- )}
- />
- </div>
- <div id="content-wrapper" className={cn('flex-auto', menuOpen && 'overflow-hidden')}>
- <div className="flex w-full">
- <main className="min-w-0 flex-auto px-4 pb-24 pt-8 sm:px-6 lg:pb-16 xl:px-8">
- <div>{children}</div>
-
- <footer>{footer}</footer>
- </main>
-
- <aside className="hidden w-64 flex-none pl-8 pr-8 xl:block xl:text-sm">{aside}</aside>
- </div>
- </div>
- </div>
- </div>
- </>
+ <dialog ref={dialogRef} className={cn(className, 'bg-surface-dim/95 backdrop-blur-xl')}>
+ <Nav docs={docs} asPath={asPath} collapsible={false} />
+ </dialog>
  )
 }

src/app/[...slug]/MenuContext.tsx

@@ -1,7 +1,8 @@
 'use client'
 
+import { useLockBodyScroll } from '@/hooks/useLockBodyScroll'
 import { createRequiredContext } from '@/lib/createRequiredContext'
-import { Dispatch, ReactNode, SetStateAction, useState } from 'react'
+import { Dispatch, ElementRef, ReactNode, SetStateAction, useEffect, useRef, useState } from 'react'
 
 export type Ctx = [boolean, Dispatch<SetStateAction<boolean>>]
 
@@ -12,5 +13,18 @@ export { hook as useMenu }
 export function MenuContext({ children }: { children?: ReactNode }) {
  const state = useState(false)
 
+ const [opened, setOpened] = state
+ const dialogRef = useRef<ElementRef<'dialog'>>(null)
+
+ useEffect(() => {
+ if (opened) {
+ dialogRef.current?.show()
+ } else {
+ dialogRef.current?.close()
+ }
+ }, [opened])
+
+ useLockBodyScroll(opened)
+
  return <Provider value={state}>{children}</Provider>
 }