@Ahmed-Elbald
Posted
Hey Opeoluwa,
I generally like your solution but I think it could be better with some touches:
- All the transitions in the page happens all at a sudden. So it would be better if you added some transition-duration to those elements to make the page a little bit smoother .
- If the dropdown is opened, you can add an option that the dropdown menu closes automatically when the user click outside it. (that's implemented in my solution)
- In small screens, when the nav gets opened, the body's
background-color
gets changed while it could be better if you added an overlay that has the aheight: 100vh; width: 0;
and when the user opens the nav, this overlay'swidth
gets changed to 100%. By doing that, This process will happen smoothly. If you don't know what I mean.. (that's also implemented in my solution). - You also have some issues with accessibility. I don't mind helping you solve them
I hope you find my feedback beneficial. Thank You
Marked as helpful
@Opeoluwa-Ogunlaja
Posted
@Ahmed-Elbald Thank you very very much. I'll try and implement them 🙂. Thank you.
@Opeoluwa-Ogunlaja
Posted
@Ahmed-Elbald I can use the same method for my sidenav for the dropdowns right?
@Ahmed-Elbald
Posted
@Opeoluwa-Ogunlaja Sorry what method do you mean ?
@Opeoluwa-Ogunlaja
Posted
@Ahmed-Elbald Changing class names and using simple css transitions
@Ahmed-Elbald
Posted
@Opeoluwa-Ogunlaja Yeah u can use it anywhere as long as the CSS property is animatable
@Opeoluwa-Ogunlaja
Posted
@Ahmed-Elbald Ok 😁👍. Thanks again!
@Opeoluwa-Ogunlaja
Posted
@Ahmed-Elbald Ok 😁👍. Thanks again!
@Ahmed-Elbald
Posted
@Opeoluwa-Ogunlaja You are welcome