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> </script>
<template> <template>
<div :style="{ paddingTop: impersonationStore.isImpersonating ? '48px' : '0' }"> <div :class="{ 'impersonation-active': impersonationStore.isImpersonating }">
<VerticalNavLayout :nav-items="navItems"> <VerticalNavLayout :nav-items="navItems">
<!-- 👉 Organisation switcher --> <!-- 👉 Organisation switcher -->
<template #before-vertical-nav-items> <template #before-vertical-nav-items>
<OrganisationSwitcher /> <OrganisationSwitcher />
<div class="vertical-nav-items-shadow" /> <div class="vertical-nav-items-shadow" />
</template> </template>
<!-- 👉 navbar (match Vuexy full-version: search + actions; search flex-grows) --> <!-- 👉 navbar (match Vuexy full-version: search + actions; search flex-grows) -->
<template #navbar="{ toggleVerticalOverlayNavActive }"> <template #navbar="{ toggleVerticalOverlayNavActive }">
<div <div
class="d-flex h-100 align-center w-100" class="d-flex h-100 align-center w-100"
style="min-inline-size: 0;" style="min-inline-size: 0;"
>
<IconBtn
id="vertical-nav-toggle-btn"
class="ms-n3 d-lg-none flex-shrink-0"
@click="toggleVerticalOverlayNavActive(true)"
> >
<VIcon <IconBtn
size="26" id="vertical-nav-toggle-btn"
icon="tabler-menu-2" class="ms-n3 d-lg-none flex-shrink-0"
/> @click="toggleVerticalOverlayNavActive(true)"
</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" /> <NavbarThemeSwitcher class="flex-shrink-0 me-2" />
<NavbarShortcuts class="flex-shrink-0" /> <NavbarShortcuts class="flex-shrink-0" />
<NavBarNotifications class="flex-shrink-0 me-1" /> <NavBarNotifications class="flex-shrink-0 me-1" />
<UserProfile class="flex-shrink-0" /> <UserProfile class="flex-shrink-0" />
</div> </div>
</template> </template>
<!-- 👉 Impersonation Banner --> <!-- 👉 Impersonation Banner -->
<ImpersonationBanner /> <ImpersonationBanner />
<!-- 👉 Pages --> <!-- 👉 Pages -->
<slot /> <slot />
<!-- 👉 Footer --> <!-- 👉 Footer -->
<template #footer> <template #footer>
<Footer /> <Footer />
</template> </template>
<!-- 👉 Customizer --> <!-- 👉 Customizer -->
<!-- <TheCustomizer /> --> <!-- <TheCustomizer /> -->
</VerticalNavLayout> </VerticalNavLayout>
</div> </div>
</template> </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>