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
https://github.com/bitrix24/b24ui/tree/main/src/theme/dashboard-sidebar-toggle.ts
export default {
base: 'lg:hidden',
variants: {
side: {
left: '',
right: ''
}
}
}