diff --git a/apps/app/src/components-v2/layout/SidebarHeader.vue b/apps/app/src/components-v2/layout/SidebarHeader.vue index a1bd544e..eaa13e0e 100644 --- a/apps/app/src/components-v2/layout/SidebarHeader.vue +++ b/apps/app/src/components-v2/layout/SidebarHeader.vue @@ -50,6 +50,7 @@ * utility at this granularity, per RFC §7.4 last-resort). */ +import { computed } from 'vue' import { breakpointsTailwind, useBreakpoints } from '@vueuse/core' import Icon from '@/components/Icon.vue' import { useShellUiStore } from '@/stores/useShellUiStore' @@ -60,6 +61,23 @@ const shell = useShellUiStore() // v-if="isMobile" guard so both components agree on the desktop/mobile boundary. const isMobile = useBreakpoints(breakpointsTailwind).smaller('lg') +/** + * Effective collapse state for rendering (MOBILE-SHELL-PARITY defect 1). + * + * The mobile drawer is ALWAYS full-width (`!w-64`), and AppSidebar forces + * SidebarNav + WorkspaceSwitcher to `:collapsed="false"` inside it. But this + * header read `shell.sidebarCollapsed` directly, so if a user had collapsed + * the sidebar on desktop, the mobile drawer rendered a *collapsed* brand row + * (logo-only, no wordmark, plus the expand-chevron row) inside a 256px panel — + * mismatched against the expanded nav/switcher and reading as the reported + * "logo placement is incorrect" defect. + * + * effectiveCollapsed gates every collapse-dependent branch below: on desktop + * it honours shell.sidebarCollapsed; on mobile it is always false, so the + * drawer header matches the expanded nav/switcher exactly. + */ +const effectiveCollapsed = computed(() => !isMobile.value && shell.sidebarCollapsed) + function handleCollapseClick(): void { if (isMobile.value) { // Mobile: the Drawer is the active sidebar — close it @@ -95,14 +113,14 @@ function handleCollapseClick(): void { Crewli Beta @@ -121,7 +139,7 @@ function handleCollapseClick(): void { default drawer X is force-hidden in AppSidebar so the two never overlap. -->