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

fix: move impersonation banner inside layout content flow

Browse Source 
Replace position:fixed VSystemBar + fragile :deep() CSS overrides
with a normal-flow div inside the Vuexy content area. The banner
renders in VerticalNavLayout's default slot (layout-page-content)
so it sits naturally below the navbar without fighting the layout
system. Sidebar and navbar are no longer affected.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
bert.hausmans
2026-04-16 03:17:13 +02:00
parent dc886fed46
commit 0221e7f6d3
2 changed files with 52 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -49,70 +49,51 @@ import { VerticalNavLayout } from '@layouts'
</script>
<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>
<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;"
<!-- 👉 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)"
>
<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>
<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>
</div>
<!-- 👉 Customizer -->
<!-- <TheCustomizer /> -->
</VerticalNavLayout>
</template>
<style scoped>
/*
* Push sidebar, navbar, and content below the fixed 48px impersonation banner.
* !important is needed because VerticalNavLayout's unscoped styles are injected
* after this component's scoped styles (child renders after parent), so equal-
* specificity rules from Vuexy win without it.
*/
.impersonation-active :deep(.layout-vertical-nav) {
inset-block-start: 48px !important;
block-size: calc(100% - 48px) !important;
}
.impersonation-active :deep(.layout-navbar) {
inset-block-start: 48px !important;
}
</style>