# ez-sidebar-navigator



<!-- Auto Generated Below -->


## Properties

| Property           | Attribute            | Description                                                  | Type                                                               | Default                |
| ------------------ | -------------------- | ------------------------------------------------------------ | ------------------------------------------------------------------ | ---------------------- |
| `isResponsive`     | `is-responsive`      | Define se terá responsividade, Controle deverá ser pelo CSS. | `boolean`                                                          | `false`                |
| `mode`             | `mode`               | Define se o menu será do tipo FIXED ou FLOAT.                | `ModeMenuEnum.FIXED \| ModeMenuEnum.FLOAT`                         | `ModeMenuEnum.FLOAT`   |
| `showCollapseMenu` | `show-collapse-menu` | Define se o botão de "Recolher Menu" será exibido            | `boolean`                                                          | `true`                 |
| `showFixedButton`  | `show-fixed-button`  | Define se o botão de "Fixar Menu" será exibido               | `boolean`                                                          | `true`                 |
| `size`             | `size`               | Define o tamanho do menu (small, medium, large).             | `SizeMenuEnum.LARGE \| SizeMenuEnum.MEDIUM \| SizeMenuEnum.SMALL`  | `SizeMenuEnum.SMALL`   |
| `titleMenu`        | `title-menu`         | Define o título do Sidebar Navigator                         | `string`                                                           | `""`                   |
| `type`             | `type`               | Define o tipo do menu (float, fixed ou dynamic (livre)).     | `TypeMenuEnum.DYNAMIC \| TypeMenuEnum.FIXED \| TypeMenuEnum.FLOAT` | `TypeMenuEnum.DYNAMIC` |


## Events

| Event          | Description                                                              | Type                                                    |
| -------------- | ------------------------------------------------------------------------ | ------------------------------------------------------- |
| `ezChangeMode` | Evento emitido sempre que o modo (FLOAT ou FIXED) do menu for alterado.. | `CustomEvent<ModeMenuEnum.FIXED \| ModeMenuEnum.FLOAT>` |


## Methods

### `changeModeMenu() => Promise<void>`

Método para fixar/desafixar o menu, emitindo o evento ezChangeMode.

#### Returns

Type: `Promise<void>`

---

### `closeSidebar() => Promise<void>`

Método para fechar o menu automaticamente após uma ação, fluxo, etc.

#### Returns

Type: `Promise<void>`

---

### `openSidebar() => Promise<void>`

Método para abrir o menu automaticamente após uma ação, fluxo, etc.

#### Returns

Type: `Promise<void>`




## Dependencies

### Depends on

- [ez-sidebar-button](../ez-sidebar-button)
- [ez-button](../ez-button)
- [ez-scroller](../ez-scroller)

### Graph
```mermaid
graph TD;
  ez-sidebar-navigator --> ez-sidebar-button
  ez-sidebar-navigator --> ez-button
  ez-sidebar-navigator --> ez-scroller
  ez-sidebar-button --> ez-icon
  ez-button --> ez-icon
  style ez-sidebar-navigator fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------




## CSS Variables
| Variable  | Description | 
 |-|-|
| --ez-sidebar-navigator--padding-left | Define o espaçamento da esquerda do container | 
| --ez-sidebar-navigator--padding-right | Define o espaçamento da direita do container | 
| --ez-sidebar-navigator--gap | Define o espaçamento entre o cabeçalho conteúdo e rodapé | 
| --ez-sidebar-navigator--box-shadow | Define a cor de shadow box do container de label | 
| --ez-sidebar-navigator--background-color | Define a cor de fundo do container de label | 
| --ez-sidebar-navigator--border-radius | Define o border radius do container de label | 
| --ez-sidebar-navigator--height | Força uma altura especifica para o sidebar, o padrão é 100% da tela | 
| --ez-sidebar-navigator--z-index | Define a camada em que o componente será exibido. | 
| --ez-sidebar-navigator--header-gap | Define o espaçamento entre os componente do cabeçalho | 
| --ez-sidebar-navigator--footer-gap | Define o espaçamento entre os componente do rodadé | 
| --ez-ez-sidebar-navigator\_\_title--font-family | Define a fonte do título do componente  | 
| --ez-ez-sidebar-navigator\_\_title--font-size | Define o tamanho da fonte do título do componente. | 
| --ez-ez-sidebar-navigator\_\_title--color | Define a cor da fonte do título do componente. | 
| --ez-ez-sidebar-navigator\_\_title--font-weight | Define o peso da fonte do título do componente. |