Barra de navegação

AlpopNavbar é a barra superior: uma área de marca, uma faixa horizontal de itens de navegação e uma área do usuário. É apenas layout.

É desacoplado do router e da autenticação: os itens são passados via prop e clicar em um item emite select com o item (o app decide a rota). A área do usuário é um slot — coloque nela alpop-notifications-dropdown / alpop-profile-menu. Sem área de usuário, os rótulos signInLabel / signUpLabel renderizam os botões públicos que emitem sign-in / sign-up; um slot #actions os substitui.

Também compõe o topo de AlpopStaticNavbarPage e AlpopStaticSidebarPage.

alpop-navbar(
  :items="[{ key: 'home', label: 'Início', active: true }, { key: 'contracts', label: 'Contratos' }]",
  :notifications="notifications",
  :unread-count="unreadCount",
  @select="onSelect"
  @notification-select="onNotificationSelect"
)
  template(#brand)
    alpop-logo
  template(#user-area)
    alpop-profile-menu(:name="user.name", :items="menuItems")

Props

Prop	Tipo	Padrão	Descrição
items	Array	[]	Itens de navegação { key, label, active }
notifications	Array	undefined	Notificações; presença opta pelo sino padrão da navbar
unreadCount	Number	0	Quantidade exibida no badge do sino
notificationsLoading	Boolean	false	Exibe carregamento no menu de notificações
notificationsClickable	Boolean	true	Permite clique nas notificações
formatNotificationTime	Function	identidade	Formata createdAt de cada notificação
notificationsTitle	String	null	Sobrescreve título/aria-label do menu de notificações
notificationsEmptyLabel	String	null	Sobrescreve estado vazio do menu de notificações
signInLabel	String	undefined	Rótulo do botão entrar; presença opta pelos botões padrão
signUpLabel	String	undefined	Rótulo do botão cadastrar; presença opta pelos botões padrão

Basta a presença de signInLabel / signUpLabel (mesmo como null) para optar pelos botões padrão. Sem um valor explícito, o rótulo cai para o padrão traduzido (components.navbar.signIn = "Entrar", components.navbar.signUp = "Cadastrar") via mixin translatable.

Slots

Slot	Descrição
brand	Marca/logo no início da barra
user-area	Área do usuário ao final (dropdown de notificações, perfil)
actions	Substitui os botões públicos padrão

Eventos

Evento	Payload	Descrição
select	item	Emitido ao clicar em um item de navegação
notification-open	—	Emitido ao abrir o menu de notificações
notification-close	—	Emitido ao fechar o menu de notificações
notification-select	notification	Emitido ao clicar em uma notificação
notification-load-more	—	Emitido ao rolar até o fim das notificações
sign-in	—	Emitido pelo botão entrar padrão
sign-up	—	Emitido pelo botão cadastrar padrão