bert.hausmans/crewli
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: explicit non-overlapping mobile drawer close control

Browse Source 
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>
This commit is contained in:
bert.hausmans
2026-06-03 03:35:25 +02:00
parent eb2104ada4
commit b16387b2fb
2 changed files with 22 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
apps/app/src/components-v2/layout/AppSidebar.vue
View File

@@ -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 />

15
apps/app/src/components-v2/layout/SidebarHeader.vue
View File

@@ -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>