Usage
The DashboardSidebarCollapse component is used to collapse/expand the DashboardSidebar component when its collapsible prop is set.
<template>
<B24DashboardSidebarCollapse />
</template>
It extends the Button component, so you can pass any property such as color, size, etc.
<template>
<B24DashboardSidebarCollapse color="air-primary" />
</template>
The button defaults to
color="air-tertiary".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>
<B24DashboardGroup>
<B24DashboardSidebar collapsible>
<template #header="{ collapsed }">
<Logo v-if="!collapsed" />
<B24DashboardSidebarCollapse />
</template>
</B24DashboardSidebar>
<slot />
</B24DashboardGroup>
</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>
<B24DashboardPanel>
<template #header>
<B24DashboardNavbar title="Home">
<template #leading>
<B24DashboardSidebarCollapse />
</template>
</B24DashboardNavbar>
</template>
</B24DashboardPanel>
</template>
API
Props
Theme
app.config.ts
export default defineAppConfig({
b24ui: {
dashboardSidebarCollapse: {
base: 'hidden lg:flex',
variants: {
side: {
left: '',
right: ''
}
}
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'
export default defineConfig({
plugins: [
vue(),
bitrix24UIPluginVite({
b24ui: {
dashboardSidebarCollapse: {
base: 'hidden lg:flex',
variants: {
side: {
left: '',
right: ''
}
}
}
}
})
]
})