Skip to content

UHeader mode="slideover" + toggle-side="left" + :menu="{ side: 'left' }" causes two bugs: #5602

@Satochi001

Description

@Satochi001

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

No one assigned

    Labels

    triageAwaiting initial review and prioritization

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions