DashboardNavbarToggle

Usage

This component is used internally in the #toggle slot of the DashboardNavbar component. It is only visible on mobile and will open the parent DashboardPanel as a Slideover.

You can pass any prop of the Button component to override the style or size, they will be forwarded.

<template>
  <UDashboardPage>
    <UDashboardPanel>
      <UDashboardNavbar title="Inbox" />
    </UDashboardPanel>

    <UDashboardPanel>
      <UDashboardNavbar>
        <template #toggle>
          <UDashboardNavbarToggle icon="i-heroicons-x-mark" />
        </template>
      </UDashboardNavbar>
    </UDashboardPanel>
  </UDashboardPage>
</template>

Its icon defaults to i-heroicons-bars-3-20-solid from appConfig.ui.icons.menu. You can override it with the icon prop or globally in your app.config.ts.