the "margin-left : auto; " doesn’t work for my nav buttons.
the nav menu is defaulted to be open although i set the visibility to hidden by default
and I have a problem showing the right arrow image depending on whether the navMenu is open or not… should I set State for every image or would it be too much state ?
Not sure what margin you are talking about. You have left/right auto margin on nav button and then other margins inside the media queries.
I don’t think that is true. As you are using React I might suggest you create two different components for the navs and render them conditionally based on the viewport. I would use a hook or a lib to do the media query-based conditional rendering. Even if you do not use conditional rendering having two separate components for each nav is probably a good idea. Using a single component/element that changes its look and position using CSS depending on the viewport can get harder to reason about, maintain, and extend.
Using state is fine, then you can do conditional rendering using it.
One piece of advice. The hamburger icon needs to be in a button element and that is the element that should have the click handler attached to it. Adding a click handler directly to the img is not accessible. Also, for good accessibility, you need to add the aria-expanded attribute to the button. When the menu is not showing then it should be aria-expanded="false". When the menu is showing then it should be aria-expanded="true".
Also, you don’t need a separate close button for the menu. Just use the one button as explained above and when it is closed you have the hamburger icon in it, and when it is open you have the close “X” icon in it. The alt text for both should just be “menu”.