MobileToc() — supabase Function Reference

Source Code

apps/docs/app/contributing/ContributingToC.tsx lines 49–103

function MobileToc({ items, className }: { items: Array<TocItem>; className?: string }) {
  const [open, setOpen] = useState(false)

  useEffect(() => {
    const onHashChanged = () => setOpen(false)

    window.addEventListener('hashchange', onHashChanged)
    return () => {
      window.removeEventListener('hashchange', onHashChanged)
    }
  }, [])

  return (
    <Sheet open={open} onOpenChange={setOpen}>
      <SheetTrigger
        className={cn(
          'fixed z-0 inset-0 top-auto w-full rounded-t-lg border border-b-0 p-4 bg-studio flex items-center gap-2 text-foreground-light text-sm',
          className
        )}
      >
        <Menu size={16} strokeWidth={1.5} className="text-foreground-light" />
        <span className="sr-only">
          {open ? 'Close table of contents' : 'Open table of contents'}
        </span>
        <span>On this page</span>
      </SheetTrigger>
      <SheetContent
        side="bottom"
        size="lg"
        className={cn(
          'w-full flex flex-col gap-0 p-0 rounded-t-lg overflow-hidden',
          !open && 'top-[calc(100vh-100px)]'
        )}
      >
        <SheetHeader className="py-0 px-4">
          <SheetTrigger
            className={cn(
              'w-full py-4 flex items-center gap-2 text-foreground-light text-sm',
              className
            )}
          >
            <Menu size={16} strokeWidth={1.5} className="text-foreground-light" />
            <span className="sr-only">
              {open ? 'Close table of contents' : 'Open table of contents'}
            </span>
            <span>On this page</span>
          </SheetTrigger>
        </SheetHeader>
        <div className="w-full flex-1 p-4 pb-8 overflow-y-auto thin-scrollbar">
          <TocBase items={items} />
        </div>
      </SheetContent>
    </Sheet>
  )
}