---
name: Drawer
menu: Components
route: /components/Drawer
---

import Drawer from './SideBar';
import { Playground, Props } from 'docz';

# Drawer

This component renders an HTML `<section>` and passes along all props.

## API
<Props of={Drawer} />

## isFixed false

<Playground>
	<Drawer
		items={[
			{
				label: 'Overview',
				action: () => console.log('overview'),
			},
			{
				label: 'Reporte de ciencias de datos',
				isExpandable: true,
				children: [
					{
						label: 'Introducción',
						action: () => console.log('introducción'),
					},
					{
						label: 'Análisis exploratorio',
						action: () => console.log('Análisis exploratorio'),
					},
					{
						label: 'Matriz de diseño',
						action: () => console.log('matriz de diseño'),
					},
				],
			},
			{
				label: 'Preguntas frecuentes',
				action: () => console.log('preguntas frecuentes'),
			},
			{
				label: 'Monitoreo de negocio',
				action: () => console.log('monitoreo de negocio'),
			},
			{
				label: 'Foros',
				isExpandable: true,
				actionAdd: () => console.log('ACTION TRIGGERED'),
				children: [
					{
						label: 'Task force',
						action: () => console.log('navigate to task force'),
					},
					{
						label: 'Comité de crédito',
						action: () => console.log('comité de crédito'),
					},
				],
			},
		]}
		defaultMenuItem="Monitoreo de negocio"
    designation="Xar"
    color="#1ed466"
    typeUtility="Inteligencia"
    onBack={() => console.log('on back')}
		isFixed={false}
  />
</Playground>