fix(site): show docs sidebar on tablet

closes #509

site/src/components/NavBar/MobileNav.tsx

@@ -25,7 +25,7 @@ export default function MobileNav({ navLinks, currentPath, dark = false, childre
       {/* Trigger button - hamburger menu */}
       <Dialog.Trigger
         className={clsx(
-          'sm:hidden flex items-center justify-center p-3 h-full aspect-square',
+          'md:hidden flex items-center justify-center p-3 h-full aspect-square',
           dark
             ? 'bg-light-80 text-dark-100 intent:bg-light-40'
             : 'bg-dark-100 dark:bg-light-80 text-light-80 dark:text-dark-100 intent:bg-dark-80 dark:intent:bg-light-40'
@@ -41,7 +41,7 @@ export default function MobileNav({ navLinks, currentPath, dark = false, childre
         <Dialog.Popup
           className={clsx(
             'fixed inset-0 z-50 flex flex-col',
-            dark ? 'bg-dark-100 text-light-100' : 'bg-light-80 dark:bg-dark-100 text-dark-100 dark:text-light-100'
+            dark ? 'bg-dark-100 text-light-100 dark' : 'bg-light-80 dark:bg-dark-100 text-dark-100 dark:text-light-100'
           )}
         >
           <FilmGrain currentPath={currentPath} />
@@ -68,38 +68,48 @@ export default function MobileNav({ navLinks, currentPath, dark = false, childre
             </Dialog.Close>
           </div>
 
-          {/* Astro makes it hard to know if we have children, so, we use -mt-px to hide the border-b if we don't */}
-          <div className={clsx('-mt-px border-b', dark ? 'border-dark-80' : 'border-light-40 dark:border-dark-80')}>
-            {children}
-          </div>
+          <div className="overflow-y-scroll">
+            {/* Astro makes it hard to know if we have children, so, we use -mt-px to hide the border-b if we don't */}
+            <div className={clsx('-mt-px border-b', dark ? 'border-dark-80' : 'border-light-40 dark:border-dark-80')}>
+              {children}
+            </div>
 
-          {/* Navigation links */}
-          <nav className="flex flex-col py-3">
-            {navLinks.map((link) => {
-              const isActive = link.matchPath && currentPath.startsWith(link.matchPath);
-              const className = clsx('text-lg px-6 py-3', isActive ? 'underline' : 'intent:underline');
+            {/* Navigation links */}
+            <nav className="flex flex-col py-3">
+              {navLinks.map((link) => {
+                const isActive = link.matchPath && currentPath.startsWith(link.matchPath);
+                const className = clsx('text-lg px-6 py-3', isActive ? 'underline' : 'intent:underline');
+
+                if (link.href === '/docs') {
+                  return (
+                    <GetStartedLink key={link.href} className={className} aria-current={isActive ? 'page' : undefined}>
+                      {link.label}
+                    </GetStartedLink>
+                  );
+                }
 
-              if (link.href === '/docs') {
                 return (
-                  <GetStartedLink key={link.href} className={className} aria-current={isActive ? 'page' : undefined}>
-                    {link.label}
-                  </GetStartedLink>
+                  <a
+                    key={link.href}
+                    href={link.href}
+                    className={className}
+                    aria-current={isActive ? 'page' : undefined}
+                  >
+                    {link.label} {link.external ? <ArrowUpRight size="1em" /> : null}
+                  </a>
                 );
-              }
-
-              return (
-                <a key={link.href} href={link.href} className={className} aria-current={isActive ? 'page' : undefined}>
-                  {link.label} {link.external ? <ArrowUpRight size="1em" /> : null}
-                </a>
-              );
-            })}
-            <a href={GITHUB_REPO_URL} className="text-lg px-6 py-3 inline-flex items-center gap-1 intent:underline">
-              GitHub <ArrowUpRight size="1em" />
-            </a>
-            <a href={DISCORD_INVITE_URL} className="text-lg px-6 py-3 inline-flex items-center gap-1 intent:underline">
-              Discord <ArrowUpRight size="1em" />
-            </a>
-          </nav>
+              })}
+              <a href={GITHUB_REPO_URL} className="text-lg px-6 py-3 inline-flex items-center gap-1 intent:underline">
+                GitHub <ArrowUpRight size="1em" />
+              </a>
+              <a
+                href={DISCORD_INVITE_URL}
+                className="text-lg px-6 py-3 inline-flex items-center gap-1 intent:underline"
+              >
+                Discord <ArrowUpRight size="1em" />
+              </a>
+            </nav>
+          </div>
         </Dialog.Popup>
       </Dialog.Portal>
     </Dialog.Root>

site/src/components/NavBar/NavBar.astro

@@ -50,7 +50,7 @@ const { class: className, dark = false } = Astro.props;
   <Search dark={dark} class="ml-auto mr-4 sm:self-center" />
 
   {/* Desktop nav links */}
-  <div class="hidden sm:flex -mb-px pr-3">
+  <div class="hidden md:flex -mb-px pr-3">
     <GetStartedLink
       client:idle
       className={clsx(
@@ -98,7 +98,7 @@ const { class: className, dark = false } = Astro.props;
   </div>
 
   {/* Mobile nav */}
-  <!-- <MobileNav client:idle navLinks={navLinks} currentPath={currentPath} dark={dark}>
+  <MobileNav client:idle navLinks={navLinks} currentPath={currentPath} dark={dark}>
     <slot name="mobile-nav" />
-  </MobileNav> -->
+  </MobileNav>
 </nav>

site/src/components/docs/Selectors.tsx

@@ -68,11 +68,10 @@ export function Selectors({ currentFramework, currentSlug }: SelectorProps) {
   }));
 
   return (
-    // we switch to py-2.5 for a short time to match the table of contents in the body
-    <div className="px-6 pb-6 pt-2.5 lg:py-2.5 xl:p-6 border-b border-light-40 dark:border-dark-80">
+    <div className="px-6 pb-6 pt-2.5 md:py-2.5 xl:p-6 border-b border-light-40 dark:border-dark-80">
       <div
-        className="max-w-3xl mx-auto w-full grid grid-flow-col grid-cols-2 grid-rows-2 gap-x-2 lg:grid-flow-row lg:grid-cols-(--lg-grid-cols) lg:gap-x-6 lg:gap-y-2 items-center"
-        style={{ '--lg-grid-cols': 'auto minmax(0, 1fr)' } as React.CSSProperties}
+        className="max-w-3xl mx-auto w-full grid grid-flow-col grid-cols-2 grid-rows-2 gap-x-2 md:grid-flow-row md:grid-cols-(--md-grid-cols) md:gap-x-6 md:gap-y-2 items-center"
+        style={{ '--md-grid-cols': 'auto minmax(0, 1fr)' } as React.CSSProperties}
       >
         <span>Framework</span>
         <Select

site/src/layouts/Docs.astro

@@ -37,15 +37,15 @@ const docsSidebarId = 'docs-sidebar';
     <slot name="head" slot="head" />
   </Fragment>
   <div
-    class="grid grid-cols-1 lg:grid-cols-(--lg-grid-cols) min-h-screen"
-    style="--lg-grid-cols: calc(var(--spacing) * 75) 1fr;grid-template-rows:auto minmax(0,1fr);"
+    class="grid grid-cols-1 md:grid-cols-(--md-grid-cols) lg:grid-cols-(--lg-grid-cols) min-h-screen"
+    style="--md-grid-cols: calc(var(--spacing) * 70) 1fr;--lg-grid-cols: calc(var(--spacing) * 75) 1fr;grid-template-rows:auto minmax(0,1fr);"
   >
     <NavBar class="col-span-full">
       <DocsSidebar slot="mobile-nav" framework={framework} docTitles={docTitles} />
     </NavBar>
     <aside
       id={docsSidebarId}
-      class="hidden lg:flex flex-col lg:border-r border-light-40 dark:border-dark-80 z-10 sticky overflow-y-scroll"
+      class="hidden md:flex flex-col md:border-r border-light-40 dark:border-dark-80 z-10 sticky overflow-y-scroll"
       style="top: var(--nav-h); max-height: calc(100vh - var(--nav-h));"
     >
       <FilmGrain currentPath={Astro.url.pathname} />
@@ -58,7 +58,7 @@ const docsSidebarId = 'docs-sidebar';
         <slot />
         <Footer class="mt-auto" />
       </div>
-      <FooterEasterEgg class="lg:col-start-2" />
+      <FooterEasterEgg class="md:col-start-2" />
     </div>
   </div>
 </Base>

site/src/pages/docs/framework/[framework]/[...slug].astro

@@ -109,7 +109,7 @@ const jsonLdSchema = createTechArticleSchema({
       --mobile-toc-h: calc(var(--spacing) * 15);
     "
   >
-    <div class="lg:hidden" style="grid-area: selectors;">
+    <div class="md:hidden" style="grid-area: selectors;">
       <Selectors client:idle currentFramework={framework} currentSlug={slug} />
     </div>
     <div