Mobile layout

app/components/DocsPopover.tsx

@@ -55,7 +55,7 @@ export const DocsPopover = ({ heading, icon, summary, links }: DocsPopoverProps)
       <PopoverPanel
         // popover-panel needed for enter animation
         className="popover-panel bg-raise light:bg-default shadow-menu z-10 w-96 rounded-lg"
-        anchor={{ to: 'bottom end', gap: 12 }}
+        anchor={{ to: 'bottom end', gap: 12, padding: 16 }}
       >
         <div className="px-4">
           <h2 className="text-sans-md mt-4 flex items-center gap-1">

app/components/ErrorPage.tsx

@@ -40,7 +40,7 @@ export function ErrorPage({ children }: Props) {
         </Link>
         <SignOutButton className="mt-4 mr-6" />
       </div>
-      <div className="bg-raise! shadow-modal absolute top-1/2 left-1/2 flex w-96 -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center space-y-4 rounded-lg p-8">
+      <div className="bg-raise! shadow-modal max-1000:w-[calc(100%-var(--content-gutter)*2)] absolute top-1/2 left-1/2 flex w-96 -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center space-y-4 rounded-lg p-8">
         <div className="my-2 flex h-12 w-12 items-center justify-center">
           <div className="bg-destructive-inverse absolute h-10 w-10 rounded-full opacity-40 motion-safe:animate-[ping_2s_cubic-bezier(0,0,0.2,1)_infinite]" />
           <Error12Icon className="text-error light:text-error-secondary relative h-8 w-8" />

app/components/PageSkeleton.tsx

@@ -13,6 +13,7 @@ import {
   ContentPane,
   PageContainer,
   sidebarWrapperClass,
+  topBarHomeCellClass,
   topBarWrapperClass,
 } from '~/layouts/helpers'
 import { classed } from '~/util/classed'
@@ -31,7 +32,7 @@ export function PageSkeleton({ skipPaths }: { skipPaths?: RegExp[] }) {
     <PageContainer>
       {/* TopBar */}
       <div className={topBarWrapperClass}>
-        <div className="border-secondary flex items-center gap-2 border-r p-3">
+        <div className={cn(topBarHomeCellClass, 'gap-2 p-3')}>
           <Block className="h-8 w-8" />
           <Block className="h-4 w-24" />
         </div>
@@ -44,7 +45,8 @@ export function PageSkeleton({ skipPaths }: { skipPaths?: RegExp[] }) {
         </div>
       </div>
       {/* Sidebar */}
-      <div className={cn(sidebarWrapperClass, 'p-4')}>
+      {/* on mobile the sidebar is an overlay, closed (translated off-screen) by default */}
+      <div className={cn(sidebarWrapperClass, 'p-4 max-1000:-translate-x-full')}>
         <Block className="mb-10 h-4 w-full" />
         <div className="mb-6 space-y-2">
           <Block className="h-4 w-32" />

app/components/Sidebar.tsx

@@ -6,19 +6,21 @@
  * Copyright Oxide Computer Company
  */
 import cn from 'classnames'
+import { useEffect } from 'react'
 import { Link, useLocation } from 'react-router'
 
 import { Action16Icon, Document16Icon } from '@oxide/design-system/icons/react'
 
 import { useIsActivePath } from '~/hooks/use-is-active-path'
 import { openQuickActions } from '~/hooks/use-quick-actions'
 import { sidebarWrapperClass } from '~/layouts/helpers'
+import { closeMobileNav, useMobileNavStore } from '~/stores/mobile-nav'
 import { Button } from '~/ui/lib/Button'
 import { Truncate } from '~/ui/lib/Truncate'
 
 const linkStyles = (isActive = false) =>
   cn(
-    'flex h-7 items-center rounded-md px-2 text-sans-md [&>svg]:mr-2',
+    'flex h-7 items-center rounded-md px-2 text-sans-md pointer-coarse:h-8 [&>svg]:mr-2',
     isActive
       ? 'text-accent bg-accent hover:bg-accent-hover [&>svg]:text-accent-tertiary'
       : 'hover:bg-hover [&>svg]:text-quaternary text-default'
@@ -62,18 +64,37 @@ const JumpToButton = () => {
 }
 
 export function Sidebar({ children }: { children: React.ReactNode }) {
+  const mobileNavOpen = useMobileNavStore((state) => state.isOpen)
+  const { pathname } = useLocation()
+
+  // close the mobile nav overlay on any navigation, including ones triggered
+  // outside the sidebar (breadcrumbs, quick actions)
+  useEffect(() => closeMobileNav(), [pathname])
+
   return (
-    <div
-      className={cn(
-        sidebarWrapperClass,
-        'text-sans-md text-raise flex flex-col overflow-y-auto overscroll-none'
+    <>
+      {/* scrim behind the mobile nav overlay. covers everything below the top
+          bar so the toggle button in the top bar stays clickable */}
+      {mobileNavOpen && (
+        <div
+          aria-hidden
+          onClick={closeMobileNav}
+          className="bg-scrim 1000:hidden fixed inset-0 top-[calc(var(--top-bar-height)+var(--preview-banner-height))] z-(--z-side-modal-overlay)"
+        />
       )}
-    >
-      <div className="mx-3 mt-4">
-        <JumpToButton />
+      <div
+        className={cn(
+          sidebarWrapperClass,
+          'text-sans-md text-raise flex flex-col overflow-y-auto overscroll-none',
+          !mobileNavOpen && 'max-1000:-translate-x-full'
+        )}
+      >
+        <div className="mx-3 mt-4">
+          <JumpToButton />
+        </div>
+        {children}
       </div>
-      {children}
-    </div>
+    </>
   )
 }
 

app/components/Terminal.tsx

@@ -126,10 +126,10 @@ export function Terminal({ ws }: TerminalProps) {
     <>
       <div
         role="application"
-        className="text-mono-code h-full w-[calc(100%-3rem)]"
+        className="text-mono-code 1000:w-[calc(100%-3rem)] h-full w-full"
         ref={terminalRef}
       />
-      <div className="text-default absolute top-0 right-0 space-y-2">
+      <div className="text-default max-1000:hidden absolute top-0 right-0 space-y-2">
         <ScrollButton onClick={() => term?.scrollToTop()} aria-label="Scroll to top">
           <DirectionUpIcon aria-hidden />
         </ScrollButton>