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>
<B24DashboardSidebarToggle />
</template>
It extends the Button component, so you can pass any property such as color, size, etc.
<template>
<B24DashboardSidebarToggle color="air-primary" />
</template>
The button defaults to
color="air-tertiary".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>
<B24DashboardGroup>
<B24DashboardSidebar>
<template #toggle>
<B24DashboardSidebarToggle />
</template>
</B24DashboardSidebar>
<slot />
</B24DashboardGroup>
</template>
<script setup lang="ts">
definePageMeta({
layout: 'dashboard'
})
</script>
<template>
<B24DashboardPanel>
<template #header>
<B24DashboardNavbar title="Home">
<template #toggle>
<B24DashboardSidebarToggle />
</template>
</B24DashboardNavbar>
</template>
</B24DashboardPanel>
</template>
When using the
toggle-side prop of the DashboardSidebar and DashboardNavbar components, the button will be displayed on the specified side.API
Props
Theme
app.config.ts
export default defineAppConfig({
b24ui: {
dashboardSidebarToggle: {
base: 'lg:hidden',
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: {
dashboardSidebarToggle: {
base: 'lg:hidden',
variants: {
side: {
left: '',
right: ''
}
}
}
}
})
]
})