feat(layout): migrate to full-width topbar with mobile drawer navigation

Move topbar outside the grid container as a standalone sticky header
(Shopify/Stripe pattern). Sidebar and icon bar use position:sticky
relative to topbar height. Mobile uses drawer pattern with backdrop,
focus trap, ESC close, and scroll lock. Tenant branding moved from
sidebar header into the topbar.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

web/js/components/app-toggle-sidebar.js

@@ -133,10 +133,123 @@ export function initSidebarToggle(root = document, options = {}) {
     applyHidden(hiddenStored === '1', { persist: false });
   }
 
+  // ── Mobile drawer helpers ──
+  const mobileQuery = window.matchMedia('(max-width: 767px)');
+  const isMobileViewport = () => mobileQuery.matches;
+
+  const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+  const isDrawerOpen = () => rootEl.classList.contains('drawer-open');
+
+  const openDrawer = () => {
+    rootEl.classList.add('drawer-open');
+    const hamburger = document.querySelector('.app-topbar-hamburger');
+    if (hamburger) {
+      hamburger.setAttribute('aria-label', hamburger.dataset.closeLabel || 'Close navigation');
+      hamburger.setAttribute('aria-expanded', 'true');
+    }
+  };
+
+  const closeDrawer = () => {
+    rootEl.classList.remove('drawer-open');
+    const hamburger = document.querySelector('.app-topbar-hamburger');
+    if (hamburger) {
+      hamburger.setAttribute('aria-label', hamburger.dataset.openLabel || 'Open navigation');
+      hamburger.setAttribute('aria-expanded', 'false');
+      hamburger.focus();
+    }
+  };
+
+  const toggleDrawer = () => {
+    if (isDrawerOpen()) {
+      closeDrawer();
+    } else {
+      openDrawer();
+    }
+  };
+
   const cleanupFns = [];
+
+  // ── Focus trap (active only when drawer open) ──
+  const onFocusTrap = (event) => {
+    if (!isDrawerOpen() || event.key !== 'Tab') {
+      return;
+    }
+    const drawerElements = [
+      ...document.querySelectorAll('.app-topbar-hamburger'),
+      ...aside.querySelectorAll(FOCUSABLE),
+      ...document.querySelectorAll('.aside-icon-bar ' + FOCUSABLE),
+    ];
+    const focusable = drawerElements.filter((el) => el.offsetParent !== null);
+    if (!focusable.length) {
+      return;
+    }
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  };
+  document.addEventListener('keydown', onFocusTrap);
+  cleanupFns.push(() => document.removeEventListener('keydown', onFocusTrap));
+
+  // ── ESC to close drawer ──
+  const onEscDrawer = (event) => {
+    if (event.key === 'Escape' && isDrawerOpen()) {
+      event.preventDefault();
+      closeDrawer();
+    }
+  };
+  document.addEventListener('keydown', onEscDrawer);
+  cleanupFns.push(() => document.removeEventListener('keydown', onEscDrawer));
+
+  // ── Backdrop click to close drawer ──
+  const onBackdropClick = (event) => {
+    if (isDrawerOpen() && event.target.classList.contains('app-drawer-backdrop')) {
+      closeDrawer();
+    }
+  };
+  document.addEventListener('click', onBackdropClick);
+  cleanupFns.push(() => document.removeEventListener('click', onBackdropClick));
+
+  // ── matchMedia listener: sync state on viewport change ──
+  const onViewportChange = (mql) => {
+    if (!mql.matches) {
+      // Crossed to desktop — close drawer, restore desktop sidebar state
+      if (isDrawerOpen()) {
+        closeDrawer();
+      }
+      const storedCollapsed = readStored();
+      if (storedCollapsed === '1' || storedCollapsed === '0') {
+        applyState(storedCollapsed === '1', { persist: false });
+      }
+      const storedHidden = readHiddenStored();
+      if (storedHidden === '1' || storedHidden === '0') {
+        applyHidden(storedHidden === '1', { persist: false });
+      }
+    } else {
+      // Crossed to mobile — remove desktop sidebar classes that would interfere
+      rootEl.classList.remove('sidebar-collapsed', 'sidebar-hidden');
+      aside.classList.remove('is-collapsed', 'is-hidden');
+      if (container instanceof HTMLElement) {
+        container.classList.remove('is-sidebar-collapsed', 'is-sidebar-hidden');
+      }
+    }
+  };
+  mobileQuery.addEventListener('change', onViewportChange);
+  cleanupFns.push(() => mobileQuery.removeEventListener('change', onViewportChange));
+
   buttons.forEach((button) => {
     const onClick = (event) => {
       event.preventDefault();
+      if (isMobileViewport()) {
+        toggleDrawer();
+        return;
+      }
       const action = (button.dataset.sidebarAction || '').toLowerCase();
       if (action === 'visibility') {
         controller.toggleVisibility({ persist: true });
@@ -152,6 +265,21 @@ export function initSidebarToggle(root = document, options = {}) {
     const detail = event.detail || {};
     const action = detail.action;
     const persist = detail.persist ?? false;
+    if (isMobileViewport()) {
+      if (action === 'show' || action === 'open') {
+        openDrawer();
+        return;
+      }
+      if (action === 'hide' || action === 'close') {
+        closeDrawer();
+        return;
+      }
+      if (action === 'toggle' || action === 'toggle-visibility') {
+        toggleDrawer();
+        return;
+      }
+      return;
+    }
     if (action === 'open') { controller.open({ persist }); }
     if (action === 'close') { controller.close({ persist }); }
     if (action === 'toggle') { controller.toggle({ persist }); }
@@ -163,6 +291,9 @@ export function initSidebarToggle(root = document, options = {}) {
   cleanupFns.push(() => document.removeEventListener('app:sidebar', onSidebarEvent));
 
   const onShortcut = (event) => {
+    if (isMobileViewport()) {
+      return;
+    }
     if (!(event.metaKey || event.ctrlKey)) {
       return;
     }
@@ -183,6 +314,9 @@ export function initSidebarToggle(root = document, options = {}) {
 
   const destroy = () => {
     cleanupFns.forEach((cleanup) => cleanup());
+    if (isDrawerOpen()) {
+      rootEl.classList.remove('drawer-open');
+    }
     delete aside.dataset.sidebarToggleBound;
     delete aside._sidebarToggleApi;
   };