mobile responsiveness

packages/docs/app/app-links.tsx

@@ -0,0 +1,47 @@
+import {
+  CodeIcon,
+  DocumentTextIcon,
+  ExternalLinkIcon,
+} from "@heroicons/react/solid"
+import type { AppLinkProps } from "~/components/app-link"
+import { createContentIndex } from "~/helpers/create-index.server"
+import { inlineIconClass } from "~/styles"
+
+export const mainLinks: AppLinkProps[] = [
+  {
+    type: "router",
+    to: "/docs/guides/getting-started",
+    label: (
+      <>
+        <DocumentTextIcon className={inlineIconClass} /> Guides
+      </>
+    ),
+  },
+  {
+    type: "internal",
+    to: "/docs/api",
+    label: (
+      <>
+        <CodeIcon className={inlineIconClass} /> API Reference
+      </>
+    ),
+  },
+  {
+    type: "external",
+    to: "https://github.com/itsMapleLeaf/reacord",
+    label: (
+      <>
+        <ExternalLinkIcon className={inlineIconClass} /> GitHub
+      </>
+    ),
+  },
+]
+
+export async function getGuideLinks(): Promise<AppLinkProps[]> {
+  const entries = await createContentIndex("app/routes/docs/guides")
+  return entries.map((entry) => ({
+    type: "router",
+    label: entry.title,
+    to: entry.route,
+  }))
+}

packages/docs/app/components/app-link.tsx

@@ -0,0 +1,34 @@
+import { Link } from "remix"
+import { ExternalLink } from "~/components/external-link"
+
+export type AppLinkProps = {
+  type: "router" | "internal" | "external"
+  label: React.ReactNode
+  to: string
+  className?: string
+}
+
+export function AppLink(props: AppLinkProps) {
+  switch (props.type) {
+    case "router":
+      return (
+        <Link className={props.className} to={props.to}>
+          {props.label}
+        </Link>
+      )
+
+    case "internal":
+      return (
+        <a className={props.className} href={props.to}>
+          {props.label}
+        </a>
+      )
+
+    case "external":
+      return (
+        <ExternalLink className={props.className} href={props.to}>
+          {props.label}
+        </ExternalLink>
+      )
+  }
+}

packages/docs/app/components/main-navigation.tsx

@@ -1,29 +1,102 @@
-import { CodeIcon } from "@heroicons/react/outline"
+import { MenuAlt4Icon } from "@heroicons/react/outline"
-import { DocumentTextIcon, ExternalLinkIcon } from "@heroicons/react/solid"
+import { useRect } from "@reach/rect"
+import clsx from "clsx"
+import { useRef, useState } from "react"
+import { FocusOn } from "react-focus-on"
 import { Link } from "remix"
-import { ExternalLink } from "~/components/external-link"
+import { mainLinks } from "~/app-links"
+import { AppLink } from "~/components/app-link"
+import type { ContentIndexEntry } from "~/helpers/create-index.server"
 import { linkClass } from "~/styles"
 
-export function MainNavigation() {
+const menuItemClass = clsx`
+  px-3 py-2 transition text-left font-medium block
+  opacity-50 hover:opacity-100 hover:bg-black/30
+`
+
+export function MainNavigation({
+  guideRoutes,
+}: {
+  guideRoutes: ContentIndexEntry[]
+}) {
   return (
     <nav className="flex justify-between items-center h-16">
       <Link to="/">
         <h1 className="text-3xl font-light">reacord</h1>
       </Link>
-      <div className="flex gap-4">
+      <div className="hidden md:flex gap-4">
-        <Link className={linkClass} to="/docs/guides/getting-started">
+        {mainLinks.map((link) => (
-          <DocumentTextIcon className="inline align-sub w-5" /> Guides
+          <AppLink key={link.to} className={linkClass} {...link} />
+        ))}
+      </div>
+      <div className="md:hidden">
+        <PopoverMenu>
+          {mainLinks.map((link) => (
+            <AppLink key={link.to} className={menuItemClass} {...link} />
+          ))}
+          <hr className="border-0 h-[2px] bg-black/50" />
+          {guideRoutes.map((route) => (
+            <Link key={route.route} to={route.route} className={menuItemClass}>
+              {route.title}
             </Link>
-        <a className={linkClass} href="/docs/api">
+          ))}
-          <CodeIcon className="inline align-sub w-5" /> API Reference
+        </PopoverMenu>
-        </a>
-        <ExternalLink
-          className={linkClass}
-          href="https://github.com/itsMapleLeaf/reacord"
-        >
-          <ExternalLinkIcon className="inline align-sub w-5" /> GitHub
-        </ExternalLink>
       </div>
     </nav>
   )
 }
+
+function PopoverMenu({ children }: { children: React.ReactNode }) {
+  const [visible, setVisible] = useState(false)
+
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const buttonRect = useRect(buttonRef)
+
+  const panelRef = useRef<HTMLDivElement>(null)
+  const panelRect = useRect(panelRef)
+
+  /* eslint-disable jsx-a11y/no-static-element-interactions */
+  /* eslint-disable jsx-a11y/click-events-have-key-events */
+  return (
+    <>
+      <button
+        title="Menu"
+        className={linkClass}
+        onClick={() => setVisible(!visible)}
+        ref={buttonRef}
+      >
+        <MenuAlt4Icon className="w-6" />
+      </button>
+
+      <FocusOn
+        enabled={visible}
+        onClickOutside={() => setVisible(false)}
+        onEscapeKey={() => setVisible(false)}
+      >
+        <div
+          className="fixed"
+          style={{
+            left: (buttonRect?.right ?? 0) - (panelRect?.width ?? 0),
+            top: (buttonRect?.bottom ?? 0) + 8,
+          }}
+          onClick={() => setVisible(false)}
+        >
+          <div
+            className={clsx(
+              "transition-all",
+              visible
+                ? "opacity-100 visible"
+                : "translate-y-2 opacity-0 invisible",
+            )}
+          >
+            <div ref={panelRef}>
+              <div className="w-48 bg-slate-800 rounded-lg shadow overflow-hidden max-h-[calc(100vh-4rem)] overflow-y-auto">
+                {children}
+              </div>
+            </div>
+          </div>
+        </div>
+      </FocusOn>
+    </>
+  )
+}

packages/docs/app/routes/docs.tsx

@@ -20,11 +20,11 @@ export default function Docs() {
     <>
       <HeaderPanel>
         <div className={maxWidthContainer}>
-          <MainNavigation />
+          <MainNavigation guideRoutes={data} />
         </div>
       </HeaderPanel>
       <main className={clsx(maxWidthContainer, "mt-8 flex items-start gap-4")}>
-        <nav className="w-64 sticky top-24">
+        <nav className="w-48 sticky top-24 hidden md:block">
           <h2 className="text-2xl">Guides</h2>
           <ul className="mt-3 flex flex-col gap-2 items-start">
             {data.map(({ title, route }) => (
@@ -49,7 +49,7 @@ function HeaderPanel({ children }: { children: React.ReactNode }) {
 
   const className = clsx(
     isScrolled ? "bg-slate-700/30" : "bg-slate-800",
-    "shadow-md sticky top-0 backdrop-blur-sm transition z-10 flex",
+    "shadow sticky top-0 backdrop-blur-sm transition z-10 flex",
   )
 
   return <header className={className}>{children}</header>

packages/docs/app/routes/index.tsx

@@ -1,25 +1,36 @@
 import packageJson from "reacord/package.json"
-import { Link } from "remix"
+import type { LoaderFunction } from "remix"
+import { Link, useLoaderData } from "remix"
 import LandingExample from "~/components/landing-example.mdx"
 import { MainNavigation } from "~/components/main-navigation"
+import type { ContentIndexEntry } from "~/helpers/create-index.server"
+import { createContentIndex } from "~/helpers/create-index.server"
 import { maxWidthContainer } from "~/styles"
 
+type LoaderData = ContentIndexEntry[]
+
+export const loader: LoaderFunction = async () => {
+  const data: LoaderData = await createContentIndex("app/routes/docs/guides")
+  return data
+}
+
 export default function Landing() {
+  const data: LoaderData = useLoaderData()
   return (
     <div className="flex flex-col min-w-0 min-h-screen text-center">
       <header className={maxWidthContainer}>
-        <MainNavigation />
+        <MainNavigation guideRoutes={data} />
       </header>
       <div className="px-4 pb-8 flex flex-1">
-        <main className="px-4 py-6 rounded-lg shadow-md bg-slate-800 space-y-5 m-auto w-full max-w-xl">
+        <main className="px-4 py-6 rounded-lg shadow bg-slate-800 space-y-5 m-auto w-full max-w-xl">
           <h1 className="text-6xl font-light">reacord</h1>
-          <section className="mx-auto shadow text-sm sm:text-base">
+          <section className="mx-auto text-sm sm:text-base">
             <LandingExample />
           </section>
           <p className="text-2xl font-light">{packageJson.description}</p>
           <Link
             to="/docs/guides/getting-started"
-            className="inline-block px-4 py-3 text-xl transition rounded-lg bg-emerald-700 hover:translate-y-[-2px] hover:bg-emerald-800 hover:shadow-md"
+            className="inline-block px-4 py-3 text-xl transition rounded-lg bg-emerald-700 hover:translate-y-[-2px] hover:bg-emerald-800 hover:shadow"
           >
             Get Started
           </Link>

packages/docs/app/styles.ts

@@ -1,8 +1,8 @@
 import clsx from "clsx"
 
-export const maxWidthContainer = clsx`
+export const maxWidthContainer = clsx`mx-auto w-full max-w-screen-lg px-4`
-  mx-auto w-full max-w-screen-lg px-4
+
-`
+export const inlineIconClass = clsx`inline w-5 align-sub`
 
 export const linkClass = clsx`
   font-medium inline-block relative
@@ -13,12 +13,12 @@ export const linkClass = clsx`
 
 export const docsProseClass = clsx`
   prose prose-invert
-  prose-h1:font-light prose-h1:mb-4
+  prose-h1:font-light prose-h1:mb-4 prose-h1:text-3xl lg:prose-h1:text-4xl
   prose-h2:font-light
   prose-h3:font-light
   prose-p:my-4
   prose-a:font-medium prose-a:text-emerald-400 hover:prose-a:no-underline
   prose-strong:font-medium prose-strong:text-emerald-400
-  prose-pre:text-[15px] prose-pre:font-monospace prose-pre:overflow-x-auto
+  prose-pre:font-monospace prose-pre:overflow-x-auto
   max-w-none
 `

packages/docs/package.json

@@ -10,7 +10,9 @@
     "start": "remix-serve build"
   },
   "dependencies": {
+    "@headlessui/react": "^1.4.2",
     "@heroicons/react": "^1.0.5",
+    "@reach/rect": "^0.16.0",
     "@remix-run/react": "^1.1.1",
     "@remix-run/serve": "^1.1.1",
     "@remix-run/server-runtime": "^1.1.1",
@@ -23,6 +25,7 @@
     "reacord": "workspace:*",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-focus-on": "^3.5.4",
     "rehype-stringify": "^9.0.2",
     "remark-parse": "^10.0.1",
     "remark-rehype": "^10.1.0",

packages/docs/tailwind.config.cjs

@@ -7,6 +7,9 @@ module.exports = {
       sans: ["Rubik", "sans-serif"],
       monospace: ["'JetBrains Mono'", "monospace"],
     },
+    boxShadow: {
+      DEFAULT: "0 2px 9px 0 rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3)",
+    },
     extend: {},
   },
   plugins: [require("@tailwindcss/typography")],

pnpm-lock.yaml

@@ -34,8 +34,10 @@ importers:
 
   packages/docs:
     specifiers:
+      '@headlessui/react': ^1.4.2
       '@heroicons/react': ^1.0.5
       '@itsmapleleaf/configs': ^1.1.2
+      '@reach/rect': ^0.16.0
       '@remix-run/dev': ^1.1.1
       '@remix-run/react': ^1.1.1
       '@remix-run/serve': ^1.1.1
@@ -54,6 +56,7 @@ importers:
       reacord: workspace:*
       react: ^17.0.2
       react-dom: ^17.0.2
+      react-focus-on: ^3.5.4
       rehype-highlight: ^5.0.2
       rehype-prism-plus: ^1.1.3
       rehype-stringify: ^9.0.2
@@ -67,7 +70,9 @@ importers:
       unified: ^10.1.1
       xdm: ^3.3.1
     dependencies:
+      '@headlessui/react': 1.4.2_react-dom@17.0.2+react@17.0.2
       '@heroicons/react': 1.0.5_react@17.0.2
+      '@reach/rect': 0.16.0_react-dom@17.0.2+react@17.0.2
       '@remix-run/react': 1.1.1_react-dom@17.0.2+react@17.0.2
       '@remix-run/serve': 1.1.1_react-dom@17.0.2+react@17.0.2
       '@remix-run/server-runtime': 1.1.1_react-dom@17.0.2+react@17.0.2
@@ -80,6 +85,7 @@ importers:
       reacord: link:../reacord
       react: 17.0.2
       react-dom: 17.0.2_react@17.0.2
+      react-focus-on: 3.5.4_b08e3c15324cbe90a6ff8fcd416c932c
       rehype-stringify: 9.0.2
       remark-parse: 10.0.1
       remark-rehype: 10.1.0
@@ -565,6 +571,17 @@ packages:
     resolution: {integrity: sha512-82cpyJyKRoQoRi+14ibCeGPu0CwypgtBAdBhq1WfvagpCZNKqwXbKwXllYSMG91DhmG4jt9gN8eP6lGOtozuaw==}
     dev: true
 
+  /@headlessui/react/1.4.2_react-dom@17.0.2+react@17.0.2:
+    resolution: {integrity: sha512-N8tv7kLhg9qGKBkVdtg572BvKvWhmiudmeEpOCyNwzOsZHCXBtl8AazGikIfUS+vBoub20Fse3BjawXDVPPdug==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: ^16 || ^17 || ^18
+      react-dom: ^16 || ^17 || ^18
+    dependencies:
+      react: 17.0.2
+      react-dom: 17.0.2_react@17.0.2
+    dev: false
+
   /@heroicons/react/1.0.5_react@17.0.2:
     resolution: {integrity: sha512-UDMyLM2KavIu2vlWfMspapw9yii7aoLwzI2Hudx4fyoPwfKfxU8r3cL8dEBXOjcLG0/oOONZzbT14M1HoNtEcg==}
     peerDependencies:
@@ -891,6 +908,37 @@ packages:
       rimraf: 3.0.2
     dev: true
 
+  /@reach/observe-rect/1.2.0:
+    resolution: {integrity: sha512-Ba7HmkFgfQxZqqaeIWWkNK0rEhpxVQHIoVyW1YDSkGsGIXzcaW4deC8B0pZrNSSyLTdIk7y+5olKt5+g0GmFIQ==}
+    dev: false
+
+  /@reach/rect/0.16.0_react-dom@17.0.2+react@17.0.2:
+    resolution: {integrity: sha512-/qO9jQDzpOCdrSxVPR6l674mRHNTqfEjkaxZHluwJ/2qGUtYsA0GSZiF/+wX/yOWeBif1ycxJDa6HusAMJZC5Q==}
+    peerDependencies:
+      react: ^16.8.0 || 17.x
+      react-dom: ^16.8.0 || 17.x
+    dependencies:
+      '@reach/observe-rect': 1.2.0
+      '@reach/utils': 0.16.0_react-dom@17.0.2+react@17.0.2
+      prop-types: 15.8.0
+      react: 17.0.2
+      react-dom: 17.0.2_react@17.0.2
+      tiny-warning: 1.0.3
+      tslib: 2.3.1
+    dev: false
+
+  /@reach/utils/0.16.0_react-dom@17.0.2+react@17.0.2:
+    resolution: {integrity: sha512-PCggBet3qaQmwFNcmQ/GqHSefadAFyNCUekq9RrWoaU9hh/S4iaFgf2MBMdM47eQj5i/Bk0Mm07cP/XPFlkN+Q==}
+    peerDependencies:
+      react: ^16.8.0 || 17.x
+      react-dom: ^16.8.0 || 17.x
+    dependencies:
+      react: 17.0.2
+      react-dom: 17.0.2_react@17.0.2
+      tiny-warning: 1.0.3
+      tslib: 2.3.1
+    dev: false
+
   /@remix-run/dev/1.1.1:
     resolution: {integrity: sha512-dkzMVgMzaQUppf2za3kD+izsEK1hLsLQSVtDD3wN7pBMEbWXaEkWb2X2lj3c9yRDArPB7y5+09rm4SUnE4mL6A==}
     hasBin: true
@@ -1612,6 +1660,13 @@ packages:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
     dev: true
 
+  /aria-hidden/1.1.3:
+    resolution: {integrity: sha512-RhVWFtKH5BiGMycI72q2RAFMLQi8JP9bLuQXgR5a8Znp7P5KOIADSJeyfI8PCVxLEp067B2HbP5JIiI/PXIZeA==}
+    engines: {node: '>=8.5.0'}
+    dependencies:
+      tslib: 1.14.1
+    dev: false
+
   /aria-query/4.2.2:
     resolution: {integrity: sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==}
     engines: {node: '>=6.0'}
@@ -2772,6 +2827,10 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /detect-node-es/1.1.0:
+    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
+    dev: false
+
   /detective/5.2.0:
     resolution: {integrity: sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg==}
     engines: {node: '>=0.8.0'}
@@ -4156,6 +4215,13 @@ packages:
     resolution: {integrity: sha512-8/sOawo8tJ4QOBX8YlQBMxL8+RLZfxMQOif9o0KUKTNTjMYElWPE0r/m5VNFxTRd0NSw8qSy8dajrwX4RYI1Hw==}
     dev: true
 
+  /focus-lock/0.10.1:
+    resolution: {integrity: sha512-b9yUklCi4fTu2GXn7dnaVf4hiLVVBp7xTiZarAHMODV2To6Bitf6F/UI67RmKbdgJQeVwI1UO0d9HYNbXt3GkA==}
+    engines: {node: '>=10'}
+    dependencies:
+      tslib: 2.3.1
+    dev: false
+
   /for-in/1.0.2:
     resolution: {integrity: sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=}
     engines: {node: '>=0.10.0'}
@@ -4264,6 +4330,11 @@ packages:
       has: 1.0.3
       has-symbols: 1.0.2
 
+  /get-nonce/1.0.1:
+    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
+    engines: {node: '>=6'}
+    dev: false
+
   /get-package-type/0.1.0:
     resolution: {integrity: sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==}
     engines: {node: '>=8.0.0'}
@@ -4802,6 +4873,12 @@ packages:
       has: 1.0.3
       side-channel: 1.0.4
 
+  /invariant/2.2.4:
+    resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}
+    dependencies:
+      loose-envify: 1.4.0
+    dev: false
+
   /ipaddr.js/1.9.1:
     resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
     engines: {node: '>= 0.10'}
@@ -7400,7 +7477,6 @@ packages:
       loose-envify: 1.4.0
       object-assign: 4.1.1
       react-is: 16.13.1
-    dev: true
 
   /property-information/6.1.1:
     resolution: {integrity: sha512-hrzC564QIl0r0vy4l6MvRLhafmUowhO/O3KgVSoXIbbA2Sz4j8HGpJc6T2cubRVwMwpdiG/vKGfhT4IixmKN9w==}
@@ -7481,6 +7557,15 @@ packages:
       strip-json-comments: 2.0.1
     dev: true
 
+  /react-clientside-effect/1.2.5_react@17.0.2:
+    resolution: {integrity: sha512-2bL8qFW1TGBHozGGbVeyvnggRpMjibeZM2536AKNENLECutp2yfs44IL8Hmpn8qjFQ2K7A9PnYf3vc7aQq/cPA==}
+    peerDependencies:
+      react: ^15.3.0 || ^16.0.0 || ^17.0.0
+    dependencies:
+      '@babel/runtime': 7.16.5
+      react: 17.0.2
+    dev: false
+
   /react-dom/17.0.2_react@17.0.2:
     resolution: {integrity: sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==}
     peerDependencies:
@@ -7492,9 +7577,45 @@ packages:
       scheduler: 0.20.2
     dev: false
 
+  /react-focus-lock/2.7.1_b08e3c15324cbe90a6ff8fcd416c932c:
+    resolution: {integrity: sha512-ImSeVmcrLKNMqzUsIdqOkXwTVltj79OPu43oT8tVun7eIckA4VdM7UmYUFo3H/UC2nRVgagMZGFnAOQEDiDYcA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      '@babel/runtime': 7.16.5
+      focus-lock: 0.10.1
+      prop-types: 15.8.0
+      react: 17.0.2
+      react-clientside-effect: 1.2.5_react@17.0.2
+      use-callback-ref: 1.2.5_b08e3c15324cbe90a6ff8fcd416c932c
+      use-sidecar: 1.0.5_react@17.0.2
+    transitivePeerDependencies:
+      - '@types/react'
+    dev: false
+
+  /react-focus-on/3.5.4_b08e3c15324cbe90a6ff8fcd416c932c:
+    resolution: {integrity: sha512-HnU0YGKhNSUsC4k6K8L+2wk8mC/qdg+CsS7A1bWLMgK7UuBphdECs2esnS6cLmBoVNjsFnCm/vMypeezKOdK3A==}
+    engines: {node: '>=8.5.0'}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 17.0.38
+      aria-hidden: 1.1.3
+      react: 17.0.2
+      react-focus-lock: 2.7.1_b08e3c15324cbe90a6ff8fcd416c932c
+      react-remove-scroll: 2.4.3_b08e3c15324cbe90a6ff8fcd416c932c
+      react-style-singleton: 2.1.1_b08e3c15324cbe90a6ff8fcd416c932c
+      tslib: 2.3.1
+      use-callback-ref: 1.2.5_b08e3c15324cbe90a6ff8fcd416c932c
+      use-sidecar: 1.0.5_react@17.0.2
+    dev: false
+
   /react-is/16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
-    dev: true
 
   /react-is/17.0.2:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
@@ -7512,6 +7633,41 @@ packages:
       scheduler: 0.20.2
     dev: false
 
+  /react-remove-scroll-bar/2.2.0_b08e3c15324cbe90a6ff8fcd416c932c:
+    resolution: {integrity: sha512-UU9ZBP1wdMR8qoUs7owiVcpaPwsQxUDC2lypP6mmixaGlARZa7ZIBx1jcuObLdhMOvCsnZcvetOho0wzPa9PYg==}
+    engines: {node: '>=8.5.0'}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0
+      react: ^16.8.0 || ^17.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 17.0.38
+      react: 17.0.2
+      react-style-singleton: 2.1.1_b08e3c15324cbe90a6ff8fcd416c932c
+      tslib: 1.14.1
+    dev: false
+
+  /react-remove-scroll/2.4.3_b08e3c15324cbe90a6ff8fcd416c932c:
+    resolution: {integrity: sha512-lGWYXfV6jykJwbFpsuPdexKKzp96f3RbvGapDSIdcyGvHb7/eqyn46C7/6h+rUzYar1j5mdU+XECITHXCKBk9Q==}
+    engines: {node: '>=8.5.0'}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0
+      react: ^16.8.0 || ^17.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 17.0.38
+      react: 17.0.2
+      react-remove-scroll-bar: 2.2.0_b08e3c15324cbe90a6ff8fcd416c932c
+      react-style-singleton: 2.1.1_b08e3c15324cbe90a6ff8fcd416c932c
+      tslib: 1.14.1
+      use-callback-ref: 1.2.5_b08e3c15324cbe90a6ff8fcd416c932c
+      use-sidecar: 1.0.5_react@17.0.2
+    dev: false
+
   /react-router-dom/6.2.1_react-dom@17.0.2+react@17.0.2:
     resolution: {integrity: sha512-I6Zax+/TH/cZMDpj3/4Fl2eaNdcvoxxHoH1tYOREsQ22OKDYofGebrNm6CTPUcvLvZm63NL/vzCYdjf9CUhqmA==}
     peerDependencies:
@@ -7533,6 +7689,23 @@ packages:
       react: 17.0.2
     dev: false
 
+  /react-style-singleton/2.1.1_b08e3c15324cbe90a6ff8fcd416c932c:
+    resolution: {integrity: sha512-jNRp07Jza6CBqdRKNgGhT3u9umWvils1xsuMOjZlghBDH2MU0PL2WZor4PGYjXpnRCa9DQSlHMs/xnABWOwYbA==}
+    engines: {node: '>=8.5.0'}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0
+      react: ^16.8.0 || ^17.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 17.0.38
+      get-nonce: 1.0.1
+      invariant: 2.2.4
+      react: 17.0.2
+      tslib: 1.14.1
+    dev: false
+
   /react/17.0.2:
     resolution: {integrity: sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==}
     engines: {node: '>=0.10.0'}
@@ -8476,6 +8649,10 @@ packages:
     resolution: {integrity: sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=}
     dev: true
 
+  /tiny-warning/1.0.3:
+    resolution: {integrity: sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==}
+    dev: false
+
   /tmp/0.0.33:
     resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
     engines: {node: '>=0.6.0'}
@@ -8606,7 +8783,6 @@ packages:
 
   /tslib/1.14.1:
     resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
-    dev: true
 
   /tslib/2.3.1:
     resolution: {integrity: sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==}
@@ -8917,6 +9093,31 @@ packages:
       prepend-http: 2.0.0
     dev: true
 
+  /use-callback-ref/1.2.5_b08e3c15324cbe90a6ff8fcd416c932c:
+    resolution: {integrity: sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==}
+    engines: {node: '>=8.5.0'}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0
+      react: ^16.8.0 || ^17.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 17.0.38
+      react: 17.0.2
+    dev: false
+
+  /use-sidecar/1.0.5_react@17.0.2:
+    resolution: {integrity: sha512-k9jnrjYNwN6xYLj1iaGhonDghfvmeTmYjAiGvOr7clwKfPjMXJf4/HOr7oT5tJwYafgp2tG2l3eZEOfoELiMcA==}
+    engines: {node: '>=8.5.0'}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0
+    dependencies:
+      detect-node-es: 1.1.0
+      react: 17.0.2
+      tslib: 1.14.1
+    dev: false
+
   /use/3.1.1:
     resolution: {integrity: sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==}
     engines: {node: '>=0.10.0'}

todo.md

@@ -33,7 +33,7 @@
 - [x] destroy
 - docs
   - [x] core layout and styling
-  - [ ] mobile nav: at a breakpoint, remove all desktop navigation and use a drawer w/ a floating menu button on the bottom right
+  - [x] mobile nav: at a breakpoint, remove all desktop navigation and use a drawer w/ a floating menu button on the bottom right
   - [ ] each page should have a link at the bottom to the previous and next pages
   - guides
     - [x] getting started / setup
@@ -44,7 +44,9 @@
     - [ ] embeds
     - [ ] buttons and links
     - [ ] select menus
-  - [ ] api reference - may be able to use typedoc markdown output + custom TOC sidebar
+  - api reference
+    - [x] rendering and making it available
+    - [ ] adding doc comments to source
   - [ ] anchor links on markdown headings
 
 # internal