Especificação Arquitetural de Navegação (Bloco 6)
O layout mestre é composto pelas seguintes classes essenciais de estrutura:
- .volt-header: Barra superior fixa com altura padrão de 64px, acabamento em vidro translúcido (
backdrop-filter: blur(16px)) e divisor de contorno de 10% de opacidade. - .volt-brand: Logomarca combinando o contorno chanfrado com raio vetorial SVG (
.volt-brand-mark) e tipografia display (.volt-brand-text). - .volt-pulse-dot: Ponto luminoso de 8px com sombra pulsante esmeralda para sinalização de conectividade ativa do nó ou cluster.
- .volt-sidebar: Barra lateral com largura estrita de 240px em Dark Obsidian elevado (
--volt-night-raised). - .volt-sidebar-link.is-active: Destaque luminoso ciano com borda de 25% de opacidade e tipografia em Karla com peso 700.
- .volt-layout-app: Contêiner flexível desacoplado que ocupa o restante da altura útil da tela (
min-height: calc(100vh - 64px)).
Contrato de Consumo Downstream (Demanda 2308)
Fragmento ERB canônico para renderização de itens da barra lateral em app/views/components/_sidebar.erb:
<aside class="volt-sidebar">
<nav class="volt-sidebar-nav">
<% menu_items.each do |item| %>
<a href="<%= item.url %>" class="volt-sidebar-link <%= 'is-active' if item.active? %>">
<%= item.icon_svg %>
<span><%= item.label %></span>
</a>
<% end %>
</nav>
</aside>