VerticalNavMenu

src/layouts/components/vertical-nav-menu/

Navigation high 1 uso

Menu de navegação lateral vertical do admin Pedbot. Customização do vs-sidebar do Vuesax com logo, itens dinâmicos via store, modo reduce (icons-only), hover-expand, swipe gestures mobile e ProfileDropDown na base. Composto por 3 sub-componentes gerenciados internamente pelo orchestrator.

Sidebar Expandido

Estado padrão: logo + texto, itens com ícone + nome, grupos expansíveis com submenu, badge chip, ProfileDropDown na base. Único uso real: Main.vue:4.

PEDBOT

Principal Dashboard Atendimento 5 Clientes

Configurações

Instâncias Usuários Integrações

Relatórios

Daniel Andrade

<v-nav-menu
  :navMenuItems = "navMenuItems"
  :title        = "appTitle"
  parent        = ".layout--main" />

<!-- Estrutura de navMenuItems: -->
<!--
[
  { header: 'Principal', items: [] },   // separador de seção
  { name: 'Dashboard', url: '/', icon: 'HomeIcon', slug: 'dashboard' },
  { name: 'Pedidos', icon: 'ShoppingCartIcon', submenu: [
    { name: 'Listagem', url: '/pedidos', slug: 'orders' },
    { name: 'Relatório', url: '/pedidos/relatorio', slug: 'orders-report' }
  ]}
]
-->

Modo Reduzido (Icons-Only)

Ativado pelo botão CircleIcon/DiscIcon no header — aciona TOGGLE_REDUCE_BUTTON na store. Textos e badges ocultos. MouseEnter expande temporariamente para mostrar nomes.

MouseEnter → sidebar expande temporariamente mostrando textos

MouseLeave → volta para icons-only

Estrutura de navMenuItems

O array navMenuItems aceita 3 tipos de item: header (separador de seção), item (link simples) e group (com submenu aninhável).

header

{ header: 'Seção', items: [] }

item

{ name: 'Dashboard', url: '/', icon: 'HomeIcon', slug: 'dashboard', tag: '3', tagColor: 'primary', isDisabled: false }

group

{ name: 'Pedidos', icon: 'ShoppingCartIcon', submenu: [
  { name: 'Listagem', url: '/pedidos', slug: 'orders' }, ...
] }

API

<!-- VerticalNavMenu — uso real (único no admin): -->
<v-nav-menu
  :navMenuItems = "navMenuItems"
  :title        = "appTitle"
  parent        = ".layout--main" />

<!-- Todos os comportamentos (reduced, mobile, hover-expand, 2FA-hidden)
     são gerenciados internamente via store — sem props extras. -->

Props — VerticalNavMenu

Nome	Tipo	Default	Descrição
`navMenuItems`	Array	—	Obrigatório. Items de menu da store de layout. Aceita header, item e group.
`title`	String	—	Texto ao lado da logo. Pode ser ocultado via `VUE_APP_DISABLE_LOGO_TITLE`.
`parent`	String	—	Seletor CSS do container pai do vs-sidebar (ex: `'.layout--main'`).
`logo`	String	—	Path da logo. Não passado no uso real — logo é lida via `VUE_APP_LOGO_PNG`.
`openGroupHover`	Boolean	false	Grupos abrem ao hover em vez de click. Não passado no uso real.
`reduceNotRebound`	Boolean	true	Prop do vs-sidebar — impede rebind do modo reduce ao redimensionar.

Sub-componentes

Componente	Descrição
`VerticalNavMenuItem`	Item simples — router-link ou link externo. Ícone Feather + texto + badge chip. Visibilidade via `hasPermission(rule='check')`.
`VerticalNavMenuGroup`	Grupo expansível — animação max-height 300ms expand / 50ms collapse. Ícone especial `MariaIcon` para o grupo MarIA. Aninhável recursivamente.
`ProfileDropDown`	Área de perfil na base. Ver NavbarDropdowns.

Comportamentos automáticos (via store)

Reduce mode: TOGGLE_REDUCE_BUTTON → icons-only. MouseEnter expande temporariamente.

Mobile (<1200px): overlay automático + botão X + swipe left/right (hammer.js).

2FA: v-if="$route.name !== 'two-factor'" — menu oculto na página de autenticação.

Shadow scroll: sombra abaixo do header quando lista está scrollada.

Dependências

Vuesax: vs-sidebar, vs-chip, vs-icon

Ext: vue-perfect-scrollbar, hammer.js (swipe via v-hammer)

SCSS: src/assets/scss/vuexy/components/verticalNavMenu.scss

Onde é usado

src/layouts/main/Main.vue