start Instalation
settings Settings
list Project Structure
code Variables
language Locales
description Layouts
pages Pages
widgets Components
visibility Conditional Rendering & Loops
assignment Requirements
view_quilt Flex
arrow_drop_down_circle Accordion
left_click Button
note Card
slideshow Carousel Slide
view_carousel Carousel
label Chip
image_search Double Image Service
list Drawer Item
menu Drawer

Drawer Component

The Drawer component is used for a side navigation panel, often seen in responsive design for mobile devices, or as a part of the dashboard on larger screens.

Props

The Drawer component takes no props directly.

Slots

The Drawer component provides a slot for custom content. DrawerItem components should be created within this slot.

CSS Variables

The Drawer component uses the following CSS variables:

Variable Description
--header-height The height of the header component. Used so the components don't overlap
--header-bg The background color of the header. Adopted by the drawer
--accent-secondary-transition The color of the transition accent on the secondary component.

General Usage Notes

  • The Drawer component should ideally be used as a part of a larger layout or page component.
  • The Drawer component also includes a DrawerItem component, which is used internally to render each item and its children (if any). The DrawerItem component uses recursion to render nested items.