Add mobile-friendly header and nav menu to default theme

[NateWr]

Currently, the default theme doesn't fully collapse the navigation menu on a small screen. All items appear at the top of the page, which means users often have to scroll before they see content.

We should implement a collapsed header for mobile with an icon to open the nav menu.

And a more comfortable nav menu on phones when open.

[thinkbulecount2]

@NateWr
PRs:
#4992
pkp/ojs#2442
pkp/omp#694

[NateWr]

Looks good @thinkbulecount2! I've added some comments for an initial code review.

I also took the liberty to work up some changes to the styles to fix the header height, improve the click area of the button, and support journal titles of unlimited length.

There were some tricky issues to solve here. I've annotated my commit if you want to learn some of the tricks I used:

NateWr/ojs@e741ab2

And there was one small commit to pkp-lib:

NateWr@5d72005

You can cherry-pick these changes by adding my remote in git, fetching from it, and then cherry-picking:

git remote add NateWr [email protected]:NateWr/ojs.git
git fetch NateWr
git checkout <your-branch>
git cherry-pick e741ab223f3131c4006aa8cb4217c7c63b378239
cd lib/pkp
git remote add NateWr [email protected]:NateWr/pkp-lib.git
git fetch NateWr
git checkout <your-branch>
git cherry-pick 5d7200506e1314f8648b8f9ebd432e3291eb50fa

Let me know if you have any questions or want to talk through anything! 👍

[thinkbulecount2]

Awesome, thanks @NateWr!

[NateWr]

Great! The progress on this is looking really nice. The next step is to figure out the UI styles and interactions for the mobile nav menu, and separate those out from the one on the desktop.

I've gone ahead and written some code that will add Bootstrap's dropdown feature on large screens and remove it on small screens. You should be able to cherry-pick that in:

cd <ojs-root>
git fetch NateWr
git checkout <your-branch>
git cherry-pick 7342afc6b8e8a659ebfa07973a252e9a38157a15

You can see that commit here: NateWr/ojs@7342afc

That will remove the dropdown-on-click functionality from the nav menu items. But you'll still need to show the missing nav submenus. I'd recommend starting out by moving the .pkp_nav_list helper into a media query so that the styles only work on a desktop:

https://github.com/pkp/ojs/blob/master/plugins/themes/default/styles/helpers.less

That will give you something like this:

From there, you'll need to style up the list and sublists to look better. We're aiming for something like this:

To get there, you'll need to write a bunch of new styles. And you'll probably need to think about what HTML changes are required to get the search at the bottom. Off the top of my head, I think it's likely we'll have to duplicate the search form in two places in the HTML code, and show one of them in mobile and one of them in desktop.

[NateWr]

Merged!