While collapsing the navbar, when the user clicks or hovers outside the menu, is easy enough but adding the bootstrap "collapsing" class while collapsing has been a challenge. Reference

Commit: https://bitbucket.org/KarthikRavee91/bioviz/commits/8ee326ad7b94fb0d5bb7e174d223d437af6ccd87

Testing on macOS 12.5 on bioviz.org main page.

On Chrome:
The experience is much improved and feels more natural. If I click the hamburger and then move my mouse outside of the navbar the navbar closes.

However, after doing some additional testing I have finally been able to consistently reproduce the original issue I was experiencing. The issue is not solved by the above commit, and may require some additional digging.

To reproduce the issue:

1. Open Safari and go to bioviz.org.
2. Decrease the size of the browser window until the hamburger appears.
   • Note that the navbar menu background with the hamburger closed takes up a significant amount of space (see attached image comparison.png, with chrome on the left and safari on the right).

The same issue can also be seen on iOS mobile devices. This is because all iOS mobile devices use WebKit regardless of the browser (so Chrome on iOS is basically the same as Safari on iOS). So it seems like this is some kind of issue with Apple/Safari web browsers.

My preference would be to keep the changes that Karthik Raveendran has committed (and keep it as a separate commit), but to also investigate and try to fix the issue with Safari based browsers.

As an additional aside: I don't like how the About and Developers dropdowns automatically open when scrolled over (when using the hamburger). Because the menu items are top to bottom, it makes the text jump around a lot when moving the mouse over the menu items. I would prefer to have to click to open the About and Developers dropdowns, when the screen size is small and the hamburger is being used.

Testing on Safari:

The issue with the navbar was introduced in commit fd0062e IGBF-2242-2: Migrate from bootstrap 3 to 4. I was able to confirm this by running the prior commit
2a06ccd which did not have the issue with the navbar, while switching to fd0062e did have the issue with the navbar.

The issue with the navbar on Safari was due to the container class being inside of the nav class. The nav class was also missing a closing tag. See this documentation for further detail: https://getbootstrap.com/docs/4.0/components/navbar/#containers

UPDATE: See additional comments below regarding -webkit-fill-available

Commit: https://bitbucket.org/nfreese/bioviz/commits/f06dce4457cb1b71fe16cb38f181bcbe6ecab364

The additional issue of dropdowns acting on hover when the hamburger is visible has been corrected in a separate commit on the same branch, in case we decide not to use it. Note that there is an instance of .dropdown:hover in both menu.css and style.css. I have only removed the .dropdown:hover from style.css which has had the effect of removing the hover dropdown when the hamburger is visible, but leaving the dropdown menus as hover when the view is larger and no hamburger is visible. Note that in bootstrap the default behavior is meant to be on click as described in this blog: https://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/

Commit: https://bitbucket.org/nfreese/bioviz/commits/0852c7f941c26925cb7d1336152577f5381366ed

To test: Follow the steps in the previous commit to reproduce the issue in Safari.
Note that we will need to deploy this code to a test server in order to be able to test it on mobile.

Testing needs to check other sites because the menu is used in multiple places and codebases:

• app store (will need use a test server)
• genome dashboard (see link at top of bioviz.org)

AL: to set up testing sites

Please provide repository URL and branch name for testing.

Branch: https://bitbucket.org/nfreese/bioviz/branch/IGBF-3156

Karthik Raveendran - After doing some additional digging, I'm not sure that the container/nav in menu.html was the primary issue.

On line 18 of menu.css there is

height: -webkit-fill-available;

which my IDE says is an error. Getting rid of that line fixes the navbar, though I'm not exactly clear why. It seems as though it is specifying the navbar container height for webkit (i.e. safari and iPhone browsers) though I'm not sure why that is necessary.

You can also change line 99 of menu.css

height: auto;

and it fixes the issue. So it seems like something is wrong with how the height of the navbar is being handled.

Any thoughts on this would be appreciated.

Deployed branch to https://bioviztest3.bioviz.org.
Note that this uses bioviz-playbooks repository "setup.yml" playbook and there is a step in which the menu file and menu styling file get copied to a location for use with genome dashboard.

See https://bitbucket.org/lorainelab/bioviz-playbooks/src/master/.
Inside "roles" the task "menu" handles this.
See:

• https://bitbucket.org/lorainelab/bioviz-playbooks/src/master/roles/menu/
• https://bitbucket.org/lorainelab/bioviz-playbooks/src/master/roles/menu/tasks/main.yml

What happens is that the menu.html and menu.css files literally get copied from the newly deployed bioviz web site code base over to the newly deployed "igb genomes" (genome dashboard) code base on the same host. Then, the menu.html file is edited in-place within the genome dashboard code base to use absolute links for returning to the bioviz main site pages.

So, to test that all of this has worked properly, just go to the genome dashboard page and click all the links.

Todo: Make sure that appstore gets the new menu.css and menu.html files. Made new ticket for that.

I have updated the commit on my branch for fixing the issue with the navbar: https://bitbucket.org/nfreese/bioviz/commits/f06dce4457cb1b71fe16cb38f181bcbe6ecab364

After discussion with Karthik the primary issue seems to be due to the -webkit-fill-available not working as intended. On webkit browsers (safari and all iPhone browsers), the -webkit-fill-available is occupying all of the available space for the navbar, which is set to have a maximum height of 400 pixels. This appears to have the effect of expanding the navbar to fill all 400 pixels of the navbar regardless of whether the user has engaged the hamburger. I have included some blogs discussing -webkit-fill-available below:
https://www.bram.us/2021/07/08/the-large-small-and-dynamic-viewports/
https://dev.to/cydstumpel/4-things-in-web-development-i-ve-learned-in-2020-so-far-3cg

Testing the changes locally using developer tools on Safari shows that the changes work correctly on desktop and mobile devices. Testing on https://bioviztest3.bioviz.org/ on laptop and mobile is also successful. Testing on Firefox was also successful.

Note: I did notice on https://bioviztest3.bioviz.org/genome-dashboard that the common names of genomes are missing. I would assume this is due to the test server as I'm not sure how the navbar changes would affect the genome names. The BioViz links within the navbar did work correctly.

[~aloraine] - Should I submit a pull request? I'm not sure what further testing we can do.

Yes, it is fine to submit a PR.
I will look into why the common names are not properly shown.
Moving to "ready for pull request".

Note: During deployment of genome dashboard, there's a step in which the code reaches out to a bitbucket repository to retrieve a file in the IGB code base. I guess that if that step fails for some reason, then the common names are not properly shown. To check, I re-ran the playbooks. Now, the common names are shown properly.
Interesting!
attn: Nowlan Freese

Pull request: https://bitbucket.org/lorainelab/bioviz/pull-requests/104/igbf-3156

Merged and deployed to bioviz.org main site.
attn: Nowlan Freese

Tested on Safari 15.6.1 on macOS 12.5.1
bioviz.org - navbar working correctly
bioviz.org/genome-dashboard - navbar working correctly
apps.bioviz.org - navbar still broken

Tested on Chrome on iOS
bioviz.org - navbar working correctly
bioviz.org/genome-dashboard - navbar working correctly
apps.bioviz.org - navbar still broken

IGBF-3167 has been created to address the navbar on the IGB App store.

As bioviz.org and the genome dashboard are working correctly, closing ticket.