From b16387b2fbf0719afc5932615361bf7bd7c775fe Mon Sep 17 00:00:00 2001
From: "bert.hausmans" <bert@hausmans.nl>
Date: Wed, 3 Jun 2026 03:35:25 +0200
Subject: [PATCH] fix: explicit non-overlapping mobile drawer close control

MOBILE-SHELL-PARITY defect 2. PrimeVue's default drawer header close-X was
leaking through 'header: hidden' (non-important 'hidden' lost to PrimeVue's
base .p-drawer-header display in stylesheet order) and overlapping the brand
row. Force-hide it with the important variant '!hidden' (matching the file's
existing !w-64), and provide the mobile close affordance in SidebarHeader's
brand row: on mobile the top-right control renders an X ('Sluit menu') and
closes the drawer (handleCollapseClick already calls setMobileOpen(false) on
mobile), mirroring the slot the desktop sidebar uses for its collapse chevron.
Single, non-overlapping close control; showCloseIcon is left at its default.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 apps/app/src/components-v2/layout/AppSidebar.vue  | 12 +++++++++++-
 .../src/components-v2/layout/SidebarHeader.vue    | 15 +++++++++++----
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/apps/app/src/components-v2/layout/AppSidebar.vue b/apps/app/src/components-v2/layout/AppSidebar.vue
index 03a7d061..f7680f35 100644
--- a/apps/app/src/components-v2/layout/AppSidebar.vue
+++ b/apps/app/src/components-v2/layout/AppSidebar.vue
@@ -114,6 +114,16 @@ const mobileVisible = computed<boolean>({
     The children are intentionally repeated (not factored into a slot or
     render-fn) — the 3-component block is short and the duplication is
     preferable to the indirection of a dynamic component or slot wiring.
+
+    Close control (MOBILE-SHELL-PARITY defect 2): PrimeVue's default header
+    close-X is force-hidden via `header: '!hidden'`. Plain `hidden` lost to
+    PrimeVue's base `.p-drawer-header` display in stylesheet order, so the
+    default X leaked through and overlapped the brand row (the reported
+    defect). The important variant (`!hidden`, matching this file's existing
+    `!w-64`) wins. The mobile close affordance instead lives in
+    SidebarHeader's brand row, which renders an X ("Sluit menu") on mobile —
+    a single, non-overlapping control in the same top-right slot the desktop
+    sidebar uses for its collapse chevron. No duplicate, no overlap.
   -->
   <!-- mobile -->
   <Drawer
@@ -123,7 +133,7 @@ const mobileVisible = computed<boolean>({
     class="!w-64"
     :pt="{
       content: { class: 'flex flex-col p-0 overflow-hidden h-full' },
-      header: { class: 'hidden' },
+      header: { class: '!hidden' },
     }"
   >
     <SidebarHeader />
diff --git a/apps/app/src/components-v2/layout/SidebarHeader.vue b/apps/app/src/components-v2/layout/SidebarHeader.vue
index 571b1418..a1bd544e 100644
--- a/apps/app/src/components-v2/layout/SidebarHeader.vue
+++ b/apps/app/src/components-v2/layout/SidebarHeader.vue
@@ -109,19 +109,26 @@ function handleCollapseClick(): void {
       </span>
 
       <!--
-        Expanded-only collapse chevron — pushed to the right via ms-auto.
+        Expanded-only top-right brand-row control — pushed right via ms-auto.
         Sits to the RIGHT of the wordmark + badge, so its presence/absence
-        also doesn't affect the logo's left position.
+        doesn't affect the logo's left position.
+
+        Desktop (>=lg): collapse chevron (◀) → toggleSidebar().
+        Mobile (<lg): the drawer has no icon-rail collapse mode, so this same
+        control becomes an explicit CLOSE (✕ "Sluit menu") → setMobileOpen(false)
+        (handleCollapseClick already branches on isMobile). This is the single
+        mobile close affordance (MOBILE-SHELL-PARITY defect 2); PrimeVue's
+        default drawer X is force-hidden in AppSidebar so the two never overlap.
       -->
       <button
         v-if="!shell.sidebarCollapsed"
         class="ms-auto w-7 h-7 border-0 bg-transparent text-[var(--p-text-muted-color)] rounded-[var(--p-border-radius)] inline-flex items-center justify-center transition-[background,color] duration-150 hover:bg-[var(--p-content-hover-background)] hover:text-[var(--p-text-color)] cursor-pointer"
-        aria-label="Collapse sidebar"
+        :aria-label="isMobile ? 'Sluit menu' : 'Collapse sidebar'"
         type="button"
         @click="handleCollapseClick"
       >
         <Icon
-          name="tabler-chevron-left"
+          :name="isMobile ? 'tabler-x' : 'tabler-chevron-left'"
           :size="16"
         />
       </button>