Violin.css

# Menu: Categorie

WIP

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

`

    <div class="inv-menu inv-menu--visible">
        <button class="inv-menu-expand-button">
        <i class="material-icons">menu</i>
      </button>
        <div class="inv-menu__container inv-menu__container--open">

            <div class="inv-menu-header">
                <button class="inv-menu-collapse-button">
            <i class="material-icons">keyboard_arrow_left</i>
          </button>
                <picture>
                    <source media="(min-width: 500px)" srcset="https://raw.githubusercontent.com/involvestecnologia/violin.css/master/public/assets/images/logo.png">
                    <img src="https://raw.githubusercontent.com/involvestecnologia/violin.css/master/public/assets/images/logo-full.png" alt="Menu Logo" />
                </picture>
            </div>

            <div class="inv-menu__search">
                <div class="inv-menu-search inv-menu-search--open">
                    <input id="" name="" type="text" class="inv-input " value="" placeholder="Ctrl+k para buscar" />
                    <label class="inv-menu-search__label" for="">
              <i class="material-icons">search</i>
            </label>
                </div>
                <div class="inv-menu__search-tip">Ctrl+k</div>
            </div>

            <div class="inv-menu__list">
                <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>

            <picture class="inv-menu__brand">
                <source media="(min-width: 500px)" srcset="https://raw.githubusercontent.com/involvestecnologia/violin.css/master/public/assets/images/brand.png">
                <img src="https://raw.githubusercontent.com/involvestecnologia/violin.css/master/public/assets/images/brand-full.png" alt="Menu Logo" />
            </picture>

        </div>
    </div>

`
`

    <div class="inv-menu {{ menu.modifier }}">
      {{> @menu-expand-button}}
      <div class="inv-menu__container {{ ternary menu.open "inv-menu__container--open" "" }}">

        <div class="inv-menu-header">
          {{> @menu-collapse-button}}
          <picture>
            <source
              media="(min-width: 500px)"
              srcset="https://raw.githubusercontent.com/involvestecnologia/violin.css/master/public/assets/images/logo.png"
            >
            <img
              src="https://raw.githubusercontent.com/involvestecnologia/violin.css/master/public/assets/images/logo-full.png"
              alt="{{ menu-logo.alt }}"
            />
          </picture>
        </div>

        <div class="inv-menu__search">
          {{> @menu-search--default }}
          <div class="inv-menu__search-tip">Ctrl+k</div>
        </div>

        <div class="inv-menu__list">
          {{#if menu.categorie}}
            {{> @menu-list-categorie }}
          {{else}}
            {{> @menu-list--open }}
          {{/if}}
        </div>

        <picture class="inv-menu__brand">
          <source
            media="(min-width: 500px)"
            srcset="https://raw.githubusercontent.com/involvestecnologia/violin.css/master/public/assets/images/brand.png"
          >
          <img
            src="https://raw.githubusercontent.com/involvestecnologia/violin.css/master/public/assets/images/brand-full.png"
            alt="{{ menu-logo.alt }}"
          />
        </picture>

      </div>
    </div>

`
`

    {
      "preview": {
        "styles": " height: 100%; "
      },
      "menu-logo": {
        "src": "/assets/images/logo-full.png",
        "alt": "Menu Logo"
      },
      "menu-brand": {
        "src": "/assets/images/brand-full.png"
      },
      "icon": "search",
      "input": {
        "placeholder": "Ctrl+k para buscar"
      },
      "menu-list": {
        "list": [
          {
            "item": {
              "icon": "wifi",
              "text": "Profile"
            }
          },
          {
            "item": {
              "icon": "face",
              "text": "Pontos de Venda"
            }
          },
          {
            "item": {
              "icon": "search",
              "text": "Métricas"
            }
          },
          {
            "item": {
              "icon": "people",
              "text": "Acessos Externos"
            }
          }
        ]
      },
      "menu-list-categorie": {
        "list": [
          {
            "item": {
              "icon": "people",
              "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"
            }
          }
        ]
      },
      "menu": {
        "open": true,
        "modifier": "inv-menu--visible",
        "categorie": true
      },
      "menu-search": {
        "modifier": "inv-menu-search--open"
      }
    }

`
File:

- Content:
  `

      .inv-menu__container {
        display: none;
        background: var(--color-system--dark) linear-gradient(170.25deg, var(--color-system--dark) 0%, #0c101c 99.94%);
        flex-direction: column;
        height: 100%;
        padding-top: var(--space-16);
        box-sizing: border-box;
      }

      .inv-menu--visible > .inv-menu__container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: var(--z-index-1);
        display: flex;
        padding-bottom: 13px;
      }

      .inv-menu__search {
        margin-top: var(--space-32);
        margin-bottom: 12px;
        padding-left: var(--space-8);
        padding-right: var(--space-8);
      }

      .inv-menu__search-tip {
        display: none;
        text-align: center;
        font-weight: 600;
        font-size: 10px;
        color: var(--color-system--regular);
        line-height: 14px;
        outline: 0;
        user-select: none;
      }

      .inv-menu__list {
        flex: 1;
        overflow: auto;
      }

      .inv-menu-header {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        padding-left: var(--space-8);
        padding-right: var(--space-8);
      }

      .inv-menu__brand {
        align-self: center;
      }

      .inv-menu__brand > img {
        max-height: 24px;
        max-width: 80px;
        padding-top: var(--space-16);
        padding-bottom: var(--space-24);
      }

      .inv-menu__container--open > .inv-menu__brand {
        max-width: 236px;
      }

      @media (min-width: 500px) {
        .inv-menu {
          height: 100%;
        }

        .inv-menu > .inv-menu-expand-button {
          display: none;
        }

        .inv-menu__container {
          display: flex;
          max-width: 72px;
          border-radius: 0 10px 10px 0;
          padding-bottom: var(--space-32);
          height: auto;
          height: 100%;
        }

        .inv-menu__container--open {
          max-width: 236px;
        }

        .inv-menu-header {
          display: flex;
          justify-content: center;
          flex-shrink: 0;
        }

        .inv-menu-header > .inv-menu-collapse-button {
          display: none;
        }

        .inv-menu__search {
          align-self: center;
        }

        .inv-menu__search-tip {
          display: block;
        }

        .inv-menu__brand > img {
          max-width: 48px;
          max-height: 24px;
          padding-top: 16px;
          padding-bottom: 24px;
        }

        .inv-menu__container--open > .inv-menu__search {
          margin-bottom: var(--space-16);
        }

        .inv-menu__container--open > .inv-menu__list {
          flex: 1;
          overflow: auto;
        }

        .inv-menu__container--open > .inv-menu__search > .inv-menu__search-tip {
          display: none;
        }
      }

  `
- URL: /components/raw/menu/menu.css
- Filesystem Path: src/components/menu/menu.css
- Size: 2.3 KB

- Handle: @menu--categorie
- Variants (4): Default , Mobile , Categorie , Open
- Preview:
  - With layout
  - Component only
- Filesystem Path: src/components/menu/menu.hbs
- References (5): @menu-expand-button, @menu-collapse-button, @menu-search--default, @menu-list-categorie, @menu-list--open

# Menu

Menu com as opções de navegação do sistema.

Table of Contents

- Menu
  - Default
- Menu Expand Button
- Menu Container
- Menu Header, Menu Collapse Button & Imagem
- Menu Search
- Menu List
- Menu List Categories
- Menu Images
- Screens and Behaviors

## Menu

Onde todas as seções do menu são adicioadas, representado pela classe `.inv-menu`. | Modificador | Tipo | Local | | ————- |:————-:| —–:| | `.inv-menu` | default | `div` | | `.inv-menu--open` | menu aberto | `div` |

`

    <div class="inv-menu"><div>
    <div class="inv-menu inv-menu--open"><div>

`

#### Default

Menu default. Em telas com menos de 500px ele aparece com os itens à mostra, em telas com 500px ou mais ele aparece por default com as descrições dos itens escondidas. A versão 500px default não possui scroll quando os itens excedem o espaço do menu pois o mesmo foi projetado para abrir quando o usuário passar o mouse por cima (ou tocar qualquer parte do menu), ou seja, o usuário não irá de fato interagir com o menu 500px default, somente com as versões do menu aberto.

### Menu Expand Button

Botão para expandir o menu. Este só aparece em telas até 499px. Telas com ou mais de 500px terão o menu fixo,em sua forma fechada. Confira a documentação completa do Menu Expand Button

`

    <div class="inv-menu">
      <button class="inv-menu-expand-button">
        <i class="material-icons">menu</i>
      </button>
    <div>

    <div class="inv-menu inv-menu--open">
      <button class="inv-menu-expand-button">
        <i class="material-icons">menu</i>
      </button>
    <div>

`

### Menu Container

Container das seções header, listas e footer do menu. O menu container é repre sentado pela classe `inv-menu__container`. | Modificador | Tipo | Local | | ————- |:————-:| —–:| | `.inv-menu__container` | default | `div` | | `.inv-menu__container--open` | menu container aberto | `div` |

`

    <div class="inv-menu">
      <button class="inv-menu-expand-button">
        <i class="material-icons">menu</i>
      </button>
      <div class="inv-menu__container"></div>
    <div>

    <div class="inv-menu inv-menu--open">
      <button class="inv-menu-expand-button">
        <i class="material-icons">menu</i>
      </button>
      <div class="inv-menu__container inv-menu__container--open"></div>
    <div>

`

### Menu Header, Menu Collapse Button & Imagem

Header do menu. Nele nós temos o Collapse Button e uma imagem de escolha de quem implementar. O menu header é representado pela classe `.inv-menu-header` e fica sempre dentro do Menu Container.

- Collapse Button: botão para fechar o menu. Este só aparece em telas até 499px.
- Imagem: uma imagem de escolhe de quem implementa o menu. Pode ser a imagem da empresa, do sistema, do cliente que esta utilizando o sistema, etc.

Confira a documentação completa do Menu Collapse Button

`

    <div class="inv-menu">
      <button class="inv-menu-expand-button">
        <i class="material-icons">menu</i>
      </button>
      <div class="inv-menu__container">
        <div class="inv-menu-header">
          <button class="inv-menu-collapse-button">
            <i class="material-icons">keyboard_arrow_left</i>
          </button>
          <picture>
            <source media="(min-width: 500px)" srcset="/assets/images/logo.png">
            <img src="/assets/images/logo-full.png" alt="Menu Logo" />
          </picture>
        </div>
      </div>
    <div>

`

### Menu Search

O Menu Search é adicionado dentro do Menu Container, logo após Menu Header. Confira a documentação completa do Menu Search

`

    <div class="inv-menu">
      <button class="inv-menu-expand-button">
        <i class="material-icons">menu</i>
      </button>
      <div class="inv-menu__container">
        <div class="inv-menu-header">
          <button class="inv-menu-collapse-button">
            <i class="material-icons">keyboard_arrow_left</i>
          </button>
          <picture>
            <source media="(min-width: 500px)" srcset="/assets/images/logo.png">
            <img src="/assets/images/logo-full.png" alt="Menu Logo" />
          </picture>
        </div>

        <div class="inv-menu__search">
          <div class="inv-menu-search ">
            <input id="" name="" type="text" class="inv-input " placeholder="Ctrl+k para buscar" />
            <label class="inv-menu-search__label" for="">
              <i class="material-icons">search</i>
            </label>
          </div>
          <div class="inv-menu__search-tip">Ctrl+k</div>
        </div>
      </div>
    <div>

`

### Menu List

O Menu List é adicionando também dentro do menu container, abaixo do Menu Search. Nele são exibidos os itens de navegação do menu.

Confira a documentação completa do Menu List

`

    <div class="inv-menu">
      <button class="inv-menu-expand-button">
        <i class="material-icons">menu</i>
      </button>
      <div class="inv-menu__container">
        <div class="inv-menu-header">
          <button class="inv-menu-collapse-button">
            <i class="material-icons">keyboard_arrow_left</i>
          </button>
          <picture>
            <source media="(min-width: 500px)" srcset="/assets/images/logo.png">
            <img src="/assets/images/logo-full.png" alt="Menu Logo" />
          </picture>
        </div>

        <div class="inv-menu__search">
          <div class="inv-menu-search ">
            <input id="" name="" type="text" class="inv-input " placeholder="Ctrl+k para buscar" />
            <label class="inv-menu-search__label" for="">
              <i class="material-icons">search</i>
            </label>
          </div>
          <div class="inv-menu__search-tip">Ctrl+k</div>
        </div>

        <div class="inv-menu__list">
          <div class="inv-menu-list ">
            <a href="#" class="inv-menu-list_item">
              <i class="material-icons">wifi</i>
              <span>Profile</span>
            </a>
              <a href="#" class="inv-menu-list_item">
              <i class="material-icons">face</i>
              <span>Pontos de Venda</span>
            </a>
              <a href="#" class="inv-menu-list_item">
              <i class="material-icons">search</i>
              <span>Métricas</span>
            </a>
              <a href="#" class="inv-menu-list_item">
              <i class="material-icons">people</i>
              <span>Acessos Externos</span>
            </a>
          </div>
        </div>
      </div>
    <div>

`

### Menu List Categorie

O Menu List Categorie representa a versão aberta do menu após o usuário selecionar algum dos itens do Menu List.

Confira a documentação completa do Menu List Categorie

`

    <div class="inv-menu">
      <button class="inv-menu-expand-button">
        <i class="material-icons">menu</i>
      </button>
      <div class="inv-menu__container">
        <div class="inv-menu-header">
          <button class="inv-menu-collapse-button">
            <i class="material-icons">keyboard_arrow_left</i>
          </button>
          <picture>
            <source media="(min-width: 500px)" srcset="/assets/images/logo.png">
            <img src="/assets/images/logo-full.png" alt="Menu Logo" />
          </picture>
        </div>

        <div class="inv-menu__search">
          <div class="inv-menu-search ">
            <input id="" name="" type="text" class="inv-input " placeholder="Ctrl+k para buscar" />
            <label class="inv-menu-search__label" for="">
              <i class="material-icons">search</i>
            </label>
          </div>
          <div class="inv-menu__search-tip">Ctrl+k</div>
        </div>

        <div class="inv-menu__list">
          <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>
      </div>
    <div>

`

### Menu Images

O Menu permite a adição de duas imagens: uma imagem de logo no topo e uma no bottom.

#### Imagem Topo

A imagem de topo do menu fica dentro do container `.inv-menu-header`.

#### Imagem Bottom

A imagem de bottom do menu fica dentro da tag `<picture>`, com a classe `.inv-menu__brand`. Esta (imagem bottom) fica logo após os componentes de lista.

`

    <picture class="inv-menu__brand">
      <source media="(min-width: 500px)" srcset="/assets/images/brand.png">
      <img src="/assets/images/brand-full.png" alt="Menu Logo" />
    </picture>

`

### Screens and Behaviors

#### Até 499px

- O Menu Default, até 499px exibe apenas o Menu Expand Button
- Ao utilizar o touch (no mobile) ou hover no desktop, o meno é aberto ocupando todos os 499px.
- Se os itens não couberem na tela, um scroll é adicionado para o usuário poder realizar a navegação.
- Nesta versão, o componente Menu Collapse Button é exibido para o usuário poder fechar o menu.

#### Mais de 499px

- O Menu Default, com mais de 499px é exibido em sua forma fechado, mostrando apenas os ícones do menu,
- Ao passar o mouse por cima (ou touch em telas com mais de 499px) o menu é expandido.
- Ao remover o mouse ou clicar/tocar em algum item, o menu é fechado.