The NavigationBar behaves weirdly as the user reduces the screen size, for example from desktop to mobile. It is opened by default, the "X" is almost not visible, the location indicator is wider than it should be, and the Explore button is displayed on top of the menu.
Tasks
[x] When the user resizes the screen, the menu should be closed by default.
[x] The "X" button should be displayed as in the design spec.
[x] The location indicator should be displayed as in the design spec and not wider.
[x] The Navigation Menu should be on top of other content.
Notes
A solution may be splitting the Menu in two. This way, one condition could display a motion.div container for mobile users; otherwise, it will show the regular menu with no animation entrances for bigger screens.
Both menus use the location bar with animations, this should be checked in more detail
It is necessary to analyze how jonsuh creates his hamburger menus to understand what I could enhance in the MenuButton component.
After analyzing this, the best approach was replicating the transform-origin values provided by framer motion when the animation was correct. These values have to be entered as follows style={{ originX: '12px', originY: '1.5px' }}. After testing the path to reproduce the error, it seems to be fixed now.
Description
The
NavigationBarbehaves weirdly as the user reduces the screen size, for example from desktop to mobile. It is opened by default, the "X" is almost not visible, the location indicator is wider than it should be, and the Explore button is displayed on top of the menu.Tasks
Notes
motion.divcontainer for mobile users; otherwise, it will show the regular menu with no animation entrances for bigger screens.MenuButtoncomponent.transform-originvalues provided by framer motion when the animation was correct. These values have to be entered as followsstyle={{ originX: '12px', originY: '1.5px' }}. After testing the path to reproduce the error, it seems to be fixed now.