Navegação

Todo sistema tem a mesma moldura: cabeçalho com o logo e a pessoa conectada, menu lateral com os módulos, o conteúdo e, se o sistema quiser, o rodapé. Quem já usou um sistema do Tribunal sabe andar no próximo.

Quando usar

• A moldura em todas as telas depois do login, uma vez, no layout do app.
• A trilha (breadcrumb) quando a tela fica dois ou mais níveis abaixo do item do menu: Obras › Fórum de Alegre › Contrato 012/2026.
• O rodapé quando o sistema precisa mostrar a versão e o endereço do Tribunal. O logo do rodapé tem o tamanho do logo do cabeçalho em qualquer largura.
• No celular e no tablet, abaixo de 992 px, o menu lateral vira uma faixa sob o cabeçalho, que rola para o lado. Ela abre rolada até a tela atual e mostra uma seta na borda onde há mais links.

Componentes

• BaseAppShell: cabeçalho, menu lateral (nav), pessoa conectada, link "Pular para o conteúdo" e o slot footer.
• BasePage: cada tela dentro da moldura, com o título.
• BaseBreadcrumb: o caminho até a tela atual.
• BaseFooter: o rodapé institucional, no slot footer.
• BaseTabs: as partes de uma mesma tela. Abas não levam a outra tela.

Texto

• Itens do menu com substantivos curtos, iguais ao título da tela que abrem: "Contratos" abre a tela "Contratos".
• Grupos do menu com o nome da área: "Obras", "Secretaria".
• A trilha usa os mesmos nomes do menu e termina na tela atual, sem link.
• product com o nome do sistema ("Gestão de Obras") e unit com a unidade ("Secretaria de Engenharia").

Faça e não faça

Faça	Não faça
Um BaseAppShell no layout do app, com cada tela num BasePage.	Montar cabeçalho e menu dentro de cada página.
Marcar a tela aberta com current: true no menu.	Deixar a pessoa sem saber em que tela está.
Deixar o menu do celular como a faixa do BaseAppShell: ela abre no item atual e mostra a seta onde há mais links.	Esconder módulos do menu no celular para caber na tela.
Pôr o BaseFooter no slot footer da moldura.	Pôr o rodapé dentro do conteúdo da página.

Código

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { BaseAppShell, BaseBreadcrumb, BaseFooter, BaseLogo, BasePage, type NavGroup, type NavItem } from '@lab-inovacao-tjes/design-system'

const route = useRoute()
const router = useRouter()
const nav = computed<NavGroup[]>(() => [
  {
    label: 'Obras',
    items: [
      { label: 'Obras', href: '/works', icon: 'buildings', current: route.path.startsWith('/works') },
      { label: 'Contratos', href: '/contracts', icon: 'file-earmark-text', current: route.path.startsWith('/contracts') },
    ],
  },
])

function navigate(item: NavItem, event: MouseEvent): void {
  event.preventDefault()
  void router.push(item.href)
}
</script>

<template>
  <BaseAppShell product="Gestão de Obras" unit="Secretaria de Engenharia" home-href="/home" :nav="nav" user-name="Marta Coelho" @navigate="navigate">
    <template #logo><BaseLogo background="dark" /></template>
    <BasePage title="Contrato 012/2026">
      <BaseBreadcrumb :items="[{ label: 'Obras', href: '/works' }, { label: 'Fórum de Alegre', href: '/works/7' }, { label: 'Contrato 012/2026' }]" />
    </BasePage>
    <template #footer>
      <BaseFooter :version="appVersion" />
    </template>
  </BaseAppShell>
</template>

Na tela de referência

• P19, moldura: AppLayout.vue usa o BaseAppShell com o menu, a pessoa conectada e o painel de sair.
• P19 e P20, rodapé: o BaseFooter no slot footer, com a versão do sistema (no protótipo, "Versão protótipo").
• P19, trilha: em construção.
• P20: em construção.