Slide the desktop sidebar open and closed (#848)

The desktop panel used to mount and unmount, so hiding or showing it
snapped the whole content area sideways. It now stays in the DOM inside a
clipping column whose width animates, while the panel itself translates by
the same amount, so the nav slides out of view instead of squashing.

The collapsed rail animated nowhere before, which would have made the
content edge jump partway through the slide, so its width animates on the
same curve. Timing lives in one module shared with the mobile overlay.

Transitions are dropped while resizing so the drag still tracks the mouse,
the hidden panel is inert, and reduced motion keeps the instant toggle.

Claude-Session: https://claude.ai/code/session_014wNyh9fXHD9UmbEqDJQ6QH

Author: InfinityBowman

packages/web/src/components/layout/AppLayout.tsx

@@ -18,6 +18,7 @@ import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { PaymentIssueBanner } from '@/components/billing/PaymentIssueBanner';
 import { MAIN_SCROLL_ID } from '@/config/scroll';
+import { SIDEBAR_SLIDE } from './sidebarMotion';
 import { Sidebar } from './Sidebar';
 import { MobileBar } from './MobileBar';
 
@@ -121,9 +122,15 @@ export function AppLayout() {
           onWidthChange={handleWidthChange}
         />
 
-        {/* Own column rather than an overlay: pages with sticky headers would cover it */}
-        {!desktopSidebarVisible && (
-          <div className='border-border bg-sidebar hidden w-10 shrink-0 flex-col items-center border-r pt-2 md:flex'>
+        {/* Own column rather than an overlay: pages with sticky headers would cover it.
+            Its width animates in step with the sidebar so the content edge moves once. */}
+        <div
+          className={`hidden shrink-0 overflow-hidden transition-[width] md:block ${SIDEBAR_SLIDE}`}
+          style={{ width: desktopSidebarVisible ? 0 : '2.5rem' }}
+          aria-hidden={desktopSidebarVisible}
+          inert={desktopSidebarVisible ? true : undefined}
+        >
+          <div className='border-border bg-sidebar flex h-full w-10 flex-col items-center border-r pt-2'>
             <Tooltip delayDuration={500}>
               <TooltipTrigger asChild>
                 <Button
@@ -139,7 +146,7 @@ export function AppLayout() {
               <TooltipContent side='right'>Show sidebar</TooltipContent>
             </Tooltip>
           </div>
-        )}
+        </div>
 
         <main
           data-scroll-restoration-id={MAIN_SCROLL_ID}

packages/web/src/components/layout/Sidebar.tsx

@@ -9,6 +9,7 @@ import { useState, useEffect, useCallback, useEffectEvent } from 'react';
 import { useLocation } from '@tanstack/react-router';
 import { createPortal } from 'react-dom';
 import { PanelLeftCloseIcon, XIcon } from 'lucide-react';
+import { SIDEBAR_SLIDE, SIDEBAR_SLIDE_MS } from './sidebarMotion';
 import { AdminSidebar } from './sidebar/AdminSidebar';
 import { AppSidebar } from './sidebar/AppSidebar';
 import { SettingsSidebar } from './sidebar/SettingsSidebar';
@@ -35,6 +36,18 @@ export function Sidebar({
   const isSettings = pathname.startsWith('/settings');
   const isAdmin = pathname.startsWith('/admin');
 
+  // The desktop panel stays in the DOM so its width can animate, but the body
+  // unmounts once the slide finishes to drop its queries while hidden.
+  const [desktopBodyMounted, setDesktopBodyMounted] = useState(desktopVisible);
+  useEffect(() => {
+    if (desktopVisible) {
+      setDesktopBodyMounted(true);
+      return;
+    }
+    const timer = setTimeout(() => setDesktopBodyMounted(false), SIDEBAR_SLIDE_MS);
+    return () => clearTimeout(timer);
+  }, [desktopVisible]);
+
   // Close mobile on escape
   useEffect(() => {
     if (!mobileOpen) return;
@@ -95,15 +108,26 @@ export function Sidebar({
 
   return (
     <>
-      {/* Desktop sidebar */}
-      {desktopVisible && (
+      {/* Desktop sidebar -- outer clips while the panel slides out from under it */}
+      <div
+        className={`hidden h-full shrink-0 overflow-hidden md:block ${
+          isResizing ? '' : `transition-[width] ${SIDEBAR_SLIDE}`
+        }`}
+        style={{ width: desktopVisible ? `${width}px` : 0, maxWidth: '100vw' }}
+        aria-hidden={!desktopVisible}
+        inert={!desktopVisible ? true : undefined}
+      >
         <div
-          className={`border-border bg-sidebar relative hidden h-full shrink-0 border-r md:block ${
-            isResizing ? 'select-none' : ''
+          className={`border-border bg-sidebar relative h-full border-r ${
+            isResizing ? 'select-none' : `transition-transform ${SIDEBAR_SLIDE}`
           }`}
-          style={{ width: `${width}px`, maxWidth: '100vw' }}
+          style={{
+            width: `${width}px`,
+            transform: desktopVisible ? undefined : `translateX(-${width}px)`,
+          }}
         >
-          {renderBody(onHideDesktop, 'Hide sidebar', <PanelLeftCloseIcon className='size-4' />)}
+          {desktopBodyMounted &&
+            renderBody(onHideDesktop, 'Hide sidebar', <PanelLeftCloseIcon className='size-4' />)}
           <div
             className='hover:bg-primary absolute top-0 right-0 hidden h-full w-1 cursor-col-resize bg-transparent transition-colors md:block'
             onMouseDown={handleResizeStart}
@@ -112,22 +136,21 @@ export function Sidebar({
             aria-label='Resize sidebar'
           />
         </div>
-      )}
+      </div>
 
       {/* Mobile overlay -- panel always mounted for the CSS slide transition */}
       {createPortal(
         <div className='md:hidden' aria-hidden={!mobileOpen} inert={!mobileOpen ? true : undefined}>
           <div
-            className={`fixed inset-0 z-40 bg-black/30 transition-opacity duration-200 ${
+            className={`fixed inset-0 z-40 bg-black/30 transition-opacity ${SIDEBAR_SLIDE} ${
               mobileOpen ? 'opacity-100' : 'pointer-events-none opacity-0'
             }`}
             onClick={onCloseMobile}
           />
           <div
-            className={`bg-sidebar fixed inset-y-0 left-0 z-50 w-64 shadow-xl transition-transform duration-200 ${
+            className={`bg-sidebar fixed inset-y-0 left-0 z-50 w-64 shadow-xl transition-transform ${SIDEBAR_SLIDE} ${
               mobileOpen ? 'translate-x-0' : '-translate-x-full'
             }`}
-            style={{ transitionTimingFunction: 'cubic-bezier(0.32, 0.72, 0, 1)' }}
           >
             {/* Body mounts only while open so the app renders one sidebar at a time */}
             {mobileOpen && renderBody(onCloseMobile, 'Close sidebar', <XIcon className='size-4' />)}

packages/web/src/components/layout/sidebarMotion.ts

@@ -0,0 +1,6 @@
+/** Shared timing for the sidebar slide, so the panel and the collapsed rail move together. */
+
+export const SIDEBAR_SLIDE_MS = 200;
+
+export const SIDEBAR_SLIDE =
+  'duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none';