Violin.css

# Menu List Categorie

WIP

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <div class="inv-menu-list-categorie-container">
        <a href="#" class="inv-menu-list-categorie-container__back-button">
        <i class="material-icons">keyboard_arrow_left</i>
      </a>
        <div class="inv-menu-list-categorie">
            <div class="inv-menu-list-categorie__title">
                <i class="material-icons">people</i><span>Colaboradores</span>
            </div>
            <a href="#" class="inv-menu-list-categorie__item">Colaboradores</a>
            <a href="#" class="inv-menu-list-categorie__item">Afastamento</a>
            <a href="#" class="inv-menu-list-categorie__item">Perfil de Acesso</a>
            <a href="#" class="inv-menu-list-categorie__item">Jornada de Trabalho</a>
            <div class="inv-menu-list-categorie__separator">Relatórios</div>
            <a href="#" class="inv-menu-list-categorie__item">Histórico de Contratação de Colaboradores</a>
        </div>
    </div>

`
`

    <div class="inv-menu-list-categorie-container">
      <a href="#" class="inv-menu-list-categorie-container__back-button">
        <i class="material-icons">keyboard_arrow_left</i>
      </a>
      <div class="inv-menu-list-categorie">
        <div class="inv-menu-list-categorie__title">
          <i class="material-icons">people</i><span>Colaboradores</span>
        </div>
        {{#each menu-list-categorie.list}}
          {{#if this.item.title}}
            <div class="inv-menu-list-categorie__separator">{{ this.item.title }}</div>
          {{else}}
            <a href="#" class="inv-menu-list-categorie__item">{{ this.item.text }}</a>
          {{/if}}
        {{/each}}
      </div>
    </div>

`
`

    {
      "preview": {
        "styles": " padding: 0; background-color: #1d2e44; border-radius: 0; height: 100%; "
      },
      "menu-list-categorie": {
        "list": [
          {
            "item": {
              "text": "Colaboradores"
            }
          },
          {
            "item": {
              "text": "Afastamento"
            }
          },
          {
            "item": {
              "text": "Perfil de Acesso"
            }
          },
          {
            "item": {
              "text": "Jornada de Trabalho"
            }
          },
          {
            "item": {
              "title": "Relatórios"
            }
          },
          {
            "item": {
              "text": "Histórico de Contratação de Colaboradores"
            }
          }
        ]
      }
    }

`
File:

- Content:
  `

      .inv-menu-list-categorie-container {
        display: flex;
        padding-right: var(--space-16);
        height: 100%;
        overflow: auto;
      }

      .inv-menu-list-categorie-container__back-button {
        text-decoration: none;
      }

      .inv-menu-list-categorie-container__back-button > i {
        min-height: 44px;
        display: flex;
        align-items: center;
        font-size: 24px;
        color: var(--color-system--white);
      }

      .inv-menu-list-categorie {
        flex: 1;
        display: flex;
        flex-direction: column;
      }

      .inv-menu-list-categorie__title {
        display: flex;
        align-items: center;
        color: var(--color-system--white);
        min-height: 44px;
        font-weight: 600;
        font-size: 14px;
      }

      .inv-menu-list-categorie__item {
        min-height: 20px;
        width: 100%;
        border-radius: 4px;
        text-decoration: none;
        transition: background-color 0.1s;
        display: flex;
        flex-shrink: 0;
        color: var(--color-system--white);
        font-weight: 600;
        font-size: 14px;
        padding-left: var(--space-8);
        padding-top: 12px;
        padding-bottom: 12px;
      }

      .inv-menu-list-categorie__item:hover {
        background-color: rgba(232, 234, 236, 0.2);
      }

      .inv-menu-list-categorie__item:active {
        background-color: rgba(232, 234, 236, 0.1);
      }

      .inv-menu-list-categorie__separator {
        font-size: 12px;
        font-weight: bold;
        color: var(--color-primary--light);
        padding-left: var(--space-8);
        display: flex;
        align-items: center;
        min-height: 13.33px;
        padding-top: 12px;
        padding-bottom: 10px;
      }

      .inv-menu-list-categorie__title > i {
        padding-left: var(--space-8);
      }

      .inv-menu-list-categorie__title > span {
        padding-left: var(--space-8);
      }

  `
- URL: /components/raw/menu-list-categorie/menu-list-categorie.css
- Filesystem Path: src/components/menu-list-categorie/menu-list-categorie.css
- Size: 1.6 KB

- Handle: @menu-list-categorie
- Preview:
  - With layout
  - Component only
- Filesystem Path: src/components/menu-list-categorie/menu-list-categorie.hbs
- Referenced by (4): @menu, @menu--mobile, @menu--categorie, @menu--open

## Menu List Categorie

O Menu List Categorie é exibido após o usuário interagir com algum dos itens de navegação do Menu List.

### Menu List Categorie - Container

O Container é responsável por conter os itens do componente. Sua classe principal é `.inv-menu-list-categorie-container`.

`

    <div class="inv-menu-list-categorie-container"></div>

`

### Menu List Categorie - Back Button

Botão para retornar ao estado anterior do menu. Sua classe principal é `.inv-menu-list-categorie-container__back-button`.

`

    <a href="#" class="inv-menu-list-categorie-container__back-button">
      <i class="material-icons">keyboard_arrow_left</i>
    </a>

`

### Menu List Categorie - Lista de itens

Lista com os itens que serão exibidos ao usuário. Sua classe principal é `.inv-menu-list-categorie`.

`

    <div class="inv-menu-list-categorie-container">
      <div class="inv-menu-list-categorie"></div>
    </div>

`

### Menu List Categorie - Título de Categoria

Título da categoria que o usuário selecionou. Sua classe principal é `.inv-menu-list-categorie__title`.

`

    <div class="inv-menu-list-categorie-container">
      <div class="inv-menu-list-categorie">
        <div class="inv-menu-list-categorie__title">
          <i class="material-icons">people</i><span>Colaboradores</span>
        </div>
      </div>
    </div>

`

### Menu List Categorie - Itens da Categoria

Itens da categoria selecionada pelo usuário. Sua classe principal é `.inv-menu-list-categorie__item`.

`

    <div class="inv-menu-list-categorie-container">
      <div class="inv-menu-list-categorie">
        <div class="inv-menu-list-categorie__title">
          <i class="material-icons">people</i><span>Colaboradores</span>
        </div>
        <a href="#" class="inv-menu-list-categorie__item">Colaboradores</a>
      </div>
    </div>

`

### Menu List Categorie - Itens Separator

Separador de itens da categoria. Sua classe principal é `.inv-menu-list-categorie__separator`.

`

    <div class="inv-menu-list-categorie-container">
      <div class="inv-menu-list-categorie">
        <div class="inv-menu-list-categorie__title">
          <i class="material-icons">people</i><span>Colaboradores</span>
        </div>
        <a href="#" class="inv-menu-list-categorie__item">Colaboradores</a>
        <div class="inv-menu-list-categorie__separator">Relatórios</div>
        <a href="#" class="inv-menu-list-categorie__item">Histórico de Contratação de Colaboradores</a>
      </div>
    </div>

`