Menu Navegação

Sobre

Componente base para um menu de navegação de 3 níveis, indicado principalmente para criação de menus principais de navegação do site (os que ficam no cabeçalho).

Dependências

Store

| Prop | Descrição | Tipo | Uso | |---|---|---|---| | screenWidth 1.1.3 | Variável encontrada no módulo principal da $store, responsável por conter o valor atualizado da largura da tela. | Variável da $store. | $store.state.screenWidth | | toggleMenu 1.1.3 | Mutation contida no módulo de menu, que, pertence ao de cabecalho, com a função de alterar o valor da variável, existente no mesmo módulo, menuOpen, responsável por abrir ou fechar o menu. | Mutation. | $store.commit('cabecalho/menu/toggleMenu') | | menuOpen 1.1.3 | Variável responsável pela abertura/fechamento do menu principal. | Variável da $store. | $store.state.cabecalho.menu.menuOpen | | tipoImg 1.1.3 | Variável que contém o resultado da validação de dispositivo, assim fazendo com que em ambientes Mac o site use jpg/png e em outros ambientes, webp. | Variável da $store. | $store.state.tipoImg | | menuData 1.1.3 | Variável que contém os dados do menu principal. | Variável da $store. | $store.state.cabecalho.menu.menuData |

Instalação

• Instale o app através do seu terminal

npm install @wapstore/menu-navegacao

• Valide se seu arquivo package.json possui a dependência

"dependencies": {
  "@wapstore/menu-navegacao": "^1.1.3"
}

Agora a loja está apta para o uso da aplicação.

Uso

O componente de Menu Navegação pode ser inserido em qualquer lugar da pasta "components" ou "pages". Neste arquivo você pode inserir todas as props e slots que o componente aceita, além de seus estilos.

Exemplo

-Este é um exemplo da aplicação de um arquivo padrão para um Menu institucional no rodapé:

<template>
  <menu-navegacao :key="$route.fullPath">
    <template #logo>
      <img
        src="~/static/img/geral/logo.png"
        alt="Logo Loja"
        :width="90"
        :height="33"
      >
    </template>
    <template #arrow>
      <img src="~/static/img/geral/arrow.svg" alt="" width="5px" height="8px">
    </template>
  </menu-navegacao> 
</template>

<script>
import MenuNavegacao from '@wapstore/menu-navegacao';
export default {
  components: {
    MenuNavegacao
  },
  async fetch () {
    // Request do menu
    await this.$axios.request({
      method: 'get',
      url: '/v2/front/struct/menus/menu-principal'
    }).then(response => {
      this.$store.commit('cabecalho/menu/setMenu', response.data);
    }).catch(response => {
      console.error(response.response.data);
    });
  }
};
</script>
<style>
  ...
</style>

Recursos

Props

| Prop | Descrição | Tipo | Valor padrão | |---|---|---|---| | enableClose 1.1.3 | Ativa/desativa o botão fechar do menu mobile. | Boolean | true | | bannerSize 1.1.3 | Define tamanho dos banners do menu desktop (caso haja). | Object | { height: 400, width: 200 } | | menuDropDown 1.1.3 | Ativa/desativa o formato de menu dropdown. | Boolean | false |

Slots

| Slot | Descrição | Name | Exemplo de uso | |---|---|---|---| | Logo 1.1.3 | Slot para inserção da logo no topo do menu mobile. | logo | <menu-navegacao><template #logo><img src="logo.png" alt="Logo"></template></menu-navegacao> | | Botão fechar 1.1.3 | Slot para alteração do ícone do botão de fechar do menu. | closeMenuBtIcon | <menu-navegacao><template #closeMenuBtIcon><img src="icone.png" alt="icone"></template></menu-navegacao> | | Arrow dos itens do menu 1.1.3 | Ícone de flecha para os itens do menu mobile. | arrow | <menu-navegacao><template #arrow><img src="arrow.png" alt="arrow"></template></menu-navegacao> | | Área do usuário mobile 1.1.3 | Slot para personalização da área do usuário no mobile. | areaUserMobile | <menu-navegacao><template #areaUserMobile>/*...*/</template></menu-navegacao> | | Label do botão voltar nível 2 1.1.3 | Use esse slot para alterar o texto dentro do botão voltar presente no nível 2 do mobile. | labelBotaoVoltarTwo | <menu-navegacao><template #labelBotaoVoltarTwo="{ data }">{{ data.parent.label }}</template></menu-navegacao> | | Label do botão voltar nível 3 1.1.3 | Use esse slot para alterar o texto dentro do botão voltar presente no nível 3 do mobile. | labelBotaoVoltarThree | <menu-navegacao><template #labelBotaoVoltarThree="{ data }">{{ data.parent.label }}</template></menu-navegacao> | | Elemento extra 1.1.3 | Use esse slot para adicionar uma estrutura extra no final do menu mobile. | extra | <menu-navegacao><template #extra>{{ data.parent.label }}</template></menu-navegacao> |

| Slot | Props do slot | Descrição | Tipo | |---|---|---|---| | Label do botão voltar nível 2 1.1.3 | data | Informação do elemento pai refente ao menu atual. | Object | | Label do botão voltar nível 3 1.1.3 | data | Informação do elemento pai refente ao menu atual. | Object |

Eventos

| Evento | Descrição | Argumentos | |---|---|---| | hoverItemDesktop 1.1.3 | Evento emitido quando acontece o mouseover e o mouseleave no item nível do menu desktop. | status: Descrição: Se for o evento mouseover é passado no argumento true, se for o evento mouselave é passado false. Tipo: Boolean. | | beforeChangeSubmenuMobile 1.1.3 | Evento emitido antes da troca de subnível do menu mobile. | nivelTo: Descrição: Nível para qual o usuário vai navegar. Tipo: Number. nivelFrom: Descrição: Nível que o usuário esta saindo. Tipo: Number | | afterChangeSubmenuMobile 1.1.3 | Evento emitido depois da troca de subnível do menu mobile. | currentNivel: Descrição: Atual nível, apos troca de subnível. Tipo: Number. |

Estilização

Para a estilização, basta utilizar estilos sem escopos dentro do componente onde for inserido, utilizando sempre de um ID ou classe específica para a chamada do componente, para que em outras chamadas o estilo não influencie. Caso o estilo seja para várias chamadas do componente é recomendado a inserção dos estilos em um arquivos CSS separado.

Classes CSS

• Navegação pelos subníveis do menu mobile
  • Descrição: Se você procura uma forma de estilizar o menu quando navegado para um certo subnível do menu.
  • Classes
    • menuPrincipal-subNiveis
      • Descrição: Essa classe é exibida quando um subnível diferente do nível zero está ativo.
    • menuPrincipal-currentNivel-{atualNivel}
      • Descrição: Essa classe é alterada conforme o nível atual do usuário, {atualNivelMenuMob} é a representação de um número, vai de 1 a nível 3. Exemplo: menuPrincipal-currentNivel-2.