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>
color="neutral" and variant="ghost".header slotYou 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:
<template>
<PDashboardGroup>
<PDashboardSidebar collapsible>
<template #header="{ collapsed }">
<BaseLogo v-if="!collapsed" />
<PDashboardSidebarCollapse variant="subtle" />
</template>
</PDashboardSidebar>
<slot />
</PDashboardGroup>
</template>
leading slotYou can put this component in the leading slot of the DashboardNavbar component to display it before the title for example:
<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>
| Prop | Default | Type |
|---|
Below is the theme configuration skeleton for the PDashboardSidebarCollapse. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.
export default defineAppConfig({
pohon: {
dashboardSidebarCollapse: {
base: '',
variants: {
side: {
left: '',
right: ''
}
}
}
}
};
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'
export default defineAppConfig({
pohon: {
dashboardSidebarCollapse: {
base: '',
variants: {
side: {
left: '',
right: ''
}
}
}
}
};