Criei um aplicativo React que usa uma barra lateral que deveria facilitar a entrada e saída, mas não faz isso. Ela simplesmente aparece enquanto empurra com sucesso o conteúdo para a direita e aparece quando clicada novamente.
O código usa
transition: transform 0.3s ease-in-out;
transform: translateX(-250px);
para mover a barra lateral para dentro e para fora da tela. Mas não parece estar funcionando no exemplo do sandbox. Funciona no meu aplicativo real, mas não animado.
Aqui está uma foto que mostra expandido
Este mostra que ele entrou em colapso :
Observe que a barra lateral está toda branca. Não consigo deixá-la com uma cor diferente.
Eu olhei para muitos outros exemplos, mas todos eles têm problemas que eu não gosto. Eu quero que o botão permaneça no lugar quando a bandeja abaixo dele desliza para dentro e para fora. A maioria dos exemplos empurra o cabeçalho também, o que requer que você mova o mouse para um local diferente para fechá-lo.
Gostaria também que o usuário tivesse a opção de fechar a barra lateral após a seleção ou permanecer aberta.
Criei um pequeno exemplo de sandbox . Eu portei um snipped do aplicativo principal, mas agora o conteúdo vai para baixo do menu em vez de para a direita dele. Espero que um de vocês, especialistas, possa me mostrar o que estou perdendo!