HorizontalNavMenu

src/layouts/components/horizontal-nav-menu/

Navigation medium 1 uso

Menu de navegação horizontal do admin Pedbot. Renderiza os mesmos navMenuItems do VerticalNavMenu, mas em formato de barra horizontal via vs-navbar. Ativo quando layoutType='horizontal' nas configurações de tema. Composto por 4 sub-componentes que são instanciados automaticamente pelo orchestrator.

Light (navbarColor #fff)

Barra branca — padrão em tema claro. Items: ícone + texto. Group items com seta de dropdown. Header items como separadores de texto.

Main Dashboard Clientes Atendimento 3

Configurações

<h-nav-menu
  :class="[
    {'text-white' : isNavbarDark  && !isThemeDark},
    {'text-base'  : !isNavbarDark && isThemeDark}
  ]"
  :navMenuItems="navMenuItems" />

Dark (navbarColor #10163a)

Barra escura — ativa em tema dark. navbarColor é lido da store de tema internamente (não é prop). Textos ficam brancos via classe text-white passada pelo pai.

Main Dashboard Clientes Atendimento 3

Configurações

<!-- A variante dark é controlada pela store de tema, não por prop. -->
<!-- navbarColor=#10163a quando layoutType='horizontal' e tema dark ativo. -->
<!-- O único controle externo é :navMenuItems — mesmos dados do VerticalNavMenu. -->
<h-nav-menu :navMenuItems="navMenuItems" />

Em Contexto — Layout Horizontal

No layout horizontal, o HorizontalNavMenu aparece abaixo do TheNavbarHorizontal (topbar), formando uma segunda barra dedicada à navegação principal.

Dashboard Clientes Atendimento

Área de conteúdo principal

Sub-componentes

O orchestrator HorizontalNavMenu instancia automaticamente os 3 sub-componentes conforme o tipo de cada item no array navMenuItems.

HorizontalNavMenu.vue

Orchestrator — itera navMenuItems e renderiza header, group ou item. Controla navbarColor via store.

HorizontalNavMenuItem

Item simples — router-link com ícone + texto + chip badge opcional.

HorizontalNavMenuGroup

Grupo com dropdown horizontal — texto + seta, submenu ao hover/click. Prop bottom posiciona abaixo do header.

HorizontalNavMenuHeader

Separador de seção — exibe texto uppercase sem link. Equivalente ao label de grupo no menu vertical.

API

<!-- HorizontalNavMenu: apenas 1 prop obrigatória. -->
<!-- navbarColor é lido internamente da store (não é prop). -->
<!-- Sub-componentes são renderizados automaticamente. -->
<h-nav-menu
  :class="[
    {'text-white' : isNavbarDark && !isThemeDark},
    {'text-base'  : !isNavbarDark && isThemeDark}
  ]"
  :navMenuItems="navMenuItems" />

Props

Nome	Tipo	Obrig.	Descrição
`navMenuItems`	Array	Sim	Array de items de menu — mesma estrutura usada pelo VerticalNavMenu. Vem da store `layout/navMenuItems`.

navbarColor não é prop — é lido diretamente da store de tema (navbarColor no state). Branco (#fff) no light, #10163a no dark.

Dependências

Vuesax: vs-navbar, vs-chip

Custom: feather-icon

Store: theme/navbarColor

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

Onde é usado

src/layouts/main/Main.vue