-
Notifications
You must be signed in to change notification settings - Fork 963
Closed
Closed
Copy link
Labels
triageAwaiting initial review and prioritizationAwaiting initial review and prioritization
Description
Environment
- Nuxt 4
- @nuxt/ui latest
Reproduction
Minimal reproduction
<template>
<UHeader
title="Travel Now"
toggle-side="left"
mode ="slideover"
:toggle="{
color: 'primary',
variant: 'subtle',
}",
:menu="{
side: 'left',
}"
class="text-white"
>
<template #title>
<Logo class="h-8 w-auto" />
</template>
<template #right>
<UColorModeButton />
<UButton to="" color="neutral" variant="ghost" >
Add place
</UButton>
</template>
<template #body>
<UNavigationMenu :items="items" orientation="vertical" class="-mx-2.5 w-50 max-h-80" color="success" />
</template>
</UHeader>
<UMain>
<slot />
</UMain>
<UFooter />
</template>
### Describe the bug
1. Right-side header buttons are duplicated inside the slideover panel
2. Impossible to reduce slideover height / make it start below header (always full-screen from top=0)
**Bug 1 – Duplicated buttons**
All content from the `#right` slot is automatically copied into the slideover body when it opens, even though I only put my navigation in `#body`.
**Bug 2 – Cannot control height / offset**
No matter what I try:
- `:menu="{ ui: { content: '...' } }"`
- `app.config.ts` header variants
- `#content` slot with custom classes
.
### Additional context
The slideover always goes from `top: 0` to bottom of screen (full viewport height) and **ignores** any `mt-[--ui-header-height]`, `h-[calc(...)]`, `max-h-*`, etc.
I want the slideover to start **directly below the header** (so the header stays visible) and take only the remaining screen height
### Logs
```shell-script
Metadata
Metadata
Assignees
Labels
triageAwaiting initial review and prioritizationAwaiting initial review and prioritization