/* * O menu lateral do painel: trilho colapsado por padrão, hover que SOBREPÕE e alfinete. * * A regra de ouro deste arquivo é NÃO haver reflow do conteúdo no hover. No Filament v5, * com `sidebarCollapsibleOnDesktop()`, o `aside` fica `position: sticky` dentro do flex * `.fi-layout` — abrir a sidebar alarga o aside e EMPURRA a `.fi-main-ctn`, o que * remontaria a tabela a cada passagem do cursor. Aqui o aside vira `position: fixed` * (sai do fluxo) e a `.fi-main-ctn` ganha uma margem FIXA: a largura do trilho quando * solta, a largura cheia quando fixada (atributo `data-sidebar-fixada` no , * gravado pelo apostolos-sidebar.js). O hover só muda a largura do aside, que flutua * SOBRE o conteúdo. * * O seletor usa o id `#fi-main-sidebar` de propósito: as regras do tema (`lg:sticky`, * `width: var(--sidebar-width)`) têm até cinco classes de especificidade, e o id vence * todas sem `!important`. * * Abaixo de 1024px nada disso se aplica — o overlay móvel nativo do Filament fica intacto. */ @media (min-width: 1024px) { /* O aside sai do fluxo e vira trilho de ícones. O top/altura sob o topbar vêm das regras nativas (`.fi-body-has-topbar .fi-sidebar`), que continuam valendo. */ .fi-body-has-sidebar-collapsible-on-desktop #fi-main-sidebar { position: fixed; inset-inline-start: 0; width: var(--collapsed-sidebar-width, 4.5rem); z-index: 25; /* Sobreposto ao conteúdo, o fundo transparente nativo (`lg:bg-transparent`) deixaria a tabela aparecer através dos rótulos — precisa ser opaco, na mesma cor do fundo do painel para o estado fixado parecer nativo. */ background-color: var(--gray-50); transition: width 200ms ease, box-shadow 200ms ease; } .dark .fi-body-has-sidebar-collapsible-on-desktop #fi-main-sidebar { background-color: var(--gray-950); } .fi-body-has-sidebar-collapsible-on-desktop #fi-main-sidebar.fi-sidebar-open { width: var(--sidebar-width, 20rem); } /* Aberta SEM estar fixada = espiada por hover: a sombra avisa que ela está flutuando sobre o conteúdo, e não empurrando. Fixada, sem sombra: é layout. */ html:not([data-sidebar-fixada]) .fi-body-has-sidebar-collapsible-on-desktop #fi-main-sidebar.fi-sidebar-open { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.15), 0 8px 10px -6px rgb(0 0 0 / 0.1); border-inline-end: 1px solid rgb(0 0 0 / 0.06); } html.dark:not([data-sidebar-fixada]) .fi-body-has-sidebar-collapsible-on-desktop #fi-main-sidebar.fi-sidebar-open { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.4); border-inline-end: 1px solid rgb(255 255 255 / 0.1); } /* A margem do conteúdo é FIXA por estado (trilho ou fixada), nunca pelo hover: é isso que impede o reflow. A transição vem do próprio Filament, que já aplica `transition-property: all` na .fi-main-ctn no modo colapsável. */ .fi-body-has-sidebar-collapsible-on-desktop .fi-layout > .fi-main-ctn { margin-inline-start: var(--collapsed-sidebar-width, 4.5rem); } html[data-sidebar-fixada] .fi-body-has-sidebar-collapsible-on-desktop .fi-layout > .fi-main-ctn { margin-inline-start: var(--sidebar-width, 20rem); } /* No trilho, o padding nativo do nav (px-6 = 3rem) estoura os 4.5rem; encolhido, os botões esticam na largura restante e os ícones se centralizam sozinhos. */ .fi-body-has-sidebar-collapsible-on-desktop #fi-main-sidebar .fi-sidebar-nav { transition: padding 200ms ease; } .fi-body-has-sidebar-collapsible-on-desktop #fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav { padding-inline: 0.75rem; } /* * A FAIXA DE TÍTULO DE GRUPO TEM A MESMA ALTURA NOS DOIS ESTADOS. * * O Filament esconde `.fi-sidebar-group-btn` com `x-show`, que escreve * `style="display: none"` inline — e sem ela o grupo encolhe 44px (os 40px da faixa * mais os 4px de `gap`). Medido antes deste bloco: os ícones ficavam em * 104 / 172 / 216 / 284 no trilho e em 104 / 216 / 260 / 372 com a barra aberta. * Cada item abaixo de "Simulados" descia 44px ao passar o cursor, e abaixo de * "Acervo", 88px — o menu inteiro escorregava debaixo do mouse, e mirar um ícone * exigia esperar a animação terminar. * * A altura é declarada FORA da distinção entre os dois estados de propósito. Uma * primeira versão só a reservava no trilho, e sobrou um salto transitório: a classe * `fi-sidebar-open` entra no mesmo instante do clique, a etiqueta real do Alpine só * aparece depois da transição de entrada, e no meio do caminho não havia altura * nenhuma — os ícones subiam 44px e voltavam. Com a caixa fixa nos dois estados, * o que muda no hover é só a largura e o CONTEÚDO da faixa. * * O `!important` é o único jeito de vencer um estilo inline, e é por isso que ele * aparece aqui e em nenhum outro lugar deste arquivo. */ .fi-body-has-sidebar-collapsible-on-desktop #fi-main-sidebar .fi-sidebar-group-btn { display: flex !important; /* 2.5rem é a altura que a faixa tem com a barra aberta, medida no componente. Sem isto, escondido o rótulo, a caixa encolheria para os 16px do padding. */ min-height: 2.5rem; } /* * No trilho, no lugar do texto entra um filete: 40px de vazio entre ícones leriam * como falha de alinhamento, e a separação por linha de 1px é a mesma que o resto do * painel usa para dividir superfície. O clique de colapsar grupo é neutralizado — * sem rótulo não há o que colapsar. */ .fi-body-has-sidebar-collapsible-on-desktop #fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-btn { align-items: center; justify-content: center; padding-inline: 0; pointer-events: none; } .fi-body-has-sidebar-collapsible-on-desktop #fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-btn > * { display: none; } .fi-body-has-sidebar-collapsible-on-desktop #fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-btn::after { content: ''; width: 1.5rem; height: 1px; background-color: var(--gray-300); } .dark .fi-body-has-sidebar-collapsible-on-desktop #fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-btn::after { background-color: rgb(255 255 255 / 0.12); } /* Os chevrons de abrir/fechar do topbar disputariam com o hover e com o alfinete (abririam um estado "aberta sem fixar" que o mouseleave não sabe desfazer, porque o cursor nunca entrou no aside). O alfinete é o único controle no desktop. */ .fi-body-has-sidebar-collapsible-on-desktop .fi-topbar .fi-topbar-collapse-sidebar-btn-ctn { display: none; } } /* ------------------------------------------------------------------ */ /* O botão de fixar (render hook SIDEBAR_FOOTER) */ /* ------------------------------------------------------------------ */ .apostolos-sidebar-fixar-ctn { margin: 0.75rem 1rem 1rem; padding-top: 0.75rem; border-top: 1px solid rgb(0 0 0 / 0.08); } .dark .apostolos-sidebar-fixar-ctn { border-top-color: rgb(255 255 255 / 0.1); } /* Fixar só faz sentido no desktop; no drawer móvel o menu já fecha sozinho ao navegar. */ @media (max-width: 1023.98px) { .apostolos-sidebar-fixar-ctn { display: none; } } .apostolos-sidebar-fixar-btn { display: flex; width: 100%; align-items: center; justify-content: center; gap: 0.75rem; border-radius: 0.5rem; padding: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--gray-500); background-color: transparent; cursor: pointer; transition: background-color 75ms ease, color 75ms ease; } .apostolos-sidebar-fixar-btn:hover, .apostolos-sidebar-fixar-btn:focus-visible { background-color: var(--gray-100); } .dark .apostolos-sidebar-fixar-btn { color: var(--gray-400); } .dark .apostolos-sidebar-fixar-btn:hover, .dark .apostolos-sidebar-fixar-btn:focus-visible { background-color: rgb(255 255 255 / 0.05); } .apostolos-sidebar-fixar-icone { width: 1.25rem; height: 1.25rem; flex-shrink: 0; transition: transform 150ms ease; } .apostolos-sidebar-fixar-rotulo { flex: 1; text-align: start; white-space: nowrap; color: var(--gray-700); } .dark .apostolos-sidebar-fixar-rotulo { color: var(--gray-200); } /* Fixada: o alfinete "espeta" (gira) e ganha a cor primária, para o estado ser legível de relance mesmo sem o rótulo. */ html[data-sidebar-fixada] .apostolos-sidebar-fixar-icone { transform: rotate(45deg); color: var(--primary-600); } html.dark[data-sidebar-fixada] .apostolos-sidebar-fixar-icone { color: var(--primary-400); } /* ------------------------------------------------------------------ */ /* Movimento reduzido: os estados continuam, só as transições somem. */ /* ------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .fi-body-has-sidebar-collapsible-on-desktop #fi-main-sidebar, .fi-body-has-sidebar-collapsible-on-desktop #fi-main-sidebar .fi-sidebar-nav, .fi-body-has-sidebar-collapsible-on-desktop .fi-layout > .fi-main-ctn, .apostolos-sidebar-fixar-icone { transition: none; } }