How to add a persistent Navbar on top of all DashboardPanels inside of a DashboardGroup?

[Onelvis]

Description

Hello there! thank you all for this awesome library! I'm using the pro version to leverage the Dashboard components, which have been very useful so far, but I'm currently in need of something like this:

The idea is to have a NavBar on top of all DashboardPanels across all pages. As far as I can understand the documentation, both DashboardNavbar and DashboardToolbar can only be used inside of a DashboardPanel, but would it be possible to somehow achieve this without breaking the way that the Dashboard components interact with each other?

In version 2 I kinda went around by just nesting a DashboardPanel inside of a main one (Placed in the layout file) which the Navbar inside it, and then I placed the <slot /> for the rest of the content, which could be either 1 or more DashboardPanels.

Thanks in advance!

[benjamincanac]

You can do so by using two wrapping divs:

<template>
  <div class="flex flex-col flex-1">
    <UDashboardNavbar title="Navbar" />

    <div class="flex flex-1">
      <UDashboardPanel id="inbox-1" :default-size="25" :min-size="20" :max-size="30" resizable>
        <template #header>
          <UDashboardNavbar title="Inbox">
            <template #leading>
              <UDashboardSidebarCollapse />
            </template>
          </UDashboardNavbar>
        </template>
      </UDashboardPanel>

      <UDashboardPanel id="inbox-2" class="hidden lg:flex" />
    </div>
  </div>
</template>

[Onelvis]

Why I didn't think of that?? That worked wonderfully, thank you so much!