inland-empire-software-development / main

Organization website
https://www.iesd.com
GNU General Public License v3.0
17 stars 27 forks source link

Removed mobile hamburger icon and added button to close mobile menu #120

Closed abowler2 closed 4 years ago

abowler2 commented 4 years ago

Mobile menu required users to click off the navbar in order to close it.

The suggested fix was to set the navbar to close when a nav link is clicked. However, I ran up against issues with getting the link to apply to only those nav items without children given the way they are mapped.

This fix adds a button to the top right corner allowing the user to close the menu after making their selection. If it is preferred to have the originally suggested behavior of closing upon selection of a nav item I would be happy to work on it some more.

Also, while working on this I noticed that both the mobile hamburger menu icon and the text "Menu" were being rendered. I removed the hamburger icon and left just the "Menu" text.

lloan commented 4 years ago

@abowler2 I went ahead and modified this a bit, thanks a ton for the work! based on the talk we had yesterday, i went in to the file and modified the nav items that don't have children and made it so that they can close the offcanvas. I also reverted the menu text to the hamburger icon, felt like it balances out the design a bit more than just the text.

Based on this new user experience though, we might want to add a 'to the top' component or since the nav button isn't sticky, we might want to add a menu icon that is hovering on the bottom right. Will most likely open up a new issue for this as a new feature once I figure out the details.

Thanks a ton!

abowler2 commented 4 years ago

I like this fix a lot! Much better UX 😄