diff --git a/src/app/[...slug]/Burger.tsx b/src/app/[...slug]/Burger.tsx new file mode 100644 index 00000000..5440c635 --- /dev/null +++ b/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 ( + + ) +} diff --git a/src/app/[...slug]/Menu.tsx b/src/app/[...slug]/Menu.tsx index 42f38638..71611dfd 100644 --- a/src/app/[...slug]/Menu.tsx +++ b/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>(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} - -
-
- -
-
- -
-
-
-
{children}
- -
{footer}
-
- - -
-
-
-
- + + ) } diff --git a/src/app/[...slug]/MenuContext.tsx b/src/app/[...slug]/MenuContext.tsx index aec9be5e..2d935851 100644 --- a/src/app/[...slug]/MenuContext.tsx +++ b/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>] @@ -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>(null) + + useEffect(() => { + if (opened) { + dialogRef.current?.show() + } else { + dialogRef.current?.close() + } + }, [opened]) + + useLockBodyScroll(opened) + return {children} } diff --git a/src/app/[...slug]/layout.tsx b/src/app/[...slug]/layout.tsx index 8a0a4c0c..0a0e80cf 100644 --- a/src/app/[...slug]/layout.tsx +++ b/src/app/[...slug]/layout.tsx @@ -8,6 +8,7 @@ import { getData } from '@/utils/docs' import Link from 'next/link' import { PiDiscordLogoLight } from 'react-icons/pi' import { VscGithubAlt } from 'react-icons/vsc' +import { Burger } from './Burger' import { DocsContext } from './DocsContext' import { Menu } from './Menu' import { MenuContext } from './MenuContext' @@ -31,138 +32,166 @@ export default async function Layout({ params, children }: Props) { const NEXT_PUBLIC_LIBNAME = process.env.NEXT_PUBLIC_LIBNAME const NEXT_PUBLIC_LIBNAME_SHORT = process.env.NEXT_PUBLIC_LIBNAME_SHORT - return ( + const nav = ( +