Rework sidebar (for mobile devices)
Description
We provide some custom mechanism that changes the header when the page is accessed by small screens. However, our own approach has some issues:
- This mechanism requires extra markup in the Jinja templates
- The code is just sitting around in
page.htmland should at least be refactored into a separate file - The links displayed in this sidebar are not up to date (e.g. some relevant links like the dashboard are missing)
- When this sidebar menu is opened, we get extra scrollbars that nobody wants
- Scrolling around on the page for a bit breaks the styling
- The upstream InvenioRDM project provides a similar feature with nicer behavior
Pointers
Some relevant code in our project:
- Sidebar definition in
page.html - Extra JS code
- Some styling rules
Some relevant code upstream:
- The burger menu's
<div>in App-RDM'sheader.html - The
header_login.htmlwhich may or may not be relevant
Feature comparison
Our instance
In this screenshot, the scrollbars are clearly visible. So is the fact that the darkening of the background doesn't apply to the entire page, which can be seen after scrolling a bit.
Vanilla InvenioRDM (the sandbox in v9; 2022-07-20)
With collapsed sidebar (menu button is visible top right):
With opened sidebar:
Note that their sidebar stays in place nicely when scrolling through the page.