/* ===================================================================== Menu lateral que abre ao passar o mouse — Maxal Vale para o painel da empresa e para o Painel Master. O pedido: "gostaria que ele abrisse quando passasse o mouse, mas quando tirar ele fechasse ficando apenas um pedaço, dando mais espaço para o sistema". O Filament já sabe encolher a barra (o botão de recolher existe); o que não existe é abrir sozinha ao chegar perto. Aqui a barra encolhida vira uma faixa de ícones, e o ponteiro do mouse a abre por cima do conteúdo — SEM empurrar a página. Empurrar era a alternativa óbvia e está errada: a tabela inteira pularia para o lado toda vez que o mouse passasse raspando na borda esquerda, e o usuário perderia a linha que estava lendo. ===================================================================== */ /* Só vale onde há mouse de verdade. `hover: hover` exclui telas de toque, onde não existe "passar o mouse sem clicar": no celular o primeiro toque viraria hover e o menu abriria sozinho em cima do conteúdo. Lá o botão de recolher do Filament continua sendo o caminho. A largura mínima protege o tablet em pé, onde a barra já se comporta como gaveta. */ @media (hover: hover) and (pointer: fine) and (min-width: 1024px) { /* A classe entra no pelo JS quando a barra está encolhida. Não uso o atributo do Alpine direto porque ele muda entre versões do Filament, e uma classe nossa é contrato nosso. */ html.maxal-menu-espia .fi-sidebar { /* Fica por cima do conteúdo em vez de empurrá-lo. */ z-index: 40; transition: width 200ms ease; } html.maxal-menu-espia .fi-sidebar:hover { width: var(--maxal-menu-largura, 16rem); box-shadow: 0 10px 40px -10px rgba(15, 23, 42, 0.35); } /* Os rótulos dos itens — e o `!important` que não é preguiça. O menu abria e mostrava SÓ OS ÍCONES. Foi o que o Max relatou usando o sistema: "ele abre mas não com as informações; só volta a mostrar se você clicar na seta". A causa: com a barra encolhida, o Filament esconde cada rótulo com `style="display: none"` INLINE, escrito pelo Alpine. Regra de folha de estilo não vence estilo inline — nem com seletor mais específico. A opacidade que estava aqui era gasta em elemento que não ocupava espaço nenhum. As duas saídas eram mudar o estado do Alpine (abrir de verdade) ou vencer o inline. Abrir de verdade traz o rótulo E empurra o conteúdo, que é justamente o que este arquivo existe para não fazer — a tabela pularia para o lado a cada passada de mouse. Fica o `!important`, que é local, reversível e mexe só no desenho. `display` volta a ser `block` porque é o valor que o próprio Filament usa com a barra aberta. */ html.maxal-menu-espia .fi-sidebar .fi-sidebar-item-label, html.maxal-menu-espia .fi-sidebar .fi-sidebar-group-label { transition: opacity 140ms ease; white-space: nowrap; } html.maxal-menu-espia .fi-sidebar:hover .fi-sidebar-item-label, html.maxal-menu-espia .fi-sidebar:hover .fi-sidebar-group-label, html.maxal-menu-espia .fi-sidebar:hover .fi-sidebar-group-btn, html.maxal-menu-espia .fi-sidebar:hover .fi-sidebar-item-badge-ctn, html.maxal-menu-espia .fi-sidebar:hover .fi-sidebar-header-logo-ctn { display: block !important; opacity: 1; } /* O crachá é um contador dentro da linha, e não um bloco: com `display: block` ele desceria para a linha de baixo, empurrando o rótulo que acabamos de trazer de volta. */ html.maxal-menu-espia .fi-sidebar:hover .fi-sidebar-item-badge-ctn { display: inline-flex !important; } /* O conteúdo NÃO se mexe: a margem continua a da barra encolhida, porque a barra aberta está flutuando por cima. É o que dá o "espaço para o sistema" que o Max pediu. */ html.maxal-menu-espia .fi-main-ctn { transition: margin 200ms ease; } } /* Sem mouse — celular, tablet, quem navega por teclado ou leitor de tela: nada disso se aplica, e o comportamento padrão do Filament continua valendo inteiro. Um menu que só abre com hover seria um menu que não abre para quem usa teclado. */