229-multi-level-dropdown
229-multi-level-dropdown copied to clipboard
fireship-io
Transition bugs
These lines will resolve a problem on transitioning, you can notice them when adding some right Icon.
⚽ is the html entity for a soccer ball emoji, I think the one you want is actually ›. Link: https://www.compart.com/en/unicode/U+203A.
Everything else looked great and I added them into my own project.
It will help you notice what i'm talking about, https://youtu.be/IF6k0uZuypA?t=999 Put slow motion and pay attention on hover effect in each DropdownItem.
This problem occurs because .menu is only affect by the dropdown padding when the transition is finished. Thefore, adding the padding in .menu itself and setting box-sizing: border-box, to not mess up width 100%, solves the issue.
I'm agreeing with your changes. It looks great! I've even implemented them in my own project. What my issue was is that the html entity you're replacing a chevron with is actually the entity for a soccer ball emoji. Unfortunately, typing either in the comments causes them to render as their entities, so it might have been misunderstood. The line change on 87 is what I'm referring to.