/* * Casca visual do portal: sidebar de navegação (2 níveis, com suporte a um 3º nível expansível) * + topbar. Usa exclusivamente variáveis de cor do Bootstrap 5.3 (--bs-*) em vez de cores fixas, * pra herdar automaticamente o color mode ativo (data-bs-theme="light|dark" no ) sem * precisar de nenhuma folha de estilo "dark" separada. */ :root { --sidebar-width: 260px; --sidebar-collapsed-width: 4.5rem; --topbar-height: 60px; } html, body { height: 100%; } .app-shell { display: flex; min-height: 100vh; } /* ---------- Sidebar ---------- */ .app-sidebar { width: var(--sidebar-width); flex-shrink: 0; background-color: var(--bs-tertiary-bg); border-right: 1px solid var(--bs-border-color); /* Overflow tem que ficar "visible" (o padrão) — não dá pra usar overflow-y:auto aqui como antes, porque overflow-x acaba computando como "auto" também nesse caso (regra do CSS: quando um eixo não é "visible", o outro eixo deixa de ser "visible" de verdade) e isso corta o flyout do modo recolhido, que é position:absolute + left:100% escapando pra fora da sidebar de propósito. Se o menu crescer muito e precisar de scroll próprio, resolver com um wrapper interno dedicado a isso, não aqui. */ overflow: visible; transition: width 0.2s ease; } .sidebar-brand { /* Altura igual à do topbar (mesma var), pra a linha de baixo alinhar com a do topbar em vez de depender de padding (py-*) — que nunca bate exatamente com uma altura fixa em px. */ height: var(--topbar-height); border-bottom: 1px solid var(--bs-border-color); white-space: nowrap; display: flex; align-items: center; gap: 0.5rem; padding: 0 1rem; /* É um agora (era
) — sem isso herdaria cor/sublinhado de link (var(--bs-link-color), vermelho da marca) em vez de continuar neutro como antes. */ color: inherit; text-decoration: none; } .sidebar-brand:hover { color: inherit; } /* Ícone-gatilho de uma seção inteira, usado só no modo recolhido (rail) — ver media query de desktop mais abaixo. Nesse ponto (sidebar expandida) fica sempre escondido. */ .sidebar-group { position: relative; } .sidebar-group-trigger { display: none; width: 100%; height: 2.75rem; align-items: center; justify-content: center; background: none; border: 0; color: var(--bs-emphasis-color); font-size: 1.15rem; } .sidebar-group-trigger:hover, .sidebar-group-trigger.active { /* bg-subtle/text-emphasis (não a cor "sólida" + opacidade manual) porque essas duas variáveis já são conscientes de tema — trocam de tom sozinhas entre claro/escuro (ver brand.css) pra manter contraste de leitura em qualquer color mode. */ background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); } .sidebar-section-title { padding: 0.9rem 1rem 0.35rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; /* --bs-primary-text-emphasis (não --bs-primary puro) porque essa variante já é consciente de tema — troca de tom sozinha entre claro/escuro (ver brand.css) mantendo contraste de leitura, mesma lógica já usada em .sidebar-group-trigger.active acima. */ color: var(--bs-primary-text-emphasis); } .sidebar-nav .nav-link { color: var(--bs-emphasis-color); border-radius: 0.375rem; margin: 0.1rem 0.6rem; padding: 0.5rem 0.75rem; } .sidebar-nav .nav-link:hover { background-color: var(--bs-secondary-bg); } .sidebar-nav .nav-link.active { background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); font-weight: 600; } .sidebar-nav .bi { width: 1.1rem; text-align: center; flex: 0 0 auto; } .sidebar-submenu .nav-link { padding-left: 2.25rem; font-size: 0.925rem; } /* Recuo extra pra um 3º nível de submenu (ex.: WhatsApp > Listas de Transmissão > Cadastro/Envio) — a regra acima vale pra qualquer profundidade dentro de um .sidebar-submenu (não cresce sozinha), então sem isso um item de 3º nível fica alinhado com o de 2º nível. */ .sidebar-submenu .sidebar-submenu .nav-link { padding-left: 3.25rem; } .sidebar-nav .chevron { transition: transform 0.2s ease; font-size: 0.75rem; } .sidebar-nav .chevron.chevron-open { transform: rotate(180deg); } /* ---------- Topbar ---------- */ .app-topbar { height: var(--topbar-height); flex-shrink: 0; background-color: var(--bs-body-bg); border-bottom: 1px solid var(--bs-border-color); position: sticky; top: 0; z-index: 1030; } .theme-toggle-btn { color: var(--bs-emphasis-color); } [data-bs-theme="dark"] .theme-icon-light { display: none; } [data-bs-theme="light"] .theme-icon-dark { display: none; } /* ---------- Conteúdo ---------- */ .app-content-wrapper { display: flex; flex-direction: column; flex: 1; min-width: 0; } .app-main { flex: 1; /* Mesmo fundo do body de propósito — a área de conteúdo não deve parecer "uma caixa" à parte; hierarquia visual vem dos cards (.card) dentro dela, não de um tom de cinza diferente aqui (que em dark mode fica pouco perceptível e confunde onde o conteúdo termina). */ background-color: var(--bs-body-bg); padding: 1.5rem; } /* ---------- Abaixo de lg: sidebar é off-canvas — "toggled" = visível ---------- */ @media (max-width: 991.98px) { .app-sidebar { position: fixed; inset: 0 auto 0 0; height: 100vh; transform: translateX(-100%); transition: transform 0.25s ease; z-index: 1045; /* No desktop a sidebar precisa de overflow:visible pro flyout do modo recolhido escapar pra fora dela (ver .app-sidebar base, mais acima) — mas no mobile não existe flyout, é o painel off-canvas inteiro, expandido. Sem scroll próprio aqui, com muitas seções/itens o painel cresce mais que a tela e as últimas opções ficam inalcançáveis (não dá nem pra rolar a página, porque a sidebar é position:fixed). */ overflow-y: auto; -webkit-overflow-scrolling: touch; } .app-shell.sidebar-toggled .app-sidebar { transform: translateX(0); box-shadow: 0.5rem 0 1rem rgba(0, 0, 0, 0.15); } .sidebar-backdrop { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.4); z-index: 1040; } } /* ---------- A partir de lg: mesmo botão recolhe a sidebar pra um rail só de ícones — "toggled" aqui significa RECOLHIDA (sentido oposto ao do mobile, de propósito: é o mesmo clique, mas cada breakpoint decide o que "toggled" quer dizer pra ele). Um ícone por seção (NavSection.Icon); passar o mouse nele abre .sidebar-group-content como flyout. ---------- */ @media (min-width: 992px) { .app-shell.sidebar-toggled .app-sidebar { width: var(--sidebar-collapsed-width); } .app-shell.sidebar-toggled .sidebar-brand { /* centraliza o ícone igual aos .sidebar-group-trigger abaixo — sem isso ele fica alinhado à esquerda (sobra do padding pensado pra ícone + texto "Portal Solidcon"). */ justify-content: center; padding: 0; } .app-shell.sidebar-toggled .sidebar-brand span { display: none; } .app-shell.sidebar-toggled .sidebar-group-trigger { display: flex; } .app-shell.sidebar-toggled .sidebar-group-content { display: none; } .app-shell.sidebar-toggled .sidebar-group:hover .sidebar-group-content { display: block; position: absolute; left: 100%; top: 0; min-width: 235px; background-color: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: 0.5rem; box-shadow: 0.5rem 0 1rem rgba(0, 0, 0, 0.25); padding: 0.5rem 0; z-index: 1050; } }