<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 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" />
<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-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>
<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>
<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": {
"open": true,
"modifier": "inv-menu--visible",
"categorie": true
},
"menu-search": {
"modifier": "inv-menu-search--open"
}
}
.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);
color: var(--color-system--white);
text-decoration: none;
}
.inv-menu-list-categorie__item:active {
background-color: rgba(232, 234, 236, 0.1);
color: var(--color-system--white);
text-decoration: none;
}
.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: 20px;
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);
}
.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);
}
}
.inv-menu__container {
display: none;
background: var(--color-system--dark);
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;
justify-content: flex-start;
background-color: #1a2f50;
height: 62px;
width: 236px;
min-height: 62px;
max-height: 62px;
color: var(--color-system--white);
font-size: 14px;
font-weight: 600;
}
.inv-menu__user > img {
height: 40px;
width: 40px;
border-radius: 50%;
margin-left: 16px;
text-decoration: none;
}
.inv-menu__user > span {
padding-left: 8px;
max-width: calc(100% - 40px);
word-wrap: break-word;
text-decoration: none;
margin-right: 16px;
max-height: 34px;
overflow: hidden;
}
.inv-menu__user:hover {
background-color: rgba(232, 234, 236, 0.2);
color: var(--color-system--white);
text-decoration: none;
}
.inv-menu__user:active {
background-color: rgba(232, 234, 236, 0.1);
color: var(--color-system--white);
}
@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: fixed;
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 {
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;
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;
}
}
Menu com as opções de navegação do sistema.
Table of Contents
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>
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.
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>
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>
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.
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>
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>
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>
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>
O Menu permite a adição de duas imagens: uma imagem de logo no topo e uma no bottom.
A imagem de topo do menu fica dentro do container .inv-menu-header
.
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>