Violin.css

# Menu: Mobile

WIP

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

`

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

        <div class="inv-menu__container ">

            <div class="inv-menu-header">
                <button class="inv-menu-btn">
            <i class="material-icons">keyboard_arrow_left</i>
          </button>
                <img class="inv-menu-logo inv-menu-logo--small" src="https://raw.githubusercontent.com/involvestecnologia/violin.css/master/public/assets/images/logo.png" alt="Menu Logo" />
                <img class="inv-menu-logo inv-menu-logo--large" src="https://raw.githubusercontent.com/involvestecnologia/violin.css/master/public/assets/images/logo-full.png" alt="Menu Logo" />
            </div>

            <div class="inv-menu__search" title="Click to search">
                <i class="material-icons">search</i>
                <span>Ctrl+k para buscar</span>
            </div>
            <div class="inv-menu__search-tip">Ctrl+k</div>

            <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>

            <a class="inv-menu__user" href="#">
          <img src="https://raw.githubusercontent.com/involvestecnologia/violin.css/master/public/assets/images/pikachu.jpg"
            alt="User Avatar">
          <span>João</span>
        </a>

        </div>
    </div>

`
`

    <div class="inv-menu {{ menu.modifier }}">
      <button class="inv-menu-btn inv-menu-btn--expand">
        <i class="material-icons">menu</i>
      </button>

      <div class="inv-menu__container {{ ternary menu.open "inv-menu__container--open" "" }}">

        <div class="inv-menu-header">
          <button class="inv-menu-btn">
            <i class="material-icons">keyboard_arrow_left</i>
          </button>
          <img
              class="inv-menu-logo inv-menu-logo--small"
              src="https://raw.githubusercontent.com/involvestecnologia/violin.css/master/public/assets/images/logo.png"
              alt="{{ menu-logo.alt }}" />
          <img
              class="inv-menu-logo inv-menu-logo--large"
              src="https://raw.githubusercontent.com/involvestecnologia/violin.css/master/public/assets/images/logo-full.png"
              alt="{{ menu-logo.alt }}" />
        </div>

        <div class="inv-menu__search" title="Click to search">
          <i class="material-icons">search</i>
          <span>Ctrl+k para buscar</span>
        </div>
        <div class="inv-menu__search-tip">Ctrl+k</div>

        {{#if menu.categorie}}

          <div class="inv-menu-list-categorie-container">
            <a href="#" class="inv-menu-list-categorie__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>

        {{else}}

          <div class="inv-menu-list {{ menu-list.modifier }}">
            {{#each menu-list.list}}
              <a href="#" class="inv-menu-list__item">
                <i class="material-icons">{{this.item.icon}}</i>
                <span>{{this.item.text}}</span>
              </a>
            {{/each}}
          </div>

        {{/if}}

        <a class="inv-menu__user" href="#">
          <img src="https://raw.githubusercontent.com/involvestecnologia/violin.css/master/public/assets/images/pikachu.jpg"
            alt="User Avatar">
          <span>João</span>
        </a>

      </div>
    </div>

`
`

    {
      "preview": {
        "styles": " height: 100%; "
      },
      "menu-logo": {
        "src": "/assets/images/logo-full.png",
        "alt": "Menu Logo"
      },
      "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": {
        "modifier": "inv-menu--visible"
      }
    }

`
File:

- Content:
  `

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

      .inv-menu-list-categorie__back-button {
        text-decoration: none;
        cursor: pointer;
      }

      .inv-menu-list-categorie__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/menu-categorie.css
- Filesystem Path: src/components/menu/menu-categorie.css
- Size: 1.6 KB

- Content:
  `

      .inv-menu-list {
        flex: 1;
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: auto;
        padding-left: var(--space-8);
        padding-right: var(--space-8);
      }

      .inv-menu-list__item {
        min-height: 44px;
        max-height: 44px;
        border-radius: 4px;
        transition: background-color 0.1s;
        display: flex;
        align-items: center;
        flex-shrink: 0;
        padding-left: var(--space-16);
        padding-right: var(--space-16);
        cursor: pointer;
        text-decoration: none;
        color: var(--color-system--white);
        font-weight: 600;
        font-size: 14px;
      }

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

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

      .inv-menu-list__item > i {
        font-size: 24px;
        color: var(--color-system--regular);
        padding-right: var(--space-16);
      }

      @media (min-width: 500px) {
        .inv-menu-list {
          overflow: hidden;
        }

        .inv-menu-list--open {
          overflow: auto;
        }

        .inv-menu-list__item {
          color: transparent;
        }

        .inv-menu__container:hover > .inv-menu-list > .inv-menu-list__item,
        .inv-menu-list--open > .inv-menu-list__item {
          color: var(--color-system--white);
        }
      }

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

- 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;
        overflow-x: hidden;
      }

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

      .inv-menu-header {
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas: "a b c";
        padding-left: var(--space-8);
        padding-right: var(--space-8);
        min-height: 40px;
        max-height: 40px;
      }

      .inv-menu-btn {
        background-color: var(--color-system--dark);
        border: none;
        cursor: pointer;
        outline: 0;
        width: 40px;
        height: 40px;
      }

      .inv-menu-btn--expand {
        border-radius: 0 0 6px 0;
        width: 56px;
        height: 56px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: var(--z-index-1);
        display: flex;
      }

      .inv-menu-btn > i {
        font-size: 40px;
        color: var(--color-system--white);
        transition: color 0.1s;
      }

      .inv-menu-btn:hover > i {
        color: var(--color-default--regular);
      }

      .inv-menu-btn:active > i {
        color: var(--color-default--dark);
      }

      .inv-menu-logo {
        position: absolute;
        grid-area: b;
        justify-self: center;
        min-height: inherit;
        max-height: inherit;
        transition: opacity 0.1s;
        visibility: visible;
        opacity: 1;
      }

      .inv-menu-logo--small {
        visibility: hidden;
        opacity: 0;
      }

      .inv-menu__search {
        display: flex;
        align-items: center;
        min-height: 40px;
        max-height: 40px;
        border-radius: 10px;
        box-sizing: border-box;
        font-weight: 600;
        color: var(--color-system--regular);
        background-color: rgba(255, 255, 255, 0.1);
        cursor: pointer;
        user-select: none;
        margin-top: var(--space-32);
        margin-left: var(--space-8);
        margin-right: var(--space-8);
      }

      .inv-menu__search > i {
        padding-left: 16px;
        padding-right: 16px;
        color: var(--color-primary--light);
      }

      .inv-menu__search-tip {
        visibility: hidden;
        margin-bottom: 12px;
      }

      .inv-menu__user {
        text-decoration: none;
        display: flex;
        align-items: center;
        background-color: #1a2f50;
        height: 62px;
        min-height: 62px;
        max-height: 62px;
        padding-left: 16px;
        padding-right: 16px;
        color: var(--color-system--white);
        font-size: 14px;
        font-weight: 600;
      }

      .inv-menu__user > img {
        height: 40px;
        width: 40px;
        border-radius: 50%;
      }

      .inv-menu__user > span {
        padding-left: 8px;
        max-width: calc(100% - 40px);
        word-wrap: break-word;
      }

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

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

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

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

        .inv-menu__container {
          display: flex;
          max-width: 72px;
          height: auto;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          z-index: var(--z-index-1);
        }

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

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

        .inv-menu-logo--small {
          visibility: visible;
          opacity: 1;
        }

        .inv-menu-logo--large {
          visibility: hidden;
          opacity: 0;
        }

        .inv-menu__search > span {
          display: none;
        }

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

        .inv-menu__user {
          justify-content: center;
          padding-left: unset;
          padding-right: unset;
          cursor: default;
          pointer-events: none;
        }

        .inv-menu__user > span {
          display: none;
          padding-left: unset;
        }

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

        .inv-menu__container:hover > .inv-menu-header > .inv-menu-logo--small,
        .inv-menu__container--open > .inv-menu-header > .inv-menu-logo--small {
          visibility: hidden;
          opacity: 0;
        }

        .inv-menu__container:hover > .inv-menu-header > .inv-menu-logo--large,
        .inv-menu__container--open > .inv-menu-header > .inv-menu-logo--large {
          visibility: visible;
          opacity: 1;
        }

        .inv-menu__container:hover > .inv-menu__search > span,
        .inv-menu__container--open > .inv-menu__search > span {
          display: block;
        }

        .inv-menu__container:hover > .inv-menu__search-tip,
        .inv-menu__container--open > .inv-menu__search-tip {
          visibility: hidden;
        }

        .inv-menu__container:hover > .inv-menu__user,
        .inv-menu__container--open > .inv-menu__user {
          justify-content: flex-start;
          padding-left: 16px;
          padding-right: 16px;
          cursor: pointer;
          pointer-events: initial;
        }

        .inv-menu__container:hover > .inv-menu__user > span,
        .inv-menu__container--open > .inv-menu__user > span {
          display: block;
          padding-left: 8px;
        }
      }

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

- Handle: @menu--mobile
- Variants (4): Default , Mobile , Categorie , Open
- Preview:
  - With layout
  - Component only
- Filesystem Path: src/components/menu/menu.hbs

# 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.