refactor: drawer to popover

src/app/components/MobileTopNav.css.ts

@@ -6,6 +6,7 @@ import {
   fontWeightVars,
   lineHeightVars,
   primitiveColorVars,
+  sidebarVars,
   spaceVars,
   topNavVars,
   viewportVars,
@@ -135,6 +136,21 @@ export const outlineTrigger = style(
   'outlineTrigger',
 )
 
+export const outlinePopover = style(
+  {
+    display: 'none',
+    overflowY: 'scroll',
+    padding: spaceVars['16'],
+    maxHeight: '80vh',
+    '@media': {
+      [viewportVars['max-1080px']]: {
+        display: 'block',
+      },
+    },
+  },
+  'outlinePopover',
+)
+
 export const section = style({ display: 'flex', height: '100%', gap: spaceVars[16] }, 'section')
 
 export const separator = style(
@@ -146,6 +162,22 @@ export const separator = style(
   'separator',
 )
 
+export const sidebarPopover = style(
+  {
+    display: 'none',
+    overflowY: 'scroll',
+    padding: `${sidebarVars.verticalPadding} ${sidebarVars.horizontalPadding}`,
+    maxHeight: '80vh',
+    width: sidebarVars.width,
+    '@media': {
+      [viewportVars['max-1080px']]: {
+        display: 'block',
+      },
+    },
+  },
+  'sidebarPopover',
+)
+
 export const title = style(
   {
     fontSize: fontSizeVars['18'],

src/app/components/MobileTopNav.tsx

@@ -1,12 +1,15 @@
 import clsx from 'clsx'
-import { type ComponentType, useMemo } from 'react'
+import { type ComponentType, useMemo, useState } from 'react'
 import { useLocation } from 'react-router-dom'
 
-import type { ParsedSocialItem, Sidebar, SidebarItem } from '../../config.js'
+import type * as Config from '../../config.js'
 import { useConfig } from '../hooks/useConfig.js'
 import { visibleDark, visibleLight } from '../styles/utils.css.js'
 import { Icon } from './Icon.js'
 import * as styles from './MobileTopNav.css.js'
+import { Outline } from './Outline.js'
+import { Popover } from './Popover.js'
+import { Sidebar } from './Sidebar.js'
 import { ChevronRight } from './icons/ChevronRight.js'
 import { ChevronUp } from './icons/ChevronUp.js'
 import { Discord } from './icons/Discord.js'
@@ -61,15 +64,15 @@ const iconsForIcon = {
   discord: Discord,
   github: GitHub,
   x: X,
-} satisfies Record<ParsedSocialItem['type'], ComponentType>
+} satisfies Record<Config.ParsedSocialItem['type'], ComponentType>
 
 const sizesForTypes = {
   discord: '21px',
   github: '18px',
   x: '16px',
-} satisfies Record<ParsedSocialItem['type'], string>
+} satisfies Record<Config.ParsedSocialItem['type'], string>
 
-function SocialButton({ icon, label, link, type }: ParsedSocialItem) {
+function SocialButton({ icon, label, link, type }: Config.ParsedSocialItem) {
   return (
     <a className={styles.button} href={link} target="_blank" rel="noopener noreferrer">
       <Icon
@@ -84,16 +87,15 @@ function SocialButton({ icon, label, link, type }: ParsedSocialItem) {
 
 export function Curtain({
   enableScrollToTop,
-  MenuTrigger,
-  OutlineTrigger,
 }: {
   enableScrollToTop?: boolean
-  MenuTrigger: React.ElementType
-  OutlineTrigger: React.ElementType
 }) {
   const config = useConfig()
   const { pathname } = useLocation()
 
+  const [isOutlineOpen, setOutlineOpen] = useState(false)
+  const [isSidebarOpen, setSidebarOpen] = useState(false)
+
   const sidebarItemTitle = useMemo(() => {
     if (!config.sidebar) return
     const sidebarItem = getSidebarItemFromPathname({
@@ -114,10 +116,15 @@ export function Curtain({
     <div className={styles.curtain}>
       <div className={styles.curtainGroup}>
         <div className={styles.curtainItem}>
-          <MenuTrigger className={styles.menuTrigger}>
-            <Icon label="Menu" icon={Menu} size="13px" />
-            {title}
-          </MenuTrigger>
+          <Popover.Root modal open={isSidebarOpen} onOpenChange={setSidebarOpen}>
+            <Popover.Trigger className={styles.menuTrigger}>
+              <Icon label="Menu" icon={Menu} size="13px" />
+              {title}
+            </Popover.Trigger>
+            <Popover className={styles.sidebarPopover}>
+              <Sidebar onClickItem={() => setSidebarOpen(false)} />
+            </Popover>
+          </Popover.Root>
         </div>
       </div>
       <div className={styles.curtainGroup}>
@@ -137,10 +144,15 @@ export function Curtain({
           </>
         )}
         <div className={styles.curtainItem}>
-          <OutlineTrigger className={styles.outlineTrigger}>
-            On this page
-            <Icon label="On this page" icon={ChevronRight} size="10px" />
-          </OutlineTrigger>
+          <Popover.Root modal open={isOutlineOpen} onOpenChange={setOutlineOpen}>
+            <Popover.Trigger className={styles.outlineTrigger}>
+              On this page
+              <Icon label="On this page" icon={ChevronRight} size="10px" />
+            </Popover.Trigger>
+            <Popover className={styles.outlinePopover}>
+              <Outline onClickItem={() => setOutlineOpen(false)} showTitle={false} />
+            </Popover>
+          </Popover.Root>
         </div>
       </div>
     </div>
@@ -150,11 +162,11 @@ export function Curtain({
 function getSidebarItemFromPathname({
   sidebar,
   pathname: pathname_,
-}: { sidebar: Sidebar; pathname: string }): SidebarItem {
+}: { sidebar: Config.Sidebar; pathname: string }): Config.SidebarItem {
   const pathname = pathname_.replace(/(.+)\/$/, '$1')
   return sidebar.find((item) => {
     if (item.path === pathname) return true
     if (item.children) return getSidebarItemFromPathname({ sidebar, pathname })
     return false
-  }) as SidebarItem
+  }) as Config.SidebarItem
 }

src/app/components/Popover.css.ts

@@ -6,6 +6,5 @@ export const root = style({
   border: `1px solid ${primitiveColorVars.border}`,
   borderRadius: borderRadiusVars[4],
   margin: `0 ${spaceVars[6]}`,
-  padding: spaceVars[16],
   zIndex: zIndexVars.popover,
 })

src/app/components/Sidebar.css.ts

@@ -11,12 +11,9 @@ import {
 } from '../styles/vars.css.js'
 
 export const root = style({
-  backgroundColor: primitiveColorVars.backgroundDark,
   display: 'flex',
   flexDirection: 'column',
-  height: '100vh',
   gap: spaceVars['12'],
-  padding: `${spaceVars['0']} ${sidebarVars.horizontalPadding}`,
   width: sidebarVars.width,
   '@media': {
     'screen and (max-width: 1080px)': {
@@ -92,11 +89,6 @@ export const navigation = style(
         paddingTop: spaceVars['16'],
       },
     },
-    '@media': {
-      [viewportVars['max-1080px']]: {
-        paddingTop: spaceVars['24'],
-      },
-    },
   },
   'navigation',
 )

src/app/components/Sidebar.tsx

@@ -10,13 +10,16 @@ import { Discord } from './icons/Discord.js'
 import { GitHub } from './icons/GitHub.js'
 import { X } from './icons/X.js'
 
-export function Sidebar({ onClickItem }: { onClickItem?: MouseEventHandler<HTMLAnchorElement> }) {
+export function Sidebar({
+  className,
+  onClickItem,
+}: { className?: string; onClickItem?: MouseEventHandler<HTMLAnchorElement> }) {
   const config = useConfig()
   const { sidebar } = config
 
   if (!sidebar) return null
   return (
-    <aside className={styles.root}>
+    <aside className={clsx(styles.root, className)}>
       <div className={styles.logo}>
         <Link to="/" style={{ alignItems: 'center', display: 'flex', height: '100%' }}>
           {config.logoUrl ? (

src/app/layouts/DocsLayout.css.ts

@@ -119,6 +119,8 @@ export const gutterRight = style(
 export const outlinePopover = style(
   {
     display: 'none',
+    overflowY: 'scroll',
+    height: `calc(100vh - ${topNavVars.height} - ${topNavVars.curtainHeight})`,
     '@media': {
       [viewportVars['max-1080px']]: {
         display: 'block',
@@ -128,6 +130,13 @@ export const outlinePopover = style(
   'outlinePopover',
 )
 
+export const sidebar = style(
+  {
+    padding: `${spaceVars['0']} ${sidebarVars.horizontalPadding}`,
+  },
+  'sidebar',
+)
+
 export const sidebarDrawer = style(
   {
     display: 'none',

src/app/layouts/DocsLayout.tsx

@@ -1,23 +1,18 @@
-import { type ReactNode, useState } from 'react'
+import type { ReactNode } from 'react'
 import { useInView } from 'react-intersection-observer'
 
 import { Content } from '../components/Content.js'
 import { DesktopTopNav } from '../components/DesktopTopNav.js'
 import { MobileTopNav } from '../components/MobileTopNav.js'
 import { Outline } from '../components/Outline.js'
-import { Popover } from '../components/Popover.js'
 import { Sidebar } from '../components/Sidebar.js'
-import { SidebarDrawer } from '../components/SidebarDrawer.js'
 import * as styles from './DocsLayout.css.js'
 
 export function DocsLayout({
   children,
 }: {
   children: ReactNode
 }) {
-  const [isOutlineOpen, setOutlineOpen] = useState(false)
-  const [isSidebarOpen, setSidebarOpen] = useState(false)
-
   const { ref, inView } = useInView({
     initialInView: true,
     rootMargin: '100px 0px 0px 0px',
@@ -26,34 +21,15 @@ export function DocsLayout({
   return (
     <div className={styles.root}>
       <div className={styles.gutterLeft}>
-        <Sidebar />
+        <Sidebar className={styles.sidebar} />
       </div>
       <div ref={ref} className={styles.gutterTop}>
         <DesktopTopNav />
         <MobileTopNav />
       </div>
       <div className={styles.gutterTopCurtain}>
         <DesktopTopNav.Curtain />
-
-        <SidebarDrawer.Root open={isSidebarOpen} onOpenChange={setSidebarOpen}>
-          <Popover.Root open={isOutlineOpen} onOpenChange={setOutlineOpen}>
-            <MobileTopNav.Curtain
-              enableScrollToTop={!inView}
-              MenuTrigger={SidebarDrawer.Trigger}
-              OutlineTrigger={Popover.Trigger}
-            />
-            <SidebarDrawer className={styles.sidebarDrawer}>
-              <Sidebar onClickItem={() => setSidebarOpen(false)} />
-            </SidebarDrawer>
-            <Popover className={styles.outlinePopover}>
-              <Outline
-                onClickItem={() => setOutlineOpen(false)}
-                highlightActive={false}
-                showTitle={false}
-              />
-            </Popover>
-          </Popover.Root>
-        </SidebarDrawer.Root>
+        <MobileTopNav.Curtain enableScrollToTop={!inView} />
       </div>
       <div className={styles.content}>
         <Content>{children}</Content>

src/app/styles/global.css.ts

@@ -50,3 +50,8 @@ globalStyle(`${Content} > *:not(:last-child)`, {
 globalStyle(`${Content} > *:last-child`, {
   marginBottom: spaceVars['0'],
 })
+
+globalStyle('#app[aria-hidden="true"]', {
+  background: primitiveColorVars.background,
+  filter: 'brightness(0.5)',
+})