Nuxt•5mo ago

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>

10 Replies

johntanzer•5mo ago

You probably are using ssr?

NerdnumOP•5mo ago

Yes, I do. Not because I really badly need it, but because it comes included with nuxt. How does this impact the panel?

johntanzer•5mo ago

Try with ssr false and let me know.

Cue•5mo ago

SSR true/false is irrelevant. Nuxt UI/Pro is designed for Nuxt. I can't reproduce. When the route changes, it closes. To verify the state does change, you can add the following, isHeaderDialogOpen should be false when the route changes:

const { isHeaderDialogOpen } = useUIState()

watch(isHeaderDialogOpen, (isHeaderDialogOpen) => console.log({ isHeaderDialogOpen }))

const { isHeaderDialogOpen } = useUIState()

watch(isHeaderDialogOpen, (isHeaderDialogOpen) => console.log({ isHeaderDialogOpen }))

johntanzer•5mo ago

hey @cuebit it does make a diffrence there are a few components that do not work properly in ssr true... did you test it with ssr: false and true? @Nerdnum let me know

Cue•5mo ago

@johntanzer I'd be curious to know why the components in question, Header and NavigationTree, would work with SSR enabled for some, and not for others?

johntanzer•5mo ago

Not sure what you mean. Not sure how you are using. Want to provide a repro? Nuxt ui pro has a composable called use scroll spy that doesn’t work on ssr properly A lot of their header examples use this composbale when there are #’s There could be a million reasons.

NerdnumOP•5mo ago

@johntanzer , I tested with the code you proposed. When I click on the hamburger icon, it logs { isHeaderDialogOpen : true}. The state only changes to { isHeaderDialogOpen: false } when I click on the X. It remains open when I click on one of the menu items. My navigation tree populates with data it retrieves from a backend, so providing working code that I can share is not trivial, but will put something together.

johntanzer•5mo ago

great. Feel free to open an issue on nuxt ui and tag me will try have a look

NerdnumOP•4mo ago

@johntanzer can you access this https://stackblitz.com/~/github.com/nerdnum/projectx-frontend-v3 ? Just want to make sure the link works before I open an issue BTW, ssr: false does not make a difference

Gaming

Programming

Close Nuxt-UI Header Panel after clicking on link