DashboardSidebarCollapse

A Button to collapse the sidebar on desktop.

Usage

The DashboardSidebarCollapse component is used to collapse/expand the DashboardSidebar component when its collapsible prop is set.

<template>
  <PDashboardSidebarCollapse />
</template>

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

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

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

Examples

Within `header` slot

You can put this component in the header slot of the DashboardSidebar component and use the collapsed prop to hide the left part of the header for example:

layouts/dashboard.vue

<template>
  <PDashboardGroup>
    <PDashboardSidebar collapsible>
      <template #header="{ collapsed }">
        <Logo v-if="!collapsed" />

        <PDashboardSidebarCollapse variant="subtle" />
      </template>
    </PDashboardSidebar>

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

Within `leading` slot

You can put this component in the leading slot of the DashboardNavbar component to display it before the title for example:

pages/index.vue

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

<template>
  <PDashboardPanel>
    <template #header>
      <PDashboardNavbar title="Home">
        <template #leading>
          <PDashboardSidebarCollapse variant="subtle" />
        </template>
      </PDashboardNavbar>
    </template>
  </PDashboardPanel>
</template>

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 collapse.
`ui`		`{ base?: any; }`

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

Theme

app.config.ts

export default defineAppConfig({
  ui: {
    dashboardSidebarCollapse: {
      base: 'hidden lg:flex',
      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: {
        dashboardSidebarCollapse: {
          base: 'hidden lg:flex',
          variants: {
            side: {
              left: '',
              right: ''
            }
          }
        }
      }
    })
  ]
})

Changelog

No recent changes

DashboardSidebar

A resizable and collapsible sidebar to display in a dashboard.

DashboardSidebarToggle

A Button to toggle the sidebar on mobile.