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

fix: impersonation banner overlapping sidebar and navbar

Browse Source 
The previous paddingTop on a wrapper div didn't affect the Vuexy
layout's fixed-position sidebar or sticky navbar. Replace with
scoped :deep() CSS overrides that shift both elements down 48px
when impersonation is active.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
bert.hausmans
2026-04-16 02:58:27 +02:00
parent fcab30e5e8
commit 89645eab60
1 changed files with 52 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
apps/app/src/layouts/components/DefaultLayoutWithVerticalNav.vue
View File

@@ -49,53 +49,65 @@ import { VerticalNavLayout } from '@layouts'
</script>
<template>
<div :style="{ paddingTop: impersonationStore.isImpersonating ? '48px' : '0' }">
<VerticalNavLayout :nav-items="navItems">
<!-- 👉 Organisation switcher -->
<template #before-vertical-nav-items>
<OrganisationSwitcher />
<div class="vertical-nav-items-shadow" />
</template>
<div :class="{ 'impersonation-active': impersonationStore.isImpersonating }">
<VerticalNavLayout :nav-items="navItems">
<!-- 👉 Organisation switcher -->
<template #before-vertical-nav-items>
<OrganisationSwitcher />
<div class="vertical-nav-items-shadow" />
</template>
<!-- 👉 navbar (match Vuexy full-version: search + actions; search flex-grows) -->
<template #navbar="{ toggleVerticalOverlayNavActive }">
<div
class="d-flex h-100 align-center w-100"
style="min-inline-size: 0;"
>
<IconBtn
id="vertical-nav-toggle-btn"
class="ms-n3 d-lg-none flex-shrink-0"
@click="toggleVerticalOverlayNavActive(true)"
<!-- 👉 navbar (match Vuexy full-version: search + actions; search flex-grows) -->
<template #navbar="{ toggleVerticalOverlayNavActive }">
<div
class="d-flex h-100 align-center w-100"
style="min-inline-size: 0;"
>
<VIcon
size="26"
icon="tabler-menu-2"
/>
</IconBtn>
<IconBtn
id="vertical-nav-toggle-btn"
class="ms-n3 d-lg-none flex-shrink-0"
@click="toggleVerticalOverlayNavActive(true)"
>
<VIcon
size="26"
icon="tabler-menu-2"
/>
</IconBtn>
<NavSearchBar class="flex-grow-1 ms-lg-n3 min-w-0" />
<NavSearchBar class="flex-grow-1 ms-lg-n3 min-w-0" />
<NavbarThemeSwitcher class="flex-shrink-0 me-2" />
<NavbarShortcuts class="flex-shrink-0" />
<NavBarNotifications class="flex-shrink-0 me-1" />
<UserProfile class="flex-shrink-0" />
</div>
</template>
<NavbarThemeSwitcher class="flex-shrink-0 me-2" />
<NavbarShortcuts class="flex-shrink-0" />
<NavBarNotifications class="flex-shrink-0 me-1" />
<UserProfile class="flex-shrink-0" />
</div>
</template>
<!-- 👉 Impersonation Banner -->
<ImpersonationBanner />
<!-- 👉 Impersonation Banner -->
<ImpersonationBanner />
<!-- 👉 Pages -->
<slot />
<!-- 👉 Pages -->
<slot />
<!-- 👉 Footer -->
<template #footer>
<Footer />
</template>
<!-- 👉 Footer -->
<template #footer>
<Footer />
</template>
<!-- 👉 Customizer -->
<!-- <TheCustomizer /> -->
</VerticalNavLayout>
<!-- 👉 Customizer -->
<!-- <TheCustomizer /> -->
</VerticalNavLayout>
</div>
</template>
<style scoped>
/* Push sidebar, navbar, and content below the fixed 48px impersonation banner */
.impersonation-active :deep(.layout-vertical-nav) {
inset-block-start: 48px;
block-size: calc(100% - 48px);
}
.impersonation-active :deep(.layout-navbar-sticky .layout-navbar) {
inset-block-start: 48px;
}
</style>