From 08bfce76fcf8073f152926a75f37e5f61afc59e3 Mon Sep 17 00:00:00 2001
From: "bert.hausmans" <bert@hausmans.nl>
Date: Wed, 3 Jun 2026 03:50:50 +0200
Subject: [PATCH] docs(storybook): MobileDrawer story for mobile-shell-parity
 verification
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

MOBILE-SHELL-PARITY subtask 5. Automated visual evidence via Playwright-CT is
not feasible — the CT harness loads only Vuetify styles (no Tailwind / PrimeVue
theme / PrimeVue plugin), so an AppSidebar screenshot renders unstyled. Add a
MobileDrawer Storybook story instead (Storybook DOES register PrimeVue + load
Tailwind via preview.ts) as the manual visual-verification target for all three
defects: single non-overlapping close X, expanded brand row/logo, and the
bottom-anchored WorkspaceSwitcher. Narrow the window <1024px to mount the drawer
(no viewport addon in this repo's Storybook).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../layout/AppSidebar.stories.ts              | 49 +++++++++++++++++++
 1 file changed, 49 insertions(+)

diff --git a/apps/app/src/components-v2/layout/AppSidebar.stories.ts b/apps/app/src/components-v2/layout/AppSidebar.stories.ts
index 1800e2e1..f4eb9e83 100644
--- a/apps/app/src/components-v2/layout/AppSidebar.stories.ts
+++ b/apps/app/src/components-v2/layout/AppSidebar.stories.ts
@@ -68,3 +68,52 @@ export const Collapsed: Story = {
     `,
   }),
 }
+
+/**
+ * Mobile (< lg) drawer, open — MOBILE-SHELL-PARITY visual verification target.
+ *
+ * Verify against the desktop sidebar:
+ *   - defect 2: a SINGLE close control (X, "Sluit menu") at the top-right of
+ *     the brand row, NOT overlapping the logo. PrimeVue's default header X is
+ *     force-hidden (`header: '!hidden'`), so there must be no second X.
+ *   - defect 1: the brand row renders EXPANDED (logo + "Crewli" wordmark +
+ *     Beta pill) regardless of the desktop collapse state.
+ *   - defect 3: the WorkspaceSwitcher is anchored at the BOTTOM of the drawer,
+ *     fully visible (not clipped).
+ *
+ * The Drawer mounts only when isMobile (viewport < 1024px). This repo's
+ * Storybook has no viewport addon, so narrow the browser window to < 1024px
+ * (≈ 375px) to render the drawer. The parameters.viewport hint below takes
+ * effect if @storybook/addon-viewport is later added to .storybook/main.ts.
+ */
+export const MobileDrawer: Story = {
+  parameters: {
+    viewport: {
+      viewports: {
+        mobile375: { name: 'Mobile 375', styles: { width: '375px', height: '720px' } },
+      },
+      defaultViewport: 'mobile375',
+    },
+  },
+  decorators: [
+    withPinia(() => {
+      const auth = useAuthStore()
+
+      auth.user = userFixture
+      auth.organisations = [orgA]
+
+      const shellUi = useShellUiStore()
+
+      shellUi.sidebarCollapsed = false
+      shellUi.mobileOpen = true
+    }),
+  ],
+  render: () => ({
+    components: { AppSidebar },
+    template: `
+      <div class="h-[720px]">
+        <AppSidebar />
+      </div>
+    `,
+  }),
+}