Nerdnum
Nerdnum
PostsComments
NNuxt
Created by Nerdnum on 8/17/2024 in #❓・help
Close Nuxt-UI Header Panel after clicking on link
I am using Nuxt-UI Pro. I provide a NavigationTree (using "label" and "to" in the links tree) to the panel slot of the Header component. When the screen with is less than 1024px, as expected, the NavigationTree is displayed when one clicks on the hamburger icon. When one clicks on one of the links in the tree, the application navigates to the new URL, but it does not close the panel as expected. One has to click on the 'x' to close the panel. This differs from the behaviour of the Nuxt-ui documentation site (https://ui.nuxt.com/pro/components/header), which closes the panel and does the navigation. I cannot find anything about closing the panel with code in the documentation. How can I close the panel when a link is clicked? My config and component template are below. 
"dependencies": {
    "@nuxt/ui": "^2.18.4",
    "@nuxt/ui-pro": "^1.4.1",
    "@pinia/nuxt": "^0.5.3",
    "nuxt": "^3.12.4",
    "pinia": "^2.2.1",
    "voca": "^1.4.1",
    "vue": "latest"
  }
"dependencies": {
    "@nuxt/ui": "^2.18.4",
    "@nuxt/ui-pro": "^1.4.1",
    "@pinia/nuxt": "^0.5.3",
    "nuxt": "^3.12.4",
    "pinia": "^2.2.1",
    "voca": "^1.4.1",
    "vue": "latest"
  }
<template>
  <UHeader>
    <template #logo>
      <Logo url="/images/an_image.png" class="w-auto" />
    </template>
    <template #panel>
      <UNavigationTree :links="navigation" />
    </template>
  </UHeader>
  <UMain>
    <UPage>
      <template #left>
        <ComponentNavigator :navigation="navigation" />
      </template>
      <ComponentEditor :componentSlug="componentSlug" />
    </UPage>
  </UMain>
</template>
<template>
  <UHeader>
    <template #logo>
      <Logo url="/images/an_image.png" class="w-auto" />
    </template>
    <template #panel>
      <UNavigationTree :links="navigation" />
    </template>
  </UHeader>
  <UMain>
    <UPage>
      <template #left>
        <ComponentNavigator :navigation="navigation" />
      </template>
      <ComponentEditor :componentSlug="componentSlug" />
    </UPage>
  </UMain>
</template>
20 replies