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>
+    `,
+  }),
+}