Re-do responsive navigation

robyngit commented 3 years ago

Describe the bug On a small screen, the user profile menu sometimes appears outside of the minimal nav element, and above the portal editor content

To Reproduce Steps to reproduce the behavior:

On any device < 770px wide, open the portal builder in the default theme. The menu will be expanded.
Use the X (close) button to collapse the menu
Press the hamburger button to expand the menu, the menu will appear as it does in the screenshot below.

Expected behavior The menu items should not overlap with page content, and should appear within the menu container

Screenshots

Desktop (please complete the following information):

OS: MacOS
Browser: Chrome
Version 86.0.4240.111

Smartphone (please complete the following information): The screenshot shows an example of the issue on a simulated Moto G4 device, but this issue happens on chrome desktop as well, when the browser is < 770px wide.

robyngit commented 3 years ago

While working on this issue, I realized that the menu has bugs on all of the themes, not just the default one. Here are the issues I found:

In the Arctic theme:

[ ] The user menu is not collapsible on mobile
[ ] All sub-menus are expanded by default on mobile, making the menu very long to scroll through:
[ ] The menu that displays on medium screen widths has alignment issues. For example, if you collapse a sub-menu, the sub-menu toggle switches from the left side to the right. The hamburger icon is on the right side of the screen when the menu is collapsed, but on the left when it's expanded.
[ ] In the minimal nav, the user menu gets hidden behind other elements, such that you can't click on items

In the KNB theme:

[ ] None of the submenus are collapsible on mobile
[ ] Expanding the searchbar in the nav pushes the user menu item out of the range of the navbar:

In all themes:

[ ] The menu sometimes disappears when switching from a small to a wider browser window (possibly related to issue #1189)
To reproduce:
1. Make your browser window narrow enough that the mobile (hamburger) menu appears.
2. Click the hamburger icon twice to show then hide the menu
3. Expand the browser window to full width again, see the missing menu items
[ ] The user menu is off centre, and in the ADC theme, half-hidden
[ ] The menu stays expanded when a link to a new page is clicked. I would expect that the menu should collapse after a selection is made.

I think that a number of these issues are related to trying to make Bootstrap's dropdown menu open and close on hover rather than on click (what it's designed for). I wonder if, rather than trying to fix each of these bugs, it might be easier to re-write the NavbarView and templates to no longer use Bootstrap dropdown element, like the DataONE theme. Thoughts?

robyngit commented 3 years ago

amoeba commented 3 years ago

Thanks for writing this up and including all the screenshots, @robyngit! While I know some of our main page elements might take substantial work to make responsive, but I think it's important that at least our header, footer, and any navigation elements display well across devices. Simplifying/consolidating the header/nav across themes sounds like a really good move forward.

laurenwalker commented 3 years ago

I see this is in the REview/QA column @robyngit - Is there a commit attached to this issue or is it in progress?

robyngit commented 3 years ago

There aren't any commits for this issue yet, I put it on hold and in the Review/QA column because I wanted to get feedback on the best way forward to fixing these problems. (Also because I only just realized that the QA in Review/QA probably stands for Quality Assurance and not Questions & Answers...) I think it would be quicker to re-structure the NavbarView and templates rather than to try and fix the individual problems. When working on this, I found that trying to fix a problem in one theme led to new problems in other themes. Any thoughts on this?

NCEAS / metacatui