diff --git a/src/App.tsx b/src/App.tsx
index 7a320285f..d6b73a6d4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -112,11 +112,15 @@ function AppContent() {
           screen — see momentStage.ts in the moments feature. */}
         <main
           data-moment-stage
-          className={`relative min-h-screen min-w-0 flex-1 pt-[64px] lg:pt-0 ${
+          className={`app-sidebar-eases relative min-h-screen min-w-0 flex-1 pt-[64px] lg:pt-0 ${
             // The sidebar is `fixed` from `lg` up (see SideBar), so it is out of
             // flow and the page has to leave its width free itself. In focus mode
-            // it slides away over the content, so the margin goes with it.
-            signedIn && !isFocused ? "lg:ml-[var(--app-sidebar-width)]" : ""
+            // it slides away over the content, so the margin goes with it. Its
+            // width can be changed and folded, so it is read from the variable
+            // the sidebar keeps, falling back to the default before it has run.
+            signedIn && !isFocused
+              ? "lg:ml-[var(--app-sidebar-desktop-width,var(--app-sidebar-width))]"
+              : ""
           }`}
         >
           <AppRouter />
diff --git a/src/components/layout/SideBar.tsx b/src/components/layout/SideBar.tsx
index 9ce7e5088..7598ff095 100644
--- a/src/components/layout/SideBar.tsx
+++ b/src/components/layout/SideBar.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useId, useState } from "react";
+import { useCallback, useEffect, useId, useLayoutEffect, useState } from "react";
 import { motion, useMotionValue } from "framer-motion";
 import { NavLink, useLocation } from "react-router-dom";
 import { LogOut, Menu, Settings, X } from "lucide-react";
@@ -35,6 +35,9 @@ import {
 } from "./SidebarNavIcons";
 import { SidebarLogo } from "./SidebarLogo";
 import { SidebarNavLink } from "./SidebarNavLink";
+import { SidebarResizeHandle } from "./SidebarResizeHandle";
+import { SidebarAccountFlyout } from "./SidebarAccountFlyout";
+import { SIDEBAR_COLLAPSED_WIDTH, SIDEBAR_WIDTH_VAR, useSidebarLayout } from "./useSidebarLayout";
 import { hoverSpringToken } from "../../styles/tokens";
 
 type SidebarNavItem = {
@@ -62,6 +65,10 @@ type SidebarContentProps = {
   openEscalationCount?: number;
   /** Skip requests the project manager answered that the member has not looked at yet. */
   unseenSkipAnswerCount?: number;
+  /** Folded to icons -- the desktop sidebar only; the mobile drawer is always full width. */
+  collapsed?: boolean;
+  /** Lets the logo fold and unfold the desktop sidebar. Left out on the mobile drawer. */
+  onToggleCollapsed?: () => void;
 };
 
 /**
@@ -173,6 +180,8 @@ function SidebarContent({
   hasPmAttentionItems = false,
   openEscalationCount = 0,
   unseenSkipAnswerCount = 0,
+  collapsed = false,
+  onToggleCollapsed,
 }: SidebarContentProps) {
   const { profile, logout, status } = useAuth();
   const { canManageSelected } = useProjectContext();
@@ -268,12 +277,93 @@ function SidebarContent({
     .flatMap((section) => section.items.map((item) => item.path))
     .join("|")}`;
 
+  /** The footer card, the same in the open sidebar and in the folded rail's flyout. */
+  const footerCard = (
+    <div className="space-y-[12px] rounded-[18px] border border-app-border/70 bg-app-surface/70 p-[12px] shadow-[0_10px_30px_-18px_rgba(0,0,0,0.5)] backdrop-blur-xl">
+      {profile && (
+        <div className="flex items-center justify-between gap-2 py-[2px]">
+          <div className="flex items-center gap-3 overflow-hidden">
+            <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-app-surface-muted">
+              <UserAvatar
+                size={32}
+                profileIcon={profile.profileIcon}
+                fallbackName={`${profile.firstName} ${profile.lastName}`.trim()}
+                seed={profile.id}
+              />
+            </div>
+
+            <div className="flex flex-col overflow-hidden">
+              <span className="truncate text-sm font-semibold text-app-text">
+                {profile.username}
+              </span>
+
+              <span className="truncate text-[10px] font-medium tracking-wider text-app-text-muted uppercase">
+                {profile.permissionGroup.replace("_", " ")}
+              </span>
+            </div>
+          </div>
+          <motion.div
+            whileHover={{ scale: 1.18 }}
+            whileTap={{ scale: 0.92 }}
+            transition={hoverSpringToken}
+            className="shrink-0"
+          >
+            <NavLink
+              to="/settings"
+              onClick={onNavigate}
+              className={({ isActive }) =>
+                `flex h-9 w-9 items-center justify-center rounded-[10px] transition-colors ${
+                  isActive
+                    ? "bg-app-brand-soft text-app-brand"
+                    : "text-app-text-muted hover:bg-app-surface-hover hover:text-app-text"
+                }`
+              }
+              title={settingsLabel}
+              aria-label={settingsLabel}
+            >
+              <Settings className="h-[18px] w-[18px]" />
+            </NavLink>
+          </motion.div>
+        </div>
+      )}
+
+      <ProjectSwitcher className="w-full" />
+
+      <motion.button
+        type="button"
+        onClick={() => {
+          void logout();
+        }}
+        disabled={status === "loading"}
+        whileHover={status === "loading" ? undefined : { scale: 1.02 }}
+        whileTap={status === "loading" ? undefined : { scale: 0.98 }}
+        transition={hoverSpringToken}
+        className="flex h-[40px] w-full items-center justify-center gap-[12px] rounded-[12px] border border-app-danger-border/40 bg-app-danger-bg/70 text-sm font-medium text-app-danger-text backdrop-blur-md transition-colors hover:border-app-danger-solid hover:bg-app-danger-solid hover:text-white focus-visible:ring-2 focus-visible:ring-app-focus focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+      >
+        <LogOut aria-hidden="true" className="h-[16px] w-[16px]" />
+        Logout
+      </motion.button>
+    </div>
+  );
+
   return (
     <div className="flex h-full min-h-0 flex-col bg-app-bg text-app-text">
-      <div className="flex shrink-0 items-center gap-3 px-[24px] py-[24px]">
-        <SidebarLogo />
+      <div
+        className={`flex shrink-0 items-center gap-3 py-[24px] ${
+          collapsed ? "justify-center px-0" : "px-[24px]"
+        }`}
+      >
+        <SidebarLogo
+          sidebarToggle={onToggleCollapsed ? { collapsed, onToggle: onToggleCollapsed } : undefined}
+        />
 
-        <h1 className="text-lg leading-none font-bold tracking-tight text-app-text">SprintStart</h1>
+        <h1
+          className={
+            collapsed ? "sr-only" : "text-lg leading-none font-bold tracking-tight text-app-text"
+          }
+        >
+          SprintStart
+        </h1>
       </div>
 
       <nav
@@ -288,12 +378,15 @@ function SidebarContent({
         onPointerLeave={() => pointerY.set(Number.NEGATIVE_INFINITY)}
         // 24px inner padding. This and DOCK_HOVER_SCALE trade directly
         // against each other: the item grows rightwards from a fixed
-        // left edge, so 286px sidebar - 2x24 = 238px wide, x1.06 = 252px,
+        // left edge, so at the default 286px sidebar - 2x24 = 238px wide, x1.06 = 252px,
         // finishing ~10px short of the border. Pulling the content
         // further left again would need a smaller scale to keep that
         // gap. Header and footer share the inset, so everything lines
         // up on one left edge.
-        className="app-scrollbar min-h-0 flex-1 space-y-[5px] overflow-x-hidden overflow-y-auto px-[24px] py-[20px]"
+        // Folded to icons the inset shrinks to 16px, which leaves each 44px row centred.
+        className={`app-scrollbar min-h-0 flex-1 space-y-[5px] overflow-x-hidden overflow-y-auto py-[20px] ${
+          collapsed ? "px-[16px]" : "px-[24px]"
+        }`}
       >
         {sections.map((section, sectionIndex) => (
           <div
@@ -301,9 +394,21 @@ function SidebarContent({
             className={sectionIndex > 0 ? "pt-[20px]" : undefined}
           >
             {section.heading ? (
-              <p className="px-[12px] pb-[8px] text-[10px] font-semibold tracking-[0.18em] text-app-text-muted uppercase">
-                {section.heading}
-              </p>
+              collapsed ? (
+                // No room for the words: a short rule marks where the group starts, and the
+                // heading stays for assistive technology.
+                <>
+                  <p className="sr-only">{section.heading}</p>
+                  <span
+                    aria-hidden="true"
+                    className="mx-auto mb-[12px] block h-px w-6 bg-app-border"
+                  />
+                </>
+              ) : (
+                <p className="px-[12px] pb-[8px] text-[10px] font-semibold tracking-[0.18em] text-app-text-muted uppercase">
+                  {section.heading}
+                </p>
+              )
             ) : null}
 
             <div className="space-y-[5px]">
@@ -340,6 +445,7 @@ function SidebarContent({
                     item.path === ESCALATION_INBOX_PATH ? describeOpenEscalations : undefined
                   }
                   onNavigate={onNavigate}
+                  collapsed={collapsed}
                 />
               ))}
             </div>
@@ -349,74 +455,31 @@ function SidebarContent({
 
       {/* Floating glass card instead of a full-bleed bar. The 12px outer
                 gutter plus 12px inner padding lines its content up with the
-                24px inset used by the nav items above. */}
-      <div className="shrink-0 px-[12px] pt-[8px] pb-[16px]">
-        <div className="space-y-[12px] rounded-[18px] border border-app-border/70 bg-app-surface/70 p-[12px] shadow-[0_10px_30px_-18px_rgba(0,0,0,0.5)] backdrop-blur-xl">
-          {profile && (
-            <div className="flex items-center justify-between gap-2 py-[2px]">
-              <div className="flex items-center gap-3 overflow-hidden">
-                <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-app-surface-muted">
-                  <UserAvatar
-                    size={32}
-                    profileIcon={profile.profileIcon}
-                    fallbackName={`${profile.firstName} ${profile.lastName}`.trim()}
-                    seed={profile.id}
-                  />
-                </div>
-
-                <div className="flex flex-col overflow-hidden">
-                  <span className="truncate text-sm font-semibold text-app-text">
-                    {profile.username}
-                  </span>
-
-                  <span className="truncate text-[10px] font-medium tracking-wider text-app-text-muted uppercase">
-                    {profile.permissionGroup.replace("_", " ")}
-                  </span>
-                </div>
-              </div>
-              <motion.div
-                whileHover={{ scale: 1.18 }}
-                whileTap={{ scale: 0.92 }}
-                transition={hoverSpringToken}
-                className="shrink-0"
-              >
-                <NavLink
-                  to="/settings"
-                  onClick={onNavigate}
-                  className={({ isActive }) =>
-                    `flex h-9 w-9 items-center justify-center rounded-[10px] transition-colors ${
-                      isActive
-                        ? "bg-app-brand-soft text-app-brand"
-                        : "text-app-text-muted hover:bg-app-surface-hover hover:text-app-text"
-                    }`
-                  }
-                  title={settingsLabel}
-                  aria-label={settingsLabel}
-                >
-                  <Settings className="h-[18px] w-[18px]" />
-                </NavLink>
-              </motion.div>
-            </div>
-          )}
-
-          <ProjectSwitcher className="w-full" />
-
-          <motion.button
-            type="button"
-            onClick={() => {
-              void logout();
-            }}
-            disabled={status === "loading"}
-            whileHover={status === "loading" ? undefined : { scale: 1.02 }}
-            whileTap={status === "loading" ? undefined : { scale: 0.98 }}
-            transition={hoverSpringToken}
-            className="flex h-[40px] w-full items-center justify-center gap-[12px] rounded-[12px] border border-app-danger-border/40 bg-app-danger-bg/70 text-sm font-medium text-app-danger-text backdrop-blur-md transition-colors hover:border-app-danger-solid hover:bg-app-danger-solid hover:text-white focus-visible:ring-2 focus-visible:ring-app-focus focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+                24px inset used by the nav items above. Folded, the card slides
+                out from the avatar instead of being squeezed into the rail. */}
+      {collapsed ? (
+        <div className="flex shrink-0 justify-center pt-[8px] pb-[16px]">
+          <SidebarAccountFlyout
+            label="Account and project"
+            trigger={
+              profile ? (
+                <UserAvatar
+                  size={32}
+                  profileIcon={profile.profileIcon}
+                  fallbackName={`${profile.firstName} ${profile.lastName}`.trim()}
+                  seed={profile.id}
+                />
+              ) : (
+                <Settings aria-hidden="true" className="h-[18px] w-[18px] text-app-text-muted" />
+              )
+            }
           >
-            <LogOut className="h-[16px] w-[16px]" />
-            Logout
-          </motion.button>
+            {footerCard}
+          </SidebarAccountFlyout>
         </div>
-      </div>
+      ) : (
+        <div className="shrink-0 px-[12px] pt-[8px] pb-[16px]">{footerCard}</div>
+      )}
     </div>
   );
 }
@@ -465,6 +528,20 @@ export function SideBar() {
     pathname,
   );
 
+  // The desktop sidebar's width and folded state, remembered across visits. The mobile drawer
+  // does not use either: it keeps its fixed width and opens over the page.
+  const sidebarLayout = useSidebarLayout();
+  const desktopWidth = sidebarLayout.collapsed ? SIDEBAR_COLLAPSED_WIDTH : sidebarLayout.width;
+  // On the root, where the page's own margin reads it too. Set before paint, so a folded sidebar
+  // never shows at full width for a frame on load.
+  useLayoutEffect(() => {
+    const root = document.documentElement;
+    root.style.setProperty(SIDEBAR_WIDTH_VAR, `${desktopWidth}px`);
+    return () => {
+      root.style.removeProperty(SIDEBAR_WIDTH_VAR);
+    };
+  }, [desktopWidth]);
+
   const closeMobileSidebar = () => {
     setIsMobileSidebarOpen(false);
   };
@@ -478,33 +555,47 @@ export function SideBar() {
   }, [pathname]);
 
   /**
-   * Alt+S works whatever the header's button works — one definition of "toggle the sidebar"
-   * for both ways in. Today that is the drawer below `lg`; the desktop collapse (#244) will
-   * give the same chord something to do on a wide screen without this line changing.
+   * Alt+S toggles whichever sidebar is on screen: below `lg` the drawer, as the header's
+   * button does; from `lg` up the desktop sidebar's fold to icons, as its logo does (#244).
    *
-   * Which is exactly why it only listens below `lg`: on a wide screen the drawer is not on
-   * screen, so the chord would flip state nobody can see — and leave it flipped, opening the
-   * drawer uninvited the next time the window narrows. Worse, `Alt+S` is Firefox's History
-   * menu on Windows, and swallowing it for a no-op takes the browser's own chord too.
+   * Never the drawer on a wide screen: it is not on screen there, so the chord would flip
+   * state nobody can see -- and leave it flipped, opening the drawer uninvited the next time
+   * the window narrows.
    */
   const toggleMobileSidebar = useCallback(() => {
     setIsMobileSidebarOpen((isOpen) => !isOpen);
   }, []);
   const isDesktopLayout = useMediaQuery("(min-width: 1024px)");
 
-  useShortcutListener(SIDEBAR_TOGGLE_SHORTCUT, toggleMobileSidebar, !isDesktopLayout);
+  useShortcutListener(
+    SIDEBAR_TOGGLE_SHORTCUT,
+    isDesktopLayout ? sidebarLayout.toggleCollapsed : toggleMobileSidebar,
+  );
 
   return (
     <>
       <aside
         aria-label="Desktop Sidebar"
-        className="fixed top-0 bottom-0 left-0 hidden w-[var(--app-sidebar-width)] flex-col border-r border-app-border bg-app-bg lg:flex"
+        // Fixed from `lg` up and out of the page's flow (the page leaves its width free, see
+        // App), so the width lives in a CSS variable both read. It eases when the sidebar folds
+        // and follows the pointer exactly while the edge is dragged (`app-sidebar-eases`).
+        className="app-sidebar-eases fixed top-0 bottom-0 left-0 hidden w-[var(--app-sidebar-desktop-width,var(--app-sidebar-width))] flex-col border-r border-app-border bg-app-bg lg:flex"
       >
         <SidebarContent
           aria-label="Desktop Navigation"
           hasPmAttentionItems={hasPmAttentionItems}
           openEscalationCount={openEscalationCount}
           unseenSkipAnswerCount={unseenSkipAnswerCount}
+          collapsed={sidebarLayout.collapsed}
+          onToggleCollapsed={sidebarLayout.toggleCollapsed}
+        />
+        {/* Also on the folded rail: its edge pulls the sidebar open again. */}
+        <SidebarResizeHandle
+          width={sidebarLayout.width}
+          collapsed={sidebarLayout.collapsed}
+          onResize={sidebarLayout.setWidth}
+          onCollapse={() => sidebarLayout.setCollapsed(true)}
+          onExpand={() => sidebarLayout.setCollapsed(false)}
         />
       </aside>
 
diff --git a/src/components/layout/SidebarAccountFlyout.tsx b/src/components/layout/SidebarAccountFlyout.tsx
new file mode 100644
index 000000000..ab23df408
--- /dev/null
+++ b/src/components/layout/SidebarAccountFlyout.tsx
@@ -0,0 +1,156 @@
+import { useEffect, useId, useRef, useState, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+import { useLocation } from "react-router-dom";
+import { useFocusMode } from "../../context/useFocusMode";
+
+/** Long enough to cross the gap from the icon to the card without it closing in between. */
+const CLOSE_DELAY_MS = 200;
+
+type SidebarAccountFlyoutProps = {
+  /** What the folded rail shows in place of the footer card: the user's avatar. */
+  trigger: ReactNode;
+  /** Names the button for assistive technology, since it shows only a picture. */
+  label: string;
+  /** The footer card as the open sidebar shows it. */
+  children: ReactNode;
+};
+
+/**
+ * The sidebar footer for the rail folded to icons: one icon that slides the full footer card
+ * out beside the rail on hover, or on click and from the keyboard, where there is no hover.
+ *
+ * The card stays mounted while hidden (`inert` and transparent) rather than being removed: the
+ * project switcher inside it owns the Cmd/Ctrl+K shortcut and its modal, and both have to keep
+ * working while the card is closed -- including after the pointer has left it for the modal.
+ *
+ * Drawn in a portal at a fixed position beside the rail, which reads the rail's width from the
+ * same CSS variable the sidebar does: the nav and footer clip anything past their edge.
+ */
+export function SidebarAccountFlyout({ trigger, label, children }: SidebarAccountFlyoutProps) {
+  /**
+   * Opened by hover it follows the pointer and closes when it leaves; opened by a click (or
+   * clicked while hovered open) it stays until Escape, a click elsewhere or a second click.
+   * Without the difference, hovering the icon and then clicking it -- the natural thing to do
+   * with a mouse -- closed the card the hover had just opened.
+   */
+  const [mode, setMode] = useState<"closed" | "hover" | "pinned">("closed");
+  const open = mode !== "closed";
+  const panelId = useId();
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const closeTimer = useRef<number | undefined>(undefined);
+
+  const cancelClose = () => window.clearTimeout(closeTimer.current);
+  const openNow = () => {
+    cancelClose();
+    setMode((current) => (current === "pinned" ? current : "hover"));
+  };
+  const closeSoon = () => {
+    cancelClose();
+    closeTimer.current = window.setTimeout(
+      () => setMode((current) => (current === "pinned" ? current : "closed")),
+      CLOSE_DELAY_MS,
+    );
+  };
+
+  useEffect(() => cancelClose, []);
+
+  // Going somewhere from it (Settings) is done with it, and so is focus mode sliding the sidebar
+  // away: portalled outside the sidebar, the card would stay behind, floating beside nothing.
+  // Adjusted while rendering rather than in an effect, so it never shows for a frame too long.
+  const { pathname } = useLocation();
+  const { isFocused } = useFocusMode();
+  const context = `${pathname}|${isFocused}`;
+  const [openedIn, setOpenedIn] = useState(context);
+  if (openedIn !== context) {
+    setOpenedIn(context);
+    setMode("closed");
+  }
+
+  // Escape and a click anywhere else close it, as for any popover.
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== "Escape") return;
+      const focusWasInside = panelRef.current?.contains(document.activeElement) ?? false;
+      setMode("closed");
+      if (focusWasInside) triggerRef.current?.focus();
+    };
+    const onPointerDown = (event: PointerEvent) => {
+      const target = event.target as Node;
+      if (panelRef.current?.contains(target) || triggerRef.current?.contains(target)) return;
+      setMode("closed");
+    };
+    document.addEventListener("keydown", onKeyDown);
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      document.removeEventListener("pointerdown", onPointerDown);
+    };
+  }, [open]);
+
+  return (
+    <>
+      <button
+        ref={triggerRef}
+        type="button"
+        aria-label={label}
+        aria-expanded={open}
+        aria-controls={panelId}
+        // Hover only for a mouse: a touch "enter" is followed by a click, which would toggle it
+        // straight back shut.
+        onPointerEnter={(event) => event.pointerType === "mouse" && openNow()}
+        onPointerLeave={(event) => event.pointerType === "mouse" && closeSoon()}
+        onClick={(event) => {
+          cancelClose();
+          const opening = mode !== "pinned";
+          setMode(opening ? "pinned" : "closed");
+          // From the keyboard, into the card: portalled to the end of the page, it is not next
+          // in the tab order.
+          if (opening && event.detail === 0) {
+            window.requestAnimationFrame(() =>
+              panelRef.current
+                ?.querySelector<HTMLElement>("a[href], button:not(:disabled)")
+                ?.focus(),
+            );
+          }
+        }}
+        className={`flex h-11 w-11 items-center justify-center rounded-full border transition-colors focus-visible:ring-2 focus-visible:ring-app-focus focus-visible:outline-none ${
+          open
+            ? "border-app-brand-border bg-app-brand-soft"
+            : "border-app-border/70 bg-app-surface/70 hover:border-app-brand-border"
+        }`}
+      >
+        {trigger}
+      </button>
+
+      {createPortal(
+        <div
+          ref={panelRef}
+          id={panelId}
+          role="group"
+          aria-label={label}
+          inert={!open}
+          onPointerEnter={(event) => event.pointerType === "mouse" && openNow()}
+          onPointerLeave={(event) => event.pointerType === "mouse" && closeSoon()}
+          onBlur={(event) => {
+            const next = event.relatedTarget as Node | null;
+            if (next && !panelRef.current?.contains(next) && !triggerRef.current?.contains(next)) {
+              setMode("closed");
+            }
+          }}
+          // Slides out of the rail from its bottom-left corner, the way the footer card would
+          // have unfolded had there been room for it.
+          className={`fixed bottom-[16px] left-[calc(var(--app-sidebar-desktop-width,var(--app-sidebar-width))+10px)] z-40 hidden w-[262px] origin-bottom-left transition duration-200 ease-out motion-reduce:transition-none lg:block ${
+            open
+              ? "translate-x-0 scale-100 opacity-100"
+              : "pointer-events-none -translate-x-3 scale-95 opacity-0"
+          }`}
+        >
+          {children}
+        </div>,
+        document.body,
+      )}
+    </>
+  );
+}
diff --git a/src/components/layout/SidebarLogo.tsx b/src/components/layout/SidebarLogo.tsx
index 5497b1975..70746f4cb 100644
--- a/src/components/layout/SidebarLogo.tsx
+++ b/src/components/layout/SidebarLogo.tsx
@@ -1,9 +1,28 @@
-import { useState } from "react";
+import { useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { motion, useReducedMotion, type TargetAndTransition, type Variants } from "framer-motion";
 import { useRepeatClicks } from "../../features/easter-eggs/hooks/useRepeatClicks";
+import { SIDEBAR_TOGGLE_SHORTCUT, shortcutChord } from "../../features/shortcuts";
+import { ShortcutHint } from "../ui/ShortcutHint";
 import { hoverSpringToken, logoHopSpringToken } from "../../styles/tokens";
 
 const BADGE_SIZE = 44;
+
+/**
+ * A click this soon after the previous one counts towards the gravity egg only, instead of
+ * folding the sidebar again: five quick clicks should drop the badge, not flap the sidebar five
+ * times while it falls.
+ */
+const TOGGLE_REPEAT_GUARD_MS = 600;
+
+type SidebarLogoProps = {
+  className?: string;
+  /**
+   * Makes the badge fold and unfold the desktop sidebar, with a tooltip saying which. Left out
+   * on the mobile header, where the badge stays decoration with its egg.
+   */
+  sidebarToggle?: { collapsed: boolean; onToggle: () => void };
+};
 const MARK_SIZE = 28;
 
 /**
@@ -77,17 +96,56 @@ const NOZZLE_ORIGIN = { transformOrigin: "7px 17px", transformBox: "view-box" }
  * in the corner of the eye stops reading as charm and starts reading as a
  * fault.
  */
-export function SidebarLogo({ className = "" }: { className?: string }) {
+export function SidebarLogo({ className = "", sidebarToggle }: SidebarLogoProps) {
   const prefersReducedMotion = useReducedMotion();
+  const badgeRef = useRef<HTMLDivElement>(null);
+  const lastClickAt = useRef(0);
+
+  // Where the toggle's tooltip sits, `null` while hidden. Beside the badge on the folded rail,
+  // like the entries' tooltips there; below it while open, where the name sits beside it. In a
+  // portal at a fixed position, so nothing in the sidebar clips it.
+  const [hintAt, setHintAt] = useState<{ x: number; y: number; side: "right" | "below" } | null>(
+    null,
+  );
+  // The badge moves whenever the sidebar folds or unfolds -- by a click here, Alt+S or the resize
+  // edge -- so a tooltip measured before would point at where it was. Cleared while rendering,
+  // so it never shows at the old spot for a frame; it comes back on the next hover.
+  const collapsed = sidebarToggle?.collapsed ?? false;
+  const [hintFor, setHintFor] = useState(collapsed);
+  if (hintFor !== collapsed) {
+    setHintFor(collapsed);
+    setHintAt(null);
+  }
 
   // The gravity easter egg: five clicks drop the badge off its shelf.
   // Reduced motion skips the animation entirely (pure motion has no honest
   // static equivalent) — the counter still consumes, nothing plays.
   const [dropPhase, setDropPhase] = useState<DropPhase>("idle");
-  const handleLogoClick = useRepeatClicks(5, () => {
+  const countEggClick = useRepeatClicks(5, () => {
     if (!prefersReducedMotion && dropPhase === "idle") setDropPhase("falling");
   });
 
+  const showHint = () => {
+    const rect = badgeRef.current?.getBoundingClientRect();
+    if (!sidebarToggle || !rect || dropPhase !== "idle") return;
+    setHintAt(
+      sidebarToggle.collapsed
+        ? { x: rect.right + 10, y: rect.top + rect.height / 2, side: "right" }
+        : { x: rect.left, y: rect.bottom + 8, side: "below" },
+    );
+  };
+
+  const handleLogoClick = () => {
+    const now = Date.now();
+    const isQuickRepeat = now - lastClickAt.current < TOGGLE_REPEAT_GUARD_MS;
+    lastClickAt.current = now;
+    // The badge moves with the sidebar, so a tooltip measured before the click would point at
+    // where it was; it comes back on the next hover.
+    setHintAt(null);
+    if (sidebarToggle && !isQuickRepeat) sidebarToggle.onToggle();
+    countEggClick();
+  };
+
   /** Walks the choreography forward as each beat's animation completes. */
   const advanceDrop = () => {
     setDropPhase((current) => {
@@ -162,6 +220,7 @@ export function SidebarLogo({ className = "" }: { className?: string }) {
 
   return (
     <motion.div
+      ref={badgeRef}
       initial="rest"
       animate={dropPhase === "idle" ? "rest" : DROP_PHASES[dropPhase]}
       // Hover lift is suppressed while the gravity sequence plays so the
@@ -170,6 +229,8 @@ export function SidebarLogo({ className = "" }: { className?: string }) {
       variants={badgeVariants}
       onAnimationComplete={advanceDrop}
       onClick={handleLogoClick}
+      onPointerEnter={(event) => event.pointerType === "mouse" && showHint()}
+      onPointerLeave={() => setHintAt(null)}
       data-drop-phase={dropPhase}
       // The logo is deliberately decorative markup — the egg behind it is
       // pure whimsy with no function, and making it tab-focusable on both
@@ -183,7 +244,9 @@ export function SidebarLogo({ className = "" }: { className?: string }) {
       // The pointer cursor stays: unlike a plain decorative wrapper this one
       // does answer clicks (that is the whole egg), and it is the only hint
       // anybody gets that the badge is worth touching. It is not a home link
-      // on any surface, so it promises no navigation.
+      // on any surface, so it promises no navigation. In the desktop sidebar it
+      // also folds and unfolds it (`sidebarToggle`); from the keyboard the same
+      // is Enter on the sidebar's resize edge.
       style={{ width: BADGE_SIZE, height: BADGE_SIZE }}
       className={`relative flex shrink-0 cursor-pointer items-center justify-center rounded-[12px] bg-app-brand shadow-lg select-none ${className}`}
     >
@@ -234,6 +297,27 @@ export function SidebarLogo({ className = "" }: { className?: string }) {
           <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" />
         </g>
       </motion.svg>
+
+      {hintAt &&
+        sidebarToggle &&
+        createPortal(
+          // Hidden from assistive technology: the badge is not reachable without a pointer, and
+          // the resize edge (Enter folds and unfolds) is their way to the same thing.
+          <span
+            aria-hidden="true"
+            style={{ left: hintAt.x, top: hintAt.y }}
+            className={`pointer-events-none fixed z-[70] flex items-center gap-2 rounded-lg border border-app-border bg-app-surface px-2.5 py-1.5 text-xs font-medium whitespace-nowrap text-app-text shadow-lg ${
+              hintAt.side === "right" ? "-translate-y-1/2" : ""
+            }`}
+          >
+            {sidebarToggle.collapsed ? "Expand sidebar" : "Collapse sidebar"}
+            <ShortcutHint
+              keys={shortcutChord(SIDEBAR_TOGGLE_SHORTCUT)}
+              className="border-app-border text-app-text-muted"
+            />
+          </span>,
+          document.body,
+        )}
     </motion.div>
   );
 }
diff --git a/src/components/layout/SidebarNavLink.tsx b/src/components/layout/SidebarNavLink.tsx
index 58e46f8e5..a0ce93baf 100644
--- a/src/components/layout/SidebarNavLink.tsx
+++ b/src/components/layout/SidebarNavLink.tsx
@@ -1,5 +1,6 @@
 import { motion, useReducedMotion, useSpring, useTransform, type MotionValue } from "framer-motion";
 import { useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { NavLink } from "react-router-dom";
 import { useQueryClient } from "@tanstack/react-query";
 import type { SidebarIcon } from "./SidebarNavIcons";
@@ -186,6 +187,12 @@ type SidebarNavLinkProps = {
    */
   shortcut?: string;
   onNavigate?: () => void;
+  /**
+   * The desktop sidebar folded to icons: the label is kept for assistive technology only and
+   * shown as a tooltip beside the icon on hover and keyboard focus, and a count shrinks to a
+   * bubble on the icon's corner.
+   */
+  collapsed?: boolean;
 };
 
 const BASE_LINK_CLASS = [
@@ -223,6 +230,7 @@ export function SidebarNavLink({
   busyLabel,
   shortcut,
   onNavigate,
+  collapsed = false,
 }: SidebarNavLinkProps) {
   const prefersReducedMotion = useReducedMotion();
   const indicatorTransition = prefersReducedMotion ? { duration: 0 } : slidingIndicatorSpringToken;
@@ -248,6 +256,16 @@ export function SidebarNavLink({
   // full lift outright.
   const [isFocused, setIsFocused] = useState(false);
 
+  // Where the collapsed entry's tooltip sits, measured when it is asked for (pointer over the
+  // entry, or keyboard focus on it) -- `null` while hidden. Drawn in a portal at a fixed position:
+  // the nav clips anything that reaches past its edge, which is exactly where a tooltip goes.
+  const [tooltipAt, setTooltipAt] = useState<{ x: number; y: number } | null>(null);
+  const showTooltip = () => {
+    const rect = elementRef.current?.getBoundingClientRect();
+    if (collapsed && rect) setTooltipAt({ x: rect.right + 10, y: rect.top + rect.height / 2 });
+  };
+  const hideTooltip = () => setTooltipAt(null);
+
   // The row's centre, measured once per render instead of on every pointer
   // move. `getBoundingClientRect` forces layout, and doing that for every
   // entry on every move is exactly the work that makes a fast sweep feel
@@ -346,8 +364,20 @@ export function SidebarNavLink({
         transformOrigin: "left center",
         willChange: "transform",
       }}
-      onFocusCapture={() => setIsFocused(true)}
-      onBlurCapture={() => setIsFocused(false)}
+      onFocusCapture={() => {
+        setIsFocused(true);
+        showTooltip();
+      }}
+      onBlurCapture={() => {
+        setIsFocused(false);
+        hideTooltip();
+      }}
+      onPointerEnter={showTooltip}
+      onPointerLeave={hideTooltip}
+      onKeyDown={(event) => {
+        // The usual way out of a tooltip that is in the way.
+        if (event.key === "Escape") hideTooltip();
+      }}
     >
       <NavLink
         to={to}
@@ -537,9 +567,13 @@ export function SidebarNavLink({
                   )}
                 </motion.span>
 
-                <span>{label}</span>
+                {/* Folded to icons, the label is still the entry's accessible name -- and the
+                    tooltip's text, for everyone else. */}
+                <span className={collapsed ? "sr-only" : undefined}>{label}</span>
 
-                {shortcut && (
+                {/* Not on the folded rail: there is no room beside the icon, and the chord stays
+                    in the link's `title` and in the shortcuts modal. */}
+                {shortcut && !collapsed && (
                   <ShortcutHint keys={shortcut} className="border-app-border text-app-text-muted" />
                 )}
 
@@ -549,7 +583,12 @@ export function SidebarNavLink({
                                     you are already on has less to tell you than the one
                                     with work waiting behind it. */}
                 {busy ? (
-                  <span className="ml-auto flex items-center" role="status">
+                  <span
+                    className={
+                      collapsed ? "absolute -top-1 -right-1 flex" : "ml-auto flex items-center"
+                    }
+                    role="status"
+                  >
                     <span
                       aria-hidden="true"
                       className={`h-[14px] w-[14px] rounded-full border-2 border-t-transparent motion-safe:animate-spin ${
@@ -559,7 +598,17 @@ export function SidebarNavLink({
                     <span className="sr-only">{busyLabel ?? "In progress"}</span>
                   </span>
                 ) : count > 0 ? (
-                  <span className="ml-auto flex items-center">
+                  // Folded to icons, the count sits on the icon's corner. Its words (what a screen
+                  // reader hears) are its tooltip, since a bare number does not say of what.
+                  <span
+                    className={
+                      collapsed
+                        ? "absolute -top-2 -right-2.5 flex items-center"
+                        : "ml-auto flex items-center"
+                    }
+                    // Open, the link's own `title` (name and chord) must not be shadowed by it.
+                    title={collapsed ? countLabel?.(count) : undefined}
+                  >
                     {/* The same amber as the icon beside it, and the same
                                             amber on the active row as off it. This is the
                                             second half of one signal, not a badge of its
@@ -575,7 +624,7 @@ export function SidebarNavLink({
                     </span>
                     <span className="sr-only">{countLabel?.(count) ?? `${count} waiting`}</span>
                   </span>
-                ) : isHighlighted ? (
+                ) : isHighlighted && !collapsed ? (
                   <span className="ml-auto h-[6px] w-[6px] rounded-full bg-white" />
                 ) : null}
               </span>
@@ -583,6 +632,34 @@ export function SidebarNavLink({
           );
         }}
       </NavLink>
+
+      {collapsed &&
+        tooltipAt &&
+        createPortal(
+          // Hidden from assistive technology: the entry's own name and status already say all
+          // of this; the tooltip is the same words for someone who can only see an icon.
+          <span
+            aria-hidden="true"
+            style={{ left: tooltipAt.x, top: tooltipAt.y }}
+            className="pointer-events-none fixed z-[70] -translate-y-1/2 rounded-lg border border-app-border bg-app-surface px-2.5 py-1.5 text-xs font-medium whitespace-nowrap text-app-text shadow-lg"
+          >
+            {label}
+            {busy ? (
+              <span className="block text-[11px] font-normal text-app-text-muted">
+                {busyLabel ?? "In progress"}
+              </span>
+            ) : count > 0 ? (
+              <span className="block text-[11px] font-normal text-app-text-muted">
+                {countLabel?.(count) ?? `${count} waiting`}
+              </span>
+            ) : needsAttention ? (
+              <span className="block text-[11px] font-normal text-app-text-muted">
+                {attentionLabel ?? "Needs attention"}
+              </span>
+            ) : null}
+          </span>,
+          document.body,
+        )}
     </motion.div>
   );
 }
diff --git a/src/components/layout/SidebarResizeHandle.tsx b/src/components/layout/SidebarResizeHandle.tsx
new file mode 100644
index 000000000..b0accad28
--- /dev/null
+++ b/src/components/layout/SidebarResizeHandle.tsx
@@ -0,0 +1,189 @@
+import { useEffect, useRef, type KeyboardEvent, type PointerEvent } from "react";
+import {
+  SIDEBAR_COLLAPSED_WIDTH,
+  SIDEBAR_DEFAULT_WIDTH,
+  SIDEBAR_WIDTH_VAR,
+  SIDEBAR_MAX_WIDTH,
+  SIDEBAR_MIN_WIDTH,
+  SIDEBAR_WIDTH_STEP,
+  clampSidebarWidth,
+} from "./useSidebarLayout";
+
+/** Dragged this far past the minimum, the sidebar folds to icons instead of stopping there. */
+const COLLAPSE_OVERSHOOT_PX = 80;
+/**
+ * Where the edge switches between folded and open, in both directions: pulled left of it the
+ * sidebar folds, pulled right of it (out of the folded rail) the sidebar opens again.
+ */
+const COLLAPSE_THRESHOLD = SIDEBAR_MIN_WIDTH - COLLAPSE_OVERSHOOT_PX;
+
+type SidebarResizeHandleProps = {
+  /** The open width -- kept while folded, for when it opens again. */
+  width: number;
+  collapsed: boolean;
+  onResize: (width: number) => void;
+  onCollapse: () => void;
+  onExpand: () => void;
+};
+
+/** Marks a drag on the root element, where `app-sidebar-eases` holds its transition off meanwhile. */
+function setDragging(dragging: boolean) {
+  if (dragging) document.documentElement.dataset.sidebarResizing = "true";
+  else delete document.documentElement.dataset.sidebarResizing;
+}
+
+/**
+ * The desktop sidebar's right edge, as something to drag: wider or narrower within
+ * {@link SIDEBAR_MIN_WIDTH} and {@link SIDEBAR_MAX_WIDTH}, folded to icons when pulled well past
+ * the minimum, back to the default on a double click. Folded, the same edge pulls it open again,
+ * so neither direction needs the toggle button.
+ *
+ * Folding and opening happen as the pointer crosses {@link COLLAPSE_THRESHOLD}, not on release:
+ * the rail snaps shut or open under the pointer, so what is let go of is what stays.
+ *
+ * While dragging it writes the width straight into the sidebar's CSS variable (which the page's
+ * margin reads too) and only hands the result back on release: a state update per pointer move
+ * would re-render every entry of the sidebar sixty times a second for a line that just follows
+ * the mouse.
+ *
+ * A `separator` with a value, so it is reachable and usable from the keyboard too: the arrow
+ * keys move the edge, Home and End jump to the limits, Enter folds the sidebar to icons or opens
+ * it again. Folded, the right arrow and End open it.
+ */
+export function SidebarResizeHandle({
+  width,
+  collapsed,
+  onResize,
+  onCollapse,
+  onExpand,
+}: SidebarResizeHandleProps) {
+  const drag = useRef<{
+    startX: number;
+    startWidth: number;
+    raw: number;
+    collapsed: boolean;
+  } | null>(null);
+
+  // Unmounted mid-drag (focus mode swapping the shell, a route change, HMR), `endDrag` never runs,
+  // and the mark would hold the sidebar's easing off for the rest of the visit.
+  useEffect(() => () => setDragging(false), []);
+
+  const onPointerDown = (event: PointerEvent<HTMLDivElement>) => {
+    if (event.button !== 0) return;
+    event.preventDefault();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    const startWidth = collapsed ? SIDEBAR_COLLAPSED_WIDTH : width;
+    drag.current = { startX: event.clientX, startWidth, raw: startWidth, collapsed };
+    setDragging(true);
+  };
+
+  const onPointerMove = (event: PointerEvent<HTMLDivElement>) => {
+    const current = drag.current;
+    if (!current) return;
+    current.raw = current.startWidth + event.clientX - current.startX;
+    const folds = current.raw < COLLAPSE_THRESHOLD;
+
+    if (folds !== current.collapsed) {
+      // One state update per crossing, not per move: the sidebar has to swap between its folded
+      // and open layout, which the CSS variable alone cannot do.
+      current.collapsed = folds;
+      if (folds) {
+        onCollapse();
+      } else {
+        // Opens at the width under the pointer, not at the one it had before it folded.
+        onResize(current.raw);
+        onExpand();
+      }
+    }
+    // Folded, the sidebar writes the rail's width itself.
+    if (folds) return;
+    document.documentElement.style.setProperty(
+      SIDEBAR_WIDTH_VAR,
+      `${clampSidebarWidth(current.raw)}px`,
+    );
+  };
+
+  const endDrag = (event: PointerEvent<HTMLDivElement>) => {
+    const current = drag.current;
+    if (!current) return;
+    drag.current = null;
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+    setDragging(false);
+    // Folded or opened already while crossing the threshold; an open edge still has to hand its
+    // final width back. The sidebar writes the variable again from its state on the next render.
+    if (!current.collapsed) onResize(current.raw);
+  };
+
+  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      if (collapsed) onExpand();
+      else onCollapse();
+      return;
+    }
+    if (collapsed) {
+      // Folded there is no width to move; growing it means opening it, at the width it had.
+      if (event.key === "ArrowRight" || event.key === "End") {
+        event.preventDefault();
+        onExpand();
+      }
+      return;
+    }
+
+    const next =
+      event.key === "ArrowLeft"
+        ? width - SIDEBAR_WIDTH_STEP
+        : event.key === "ArrowRight"
+          ? width + SIDEBAR_WIDTH_STEP
+          : event.key === "Home"
+            ? SIDEBAR_MIN_WIDTH
+            : event.key === "End"
+              ? SIDEBAR_MAX_WIDTH
+              : null;
+
+    if (next === null) return;
+    event.preventDefault();
+    onResize(next);
+  };
+
+  /* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-noninteractive-tabindex --
+     A focusable `separator` with a value is the ARIA pattern for a splitter, and an interactive
+     widget when focusable; the lint rules treat every separator as static. */
+  return (
+    <div
+      role="separator"
+      aria-orientation="vertical"
+      aria-label="Resize sidebar"
+      aria-valuenow={collapsed ? SIDEBAR_COLLAPSED_WIDTH : width}
+      aria-valuemin={collapsed ? SIDEBAR_COLLAPSED_WIDTH : SIDEBAR_MIN_WIDTH}
+      aria-valuemax={SIDEBAR_MAX_WIDTH}
+      aria-valuetext={collapsed ? "Collapsed" : `${width} pixels`}
+      tabIndex={0}
+      title={
+        collapsed
+          ? "Drag to expand, double-click to reset, Enter to expand"
+          : "Drag to resize, double-click to reset, Enter to collapse"
+      }
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+      onPointerUp={endDrag}
+      onPointerCancel={endDrag}
+      onDoubleClick={() => {
+        onResize(SIDEBAR_DEFAULT_WIDTH);
+        if (collapsed) onExpand();
+      }}
+      onKeyDown={onKeyDown}
+      // A wide, invisible grip centred on the border; the line itself only shows on hover, focus
+      // or drag.
+      className="group absolute top-0 -right-1.5 z-20 flex h-full w-3 cursor-col-resize touch-none justify-center focus-visible:outline-none"
+    >
+      <span
+        aria-hidden="true"
+        className="h-full w-0.5 bg-transparent transition-colors group-hover:bg-app-brand-border-strong group-focus-visible:bg-app-focus group-active:bg-app-brand"
+      />
+    </div>
+  );
+  /* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-noninteractive-tabindex */
+}
diff --git a/src/components/layout/useSidebarLayout.ts b/src/components/layout/useSidebarLayout.ts
new file mode 100644
index 000000000..babd00ada
--- /dev/null
+++ b/src/components/layout/useSidebarLayout.ts
@@ -0,0 +1,86 @@
+import { useCallback, useEffect, useState } from "react";
+
+/** The desktop sidebar's width before anyone has changed it. */
+export const SIDEBAR_DEFAULT_WIDTH = 286;
+/**
+ * Narrow enough to give a page room, wide enough that the longest entry ("Access Management")
+ * and a count badge still fit on one line beside their icon.
+ */
+export const SIDEBAR_MIN_WIDTH = 240;
+/** Past this the sidebar stops being navigation and starts taking the page's space. */
+export const SIDEBAR_MAX_WIDTH = 400;
+/** Icons only: an entry's 44px row plus the nav's padding. */
+export const SIDEBAR_COLLAPSED_WIDTH = 76;
+/** How far one arrow key press on the resize handle moves the edge. */
+export const SIDEBAR_WIDTH_STEP = 16;
+
+const STORAGE_KEY = "sprintstart.sidebar-layout";
+
+/**
+ * The CSS variable the desktop sidebar's width lives in, on the root element: the sidebar is
+ * `fixed`, so the page leaves room for it with a margin that reads the same variable. Separate
+ * from `--app-sidebar-width`, which the mobile drawer keeps using at its fixed width.
+ */
+export const SIDEBAR_WIDTH_VAR = "--app-sidebar-desktop-width";
+
+export type SidebarLayout = { width: number; collapsed: boolean };
+
+export function clampSidebarWidth(width: number): number {
+  return Math.round(Math.min(SIDEBAR_MAX_WIDTH, Math.max(SIDEBAR_MIN_WIDTH, width)));
+}
+
+const DEFAULT_LAYOUT: SidebarLayout = { width: SIDEBAR_DEFAULT_WIDTH, collapsed: false };
+
+/**
+ * Reads the saved layout, falling back to the default for anything missing or malformed.
+ * Storage can throw outright (a private window, blocked site data), which is just "nothing saved".
+ */
+function readLayout(): SidebarLayout {
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY);
+    if (!raw) return DEFAULT_LAYOUT;
+    const saved = JSON.parse(raw) as Partial<SidebarLayout> | null;
+    return {
+      width:
+        typeof saved?.width === "number" && Number.isFinite(saved.width)
+          ? clampSidebarWidth(saved.width)
+          : SIDEBAR_DEFAULT_WIDTH,
+      collapsed: saved?.collapsed === true,
+    };
+  } catch {
+    return DEFAULT_LAYOUT;
+  }
+}
+
+/**
+ * The desktop sidebar's width and whether it is collapsed to icons, kept in `localStorage` so
+ * both are still there on the next visit.
+ *
+ * Per browser rather than per account: how wide a sidebar should be depends on the screen it is
+ * on, and the same person on a laptop and on a wide monitor wants two different answers.
+ */
+export function useSidebarLayout() {
+  const [layout, setLayout] = useState<SidebarLayout>(readLayout);
+
+  useEffect(() => {
+    try {
+      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(layout));
+    } catch {
+      // Not saved; the layout still holds for this visit.
+    }
+  }, [layout]);
+
+  const setWidth = useCallback((width: number) => {
+    setLayout((current) => ({ ...current, width: clampSidebarWidth(width) }));
+  }, []);
+
+  const setCollapsed = useCallback((collapsed: boolean) => {
+    setLayout((current) => ({ ...current, collapsed }));
+  }, []);
+
+  const toggleCollapsed = useCallback(() => {
+    setLayout((current) => ({ ...current, collapsed: !current.collapsed }));
+  }, []);
+
+  return { ...layout, setWidth, setCollapsed, toggleCollapsed };
+}
diff --git a/src/features/shortcuts/shortcuts.ts b/src/features/shortcuts/shortcuts.ts
index a00660217..25e211533 100644
--- a/src/features/shortcuts/shortcuts.ts
+++ b/src/features/shortcuts/shortcuts.ts
@@ -192,9 +192,8 @@ export const NEW_CONVERSATION_SHORTCUT: ShortcutItem = {
 };
 
 /**
- * Alt+S works the drawer the mobile header's button works. There is no desktop collapse to
- * toggle yet (#244); until then the chord is a no-op on a wide screen rather than a second
- * behaviour, because inventing one here would only have to be undone there.
+ * Alt+S toggles the sidebar that is on screen: the drawer on a small screen, the fold to
+ * icons on a wide one (#244). `SideBar` answers it.
  */
 export const SIDEBAR_TOGGLE_SHORTCUT: ShortcutItem = {
   id: "act-sidebar",
@@ -203,7 +202,6 @@ export const SIDEBAR_TOGGLE_SHORTCUT: ShortcutItem = {
   scope: "surface",
   code: "KeyS",
   altKey: true,
-  note: "small screens",
 };
 
 /**
diff --git a/src/styles/index.css b/src/styles/index.css
index 561788786..6a5cd7989 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -442,6 +442,25 @@ body {
   }
 }
 
+/* The desktop sidebar and the page's margin beside it ease together when the sidebar folds to
+   icons, and follow the pointer exactly while its edge is dragged (`SidebarResizeHandle` marks
+   the drag on the root). */
+.app-sidebar-eases {
+  transition:
+    width 300ms ease-out,
+    margin-left 300ms ease-out;
+}
+
+html[data-sidebar-resizing] .app-sidebar-eases {
+  transition: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .app-sidebar-eases {
+    transition: none;
+  }
+}
+
 .app-page-frame {
   width: 100%;
   padding-left: var(--app-page-gutter);
diff --git a/tests/unit/a11y/SideBar.a11y.test.tsx b/tests/unit/a11y/SideBar.a11y.test.tsx
index dbe1930d8..eca8ec4d3 100644
--- a/tests/unit/a11y/SideBar.a11y.test.tsx
+++ b/tests/unit/a11y/SideBar.a11y.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen, waitFor } from "@testing-library/react";
+import { render, screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { describe, it, expect, vi } from "vitest";
 import { axe } from "vitest-axe";
@@ -73,4 +73,28 @@ describe("SideBar Accessibility", () => {
       "true",
     );
   });
+
+  it("has no axe violations folded to icons either", async () => {
+    const user = userEvent.setup();
+    window.localStorage.clear();
+    const { baseElement } = render(
+      <MemoryRouter>
+        <main>
+          <SideBar />
+        </main>
+      </MemoryRouter>,
+    );
+
+    // The logo folds it: decoration for assistive technology, the resize edge is their way.
+    await user.click(
+      screen
+        .getByRole("complementary", { name: "Desktop Sidebar" })
+        .querySelector<HTMLElement>("[data-drop-phase]")!,
+    );
+
+    expect(
+      within(screen.getByRole("complementary", { name: "Desktop Sidebar" })).getByRole("separator"),
+    ).toHaveAttribute("aria-valuetext", "Collapsed");
+    expect(await axe(baseElement)).toHaveNoViolations();
+  });
 });
diff --git a/tests/unit/components/layout/SideBar.test.tsx b/tests/unit/components/layout/SideBar.test.tsx
index daff87079..8e696c1b7 100644
--- a/tests/unit/components/layout/SideBar.test.tsx
+++ b/tests/unit/components/layout/SideBar.test.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { render, screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { MemoryRouter, useNavigate } from "react-router-dom";
@@ -391,6 +391,172 @@ describe("SideBar", () => {
     });
   });
 
+  describe("desktop sidebar size", () => {
+    const signIn = () =>
+      vi.mocked(useAuthHook.useAuth).mockReturnValue({
+        status: "authenticated",
+        profile: mockProfile,
+        login: vi.fn(),
+        logout: vi.fn(),
+        refetchProfile: vi.fn(),
+      });
+    const desktop = () => screen.getByRole("complementary", { name: "Desktop Sidebar" });
+    // The width lives in a CSS variable on the root, which the page's margin reads as well.
+    const sidebarWidth = () =>
+      document.documentElement.style.getPropertyValue("--app-sidebar-desktop-width");
+    // Closed, the drawer is `inert` and hidden from the accessibility tree, so no role query finds it.
+    const mobile = () => document.querySelector<HTMLElement>('aside[aria-label="Mobile Sidebar"]')!;
+    // The logo folds and unfolds it; the resize edge's Enter is the keyboard's way.
+    const logo = () => desktop().querySelector<HTMLElement>("[data-drop-phase]")!;
+
+    it("folds to icons, keeps every entry named, and remembers it", async () => {
+      const user = userEvent.setup();
+      signIn();
+      const { unmount } = renderWithProviders(<SideBar />);
+
+      await user.click(logo());
+
+      expect(sidebarWidth()).toBe("76px");
+      // Icon only, but still a link with its name.
+      expect(within(desktop()).getByRole("link", { name: /Dashboard/ })).toBeInTheDocument();
+      // The edge stays, to pull it open again.
+      expect(within(desktop()).getByRole("separator")).toHaveAttribute(
+        "aria-valuetext",
+        "Collapsed",
+      );
+
+      unmount();
+      renderWithProviders(<SideBar />);
+      expect(sidebarWidth()).toBe("76px");
+      expect(within(desktop()).getByRole("separator")).toHaveAttribute(
+        "aria-valuetext",
+        "Collapsed",
+      );
+    });
+
+    it("folds the footer into one icon that slides the full card out", async () => {
+      const user = userEvent.setup();
+      signIn();
+      renderWithProviders(<SideBar />);
+
+      await user.click(logo());
+
+      const trigger = within(desktop()).getByRole("button", { name: "Account and project" });
+      const card = document.getElementById(trigger.getAttribute("aria-controls")!)!;
+      expect(card).toHaveAttribute("inert");
+
+      await user.click(trigger);
+      expect(trigger).toHaveAttribute("aria-expanded", "true");
+      expect(card).not.toHaveAttribute("inert");
+      expect(within(card).getByRole("button", { name: "Logout" })).toBeInTheDocument();
+      expect(within(card).getByRole("link", { name: /^Settings/ })).toBeInTheDocument();
+
+      await user.keyboard("{Escape}");
+      expect(trigger).toHaveAttribute("aria-expanded", "false");
+      expect(card).toHaveAttribute("inert");
+    });
+
+    it("leaves the shortcut chips off the folded rail, where they have no room", async () => {
+      const user = userEvent.setup();
+      signIn();
+      renderWithProviders(<SideBar />);
+      expect(within(desktop()).getAllByText("Alt + H").length).toBeGreaterThan(0);
+
+      await user.click(logo());
+
+      expect(within(desktop()).queryByText("Alt + H")).not.toBeInTheDocument();
+      // Still named with its chord, as the link's own title.
+      expect(within(desktop()).getByTitle("Dashboard (Alt + H)")).toBeInTheDocument();
+    });
+
+    it("shows an entry's name as a tooltip when it gets keyboard focus while folded", async () => {
+      const user = userEvent.setup();
+      signIn();
+      renderWithProviders(<SideBar />);
+
+      await user.click(logo());
+      within(desktop())
+        .getByRole("link", { name: /Dashboard/ })
+        .focus();
+
+      // Rendered into the page body so the nav cannot clip it.
+      await waitFor(() =>
+        expect(
+          [...document.body.children].some(
+            (child) => child.textContent === "Dashboard" && child.classList.contains("fixed"),
+          ),
+        ).toBe(true),
+      );
+    });
+
+    it("resizes from the keyboard within its limits, and remembers the width", async () => {
+      const user = userEvent.setup();
+      signIn();
+      const { unmount } = renderWithProviders(<SideBar />);
+
+      const handle = within(desktop()).getByRole("separator", { name: "Resize sidebar" });
+      expect(handle).toHaveAttribute("aria-valuenow", "286");
+
+      handle.focus();
+      await user.keyboard("{ArrowRight}{ArrowRight}");
+      expect(sidebarWidth()).toBe("318px");
+
+      await user.keyboard("{End}{ArrowRight}");
+      expect(sidebarWidth()).toBe("400px");
+
+      await user.keyboard("{Home}{ArrowLeft}");
+      expect(sidebarWidth()).toBe("240px");
+
+      unmount();
+      renderWithProviders(<SideBar />);
+      expect(within(desktop()).getByRole("separator")).toHaveAttribute("aria-valuenow", "240");
+    });
+
+    it("opens again from its edge while folded, at the width it had", async () => {
+      const user = userEvent.setup();
+      signIn();
+      renderWithProviders(<SideBar />);
+
+      const handle = within(desktop()).getByRole("separator", { name: "Resize sidebar" });
+      handle.focus();
+      await user.keyboard("{ArrowRight}{Enter}");
+      expect(sidebarWidth()).toBe("76px");
+
+      await user.keyboard("{ArrowLeft}");
+      expect(sidebarWidth()).toBe("76px");
+
+      await user.keyboard("{ArrowRight}");
+      expect(sidebarWidth()).toBe("302px");
+      expect(handle).toHaveAttribute("aria-valuetext", "302 pixels");
+
+      await user.keyboard("{Enter}{Enter}");
+      expect(sidebarWidth()).toBe("302px");
+    });
+
+    it("folds and unfolds from the logo, but not on the egg's quick repeat clicks", async () => {
+      const user = userEvent.setup();
+      signIn();
+      renderWithProviders(<SideBar />);
+      await user.click(logo());
+      expect(sidebarWidth()).toBe("76px");
+
+      // Straight after: counts towards the gravity egg, leaves the sidebar folded.
+      await user.click(logo());
+      expect(sidebarWidth()).toBe("76px");
+    });
+
+    it("leaves the mobile drawer as it was", async () => {
+      const user = userEvent.setup();
+      signIn();
+      renderWithProviders(<SideBar />);
+
+      await user.click(logo());
+
+      expect(mobile()).toHaveClass("w-[var(--app-sidebar-width)]");
+      expect(mobile().querySelector('[role="separator"]')).toBeNull();
+    });
+  });
+
   /**
    * The buddy is the other half of the chat's page, not a page of its own — one header, one
    * switch, two conversations. Before this the sidebar highlighted nothing at all on `/buddy`,
@@ -526,8 +692,9 @@ describe("SideBar", () => {
     );
   });
 
-  it("leaves Alt+S to the browser on desktop widths", () => {
+  it("folds and unfolds the desktop sidebar with Alt+S on desktop widths, not the drawer", async () => {
     mockViewport(true);
+    const user = userEvent.setup();
     vi.mocked(useAuthHook.useAuth).mockReturnValue({
       status: "authenticated",
       profile: mockProfile,
@@ -535,19 +702,22 @@ describe("SideBar", () => {
       logout: vi.fn(),
       refetchProfile: vi.fn(),
     });
+    const width = () =>
+      document.documentElement.style.getPropertyValue("--app-sidebar-desktop-width");
 
     try {
       renderWithProviders(<SideBar />);
 
-      // The drawer does not exist above `lg`, so the chord listens only below it: nothing
-      // visible would happen here, the state flip would ambush the next resize — and
-      // `fireEvent` coming back `true` says the keystroke falls through untouched, which on
-      // Firefox is the History menu rather than a swallowed no-op.
-      expect(fireEvent.keyDown(window, { code: "KeyS", altKey: true })).toBe(true);
+      await user.keyboard("{Alt>}s{/Alt}");
+      expect(width()).toBe("76px");
+      // The drawer is not on screen above `lg`, so its state must not flip behind the scenes.
       expect(screen.getByRole("button", { name: "Open sidebar" })).toHaveAttribute(
         "aria-expanded",
         "false",
       );
+
+      await user.keyboard("{Alt>}s{/Alt}");
+      expect(width()).toBe("286px");
     } finally {
       mockViewport(false);
     }
diff --git a/tests/unit/features/shortcuts/KeyboardShortcutsModal.test.tsx b/tests/unit/features/shortcuts/KeyboardShortcutsModal.test.tsx
index f58283f9f..97ef68f11 100644
--- a/tests/unit/features/shortcuts/KeyboardShortcutsModal.test.tsx
+++ b/tests/unit/features/shortcuts/KeyboardShortcutsModal.test.tsx
@@ -118,7 +118,6 @@ describe("KeyboardShortcutsModal", () => {
     renderModal();
 
     expect(within(rowFor("Jump to the message box")).getByText(/in Chat/)).toBeInTheDocument();
-    expect(within(rowFor("Toggle sidebar")).getByText(/small screens/)).toBeInTheDocument();
   });
 
   it("documents the chords the surfaces answer, not only the global ones", () => {