Navegação do shell — menu lateral e breadcrumb

Plataformas com dezenas de telas costumam virar um labirinto: você abre uma funcionalidade, não sabe mais onde está e recomeça da página inicial. No DATTA, o menu lateral e a trilha de navegação (breadcrumb) trabalham juntos para que você sempre saiba onde está — e volte a qualquer ponto com um clique.

Menu lateral

O menu lateral tem três estados, e alterna entre eles conforme o que você está fazendo:

• Expandido (280px) — mostra seções, grupos e itens com rótulo. É o estado inicial em desktop.
• Minimizado / rail (72px) — apenas os ícones dos itens de topo, todos centralizados. O menu colapsa automaticamente ao navegar para uma tela, ampliando a área útil, e volta ao estado expandido pelo botão de menu (hambúrguer).
• Drawer (celular e telas estreitas, abaixo de 768px) — o menu abre sobre o conteúdo, com fundo escurecido; fecha ao tocar fora.

Ao redimensionar a janela, o menu reavalia o modo em tempo real — ele não fica "preso" no layout errado ao cruzar o limite de 768px entre desktop e mobile.

Tooltips do rail

Com o menu minimizado, passe o mouse (ou navegue com o teclado) sobre qualquer ícone: um tooltip aparece à direita do rail com o nome e a descrição do item — por exemplo, "DATTA BI — Dashboards, modelos de dados e visuais analíticos". Clicar:

• em um item folha (Chat, Knowledge Catalog, Sistema…) navega direto;
• em um grupo (DATTA Extract, DATTA BI…) expande o menu já aberto naquele ponto.

As descrições vêm do mesmo catálogo de telas que alimenta a trilha de navegação — nome e descrição são sempre os mesmos nos dois lugares.

Sistema — todas as configurações em uma tela

Sistema é um item único do menu, com o ícone de engrenagem: um clique abre a tela de Sistema, que reúne em cartões todas as opções de configuração da plataforma. Não há mais submenu para expandir nem ramo de Segurança escondido dentro do menu — abrir a tela de Usuários passou de três cliques (abrir Configurar, abrir Segurança, clicar em Usuários) para dois (Sistema, e o cartão).

Os cartões vêm agrupados, na mesma ordem em que as configurações aparecem nas abas:

• Segurança — Usuários, Roles e Permissões e Meu Prompt.
• Plataforma — Geral, IA, Workspaces, Drivers JDBC, Certificados, DATTA Captain, Logs, Arquitetura, Manutenção e o Console do Cluster.
• Contextos — Gerenciar, Painéis e Ontologias.
• Conexões — Cadastro de Fontes, Status do ACOC e Fluxo de Dados.
• Data Layer — Visão Geral e cada motor de dados da plataforma.

Na tela você ainda tem:

• Busca por nome: o campo Buscar configuração filtra os cartões enquanto você digita, ignorando acentos — procurar por "conexoes" acha Conexões. A busca também olha a descrição do cartão, então "prompt" traz Meu Prompt. Sem resultado, a tela explica o que aconteceu e oferece limpar a busca.
• Só o que você pode usar: cartão de configuração restrita a administradores não aparece para quem não tem o perfil — a mesma regra que já valia para o menu antigo e para as abas.
• Console do Cluster abre em nova aba, sinalizado pelo selo Nova aba com ícone de link externo.
• Celular: abaixo de 768px os cartões empilham em coluna única, com área de toque confortável.

Cada cartão é um link de verdade: clicar navega sem recarregar a plataforma, Cmd/Ctrl+clique abre a configuração em nova aba e o botão voltar do navegador devolve você à tela de Sistema.

Abas horizontais dentro dos grupos

Depois de abrir uma configuração, as demais continuam a um clique: no topo do conteúdo, logo abaixo da trilha, aparece a fileira de abas horizontais com todos os grupos.

• Abas simples (Geral, IA, Logs…) abrem a tela correspondente diretamente.
• Abas de grupo (Segurança, Contextos, Conexões, Data Layer) exibem uma segunda fileira de sub-abas; Data Layer inclui a sub-aba Visão Geral com o panorama dos motores de dados.
• A fileira rola horizontalmente quando não cabe na largura da janela — inclusive no celular.
• Abas restritas a administradores só aparecem para quem tem o perfil.

Nada muda nos endereços: um deep-link como /index.html?view=settings-drivers continua abrindo a mesma tela — agora com a trilha DATTA › Sistema › Drivers JDBC e a aba correta acesa.

Breadcrumb

A trilha de navegação fica numa barra fixa no topo da área de conteúdo e reflete a hierarquia real do menu:

DATTA › Sistema › Data Layer › Neo4j

• Elos clicáveis: a raiz DATTA volta ao Chat; um ancestral com tela própria navega até ela (ex.: Sistema volta à tela com todos os cartões, Data Layer abre a visão geral dos motores); um ancestral estrutural abre o menu lateral naquele ponto. O último elo — a tela atual — não é clicável.
• URL sempre sincronizada: toda navegação atualiza o endereço (?view=…). Isso significa que você pode salvar qualquer tela nos favoritos, compartilhar o link com um colega e usar os botões voltar/avançar do navegador. Um deep-link como /index.html?view=settings-neo4j restaura a mesma tela, a mesma trilha e o menu no mesmo ponto. Cmd/Ctrl+clique em um elo abre em nova aba.
• Níveis profundos: telas com navegação interna (ex.: DATTA BI) informam ao shell os níveis abertos — a trilha vira DATTA › DATTA BI › Dashboards › <workspace> › <dashboard>, e clicar num nível profundo restaura exatamente aquele estado da tela.
• Colapso inteligente: acima de 4 níveis, o meio da trilha colapsa em … (clique para expandir); no celular ficam apenas a raiz e a tela atual.

Exemplo prático — voltar sem se perder

1. No menu lateral, clique em Sistema e, na tela de cartões, abra Neo4j, no grupo Data Layer. A trilha mostra DATTA › Sistema › Data Layer › Neo4j.
2. Copie a URL do navegador e cole em outra aba: a mesma tela abre, com a mesma trilha e o menu posicionado no mesmo ponto.
3. Clique em Data Layer na trilha para subir um nível, em Sistema para voltar à tela com todas as configurações, ou em DATTA para voltar direto ao Chat. O botão voltar do navegador faz o mesmo caminho.
4. Precisa comparar duas telas? Cmd/Ctrl+clique num elo da trilha — ou num cartão da tela de Sistema — e ela abre em nova aba, sem perder a atual.

Detalhes de arquitetura em componente de breadcrumb.