fix(header): MenuBurgerContent was sliding down too much and was miss…

[hudson-viana]

…ing the necessary DropdownMenu.Portal tag

Esse PR resolve a task #203. Porém é um workaround pois tudo indica que é um bug do Radix e não da nossa aplicação.

O que é o bug?

Ao clicar no menu hamburguer no mobile (e tablet) o menu desliza demais expondo uma margem superior desnecessária. Após aprofundar no assunto foi constatado também que não só ele expoe margem superior como também fica variando a altura que o menu expande. Conforme vídeo abaixo:

before-bug.mp4

Workaround

Eu tentei várias estratégias e alternativas (listadas abaixo) para solucionar esse bug mas todas elas não tiveram sucesso em solucionar o bug. Então o workaround atual é subir o menu utilizando o sideOffset={} (do Radix) para que mesmo ele variando a distancia que o menu aparece do trigger ele não exponha essa margem superior estranha pois tudo acontece em cima do header e por isso não expoem mais a margem estranha. Vídeo abaixo mostra o workaround.

after-workaround.mp4

Lista das estratégias e alternativas testadas que não solucionaram o bug

• é falta de alguma prop ou wrapper obrigatório? não, pois adicionei o DropdownMenu.Portalque realmente estava faltando mas isso não solucionou

• retirar todo o css do component e deixar só o esqueleto para testar se o bug continua -- tambem nao solucionou

• tem algum conflito de classes css? também não, testei apagando alguns códigos e não funcionou

• testei conflito entre sideOffset={} (no component ) e margin-top (no styled component). também não resolveu

• testei hipotese do React.forwardRef que a documentação fala que quando um componente usar asChild precisa utlizado o React.forwardRef, testei e nao resolveu. (conceito: https://www.radix-ui.com/primitives/docs/components/dropdown-menu#custom-apis)

• testei o conceito de Extending a primitive nao funcionou (conceito: https://www.radix-ui.com/primitives/docs/guides/styling#extending-a-primitive)

• tentei fazer um override da animação trabalhando com https://www.radix-ui.com/primitives/docs/components/dropdown-menu#origin-aware-animations e também com https://www.radix-ui.com/primitives/docs/components/dropdown-menu#collision-aware-animations mas nao funcionou

• verifiquei versão do dropdownmenu do radix e sim estamos já utilizando a mais recente (2.0.6)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
mentores-frontend	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 18, 2024 8:21pm