DashboardSidebarToggle

A Button to toggle the sidebar on mobile.

Usage

The DashboardSidebarToggle component is used by the DashboardNavbar and DashboardSidebar components.

It is automatically displayed on mobile to toggle the sidebar, you don't have to add it manually.

<template>
  <PDashboardSidebarToggle />
</template>

It extends the Button component, so you can pass any property such as color, variant, size, etc.

<template>
  <PDashboardSidebarToggle variant="subtle" />
</template>

The button defaults to color="neutral" and variant="ghost".

Examples

Within `toggle` slot

Even though this component is automatically displayed on mobile, you can use the toggle slot of the DashboardNavbar and DashboardSidebar components to customize the button.

<template>
  <PDashboardGroup>
    <PDashboardSidebar>
      <template #toggle>
        <PDashboardSidebarToggle variant="subtle" />
      </template>
    </PDashboardSidebar>

    <slot />
  </PDashboardGroup>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'dashboard'
});
</script>

<template>
  <PDashboardPanel>
    <template #header>
      <PDashboardNavbar title="Home">
        <template #toggle>
          <PDashboardSidebarToggle variant="subtle" />
        </template>
      </PDashboardNavbar>
    </template>
  </PDashboardPanel>
</template>

When using the toggle-side prop of the DashboardSidebar and DashboardNavbar components, the button will be displayed on the specified side.

API

Props

Prop	Default	Type
`as`	`'button'`	`any` The element or component this component should render as when not a link.
`class`		`any`
`icon`		`any` Display an icon based on the `leading` and `trailing` props.
`leadingIcon`		`any` Display an icon on the left side.
`trailingIcon`		`any` Display an icon on the right side.
`loadingIcon`	`appConfig.ui.icons.loading`	`any` The icon when the `loading` prop is `true`.
`color`	`'neutral'`	`"primary" \| "secondary" \| "success" \| "info" \| "warning" \| "error" \| "neutral"`
`variant`	`'ghost'`	`"solid" \| "outline" \| "soft" \| "subtle" \| "ghost" \| "link"`
`autofocus`		`false \| true \| "true" \| "false"`
`disabled`		`boolean`
`name`		`string`
`type`	`'button'`	`"button" \| "submit" \| "reset"` The type of the button when not a link.
`label`		`string`
`activeColor`		`"primary" \| "secondary" \| "success" \| "info" \| "warning" \| "error" \| "neutral"`
`activeVariant`		`"solid" \| "outline" \| "soft" \| "subtle" \| "ghost" \| "link"`
`size`	`'md'`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`
`square`		`boolean` Render the button with equal padding on all sides.
`block`		`boolean` Render the button full width.
`loadingAuto`		`boolean` Set loading state automatically based on the `@click` promise state
`avatar`		`AvatarProps` Display an avatar on the left side.
`leading`		`boolean` When `true`, the icon will be displayed on the left side.
`trailing`		`boolean` When `true`, the icon will be displayed on the right side.
`loading`		`boolean` When `true`, the loading icon will be displayed.
`side`	`'left'`	`"left" \| "right"` The side of the sidebar to toggle.
`ui`		`{ base?: any; }`

This component also supports all native <button> HTML attributes.

Theme

app.config.ts

export default defineAppConfig({
  ui: {
    dashboardSidebarToggle: {
      base: 'lg:hidden',
      variants: {
        side: {
          left: '',
          right: ''
        }
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from 'pohon-ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        dashboardSidebarToggle: {
          base: 'lg:hidden',
          variants: {
            side: {
              left: '',
              right: ''
            }
          }
        }
      }
    })
  ]
})

Changelog

No recent changes

DashboardSidebarCollapse

A Button to collapse the sidebar on desktop.

DashboardToolbar

A toolbar to display under the navbar in a dashboard.