At the moment, I want to hold off on major structural changes like this until we have gone through the beta phase (starting in April). The reason being is that this layout has had ~20 hours of accessibility testing put into it and a change like this to the navigation has unknown (to me) implications for accessibility of the lessons (e.g. carpentries/glosario#465 or is that going to be distracting for someone with low visibility or dyslexia).

Totally understood, just wanted to log it here for posterity!

I was looking a bit more into this and I think we can control this by using the offcanvas class for the sidenav: https://getbootstrap.com/docs/5.0/components/offcanvas/

You can see some fo the behavior here: https://fmichonneau.github.io/2017-useR-tutorial/proposal/

I would second that significant improvements are needed for the EPISODE side-pane. Currently I find it a hindrance more than a help when teaching.

My main issue, is that if you collapse the pane, you cannot navigate to any other part of your current page, or Workshop without scrolling to the section of interest, or scrolling to the top of the page. This is a huge time waster and disorienting for students if you need to do it to emphasise relationships between ideas or content that you have covered.

There are also some technical issues with the side-pane:

• Collapse button is only visible at the top of page. If you change your mind about collapsing the pane you have to navigate back to the top to do this.
• If you collapse the side-pane, narrow the browser window until the site moves to mobile view, use the "three bar menu" and widen the side pane again, you cannot get the side-pane back without refreshing the page.
• Clicking on a sub-heading link in the "three bar menu" does not automatically collapse the menu obscuring content at the top of the page.
• Sometimes clicking on a sub-heading link in the "three bar menu" will insert excessive white space between the base of the menu and the top of the page content. This affects <div id="sidebar-col"> where the style height becomes huge (~8200px) in my case. I can usually recreate the error by starting with a wide view, narrowing the view with a collapsed nav bar, and then using the a sub-heading link in the "three bar menu".

Sorry for the delay, I do want to acknowledge that I've seen this and I want to manage expectations: this is not an easy problem for us to solve due to reasons of deminished capacity and expertise. The good thing is that it will likely be solved exclusively on the {varnish} side, which means that this is purely an HTML/CSS/JS solution.

The challenge is not in the solution itself, but it's choosing a solution that will allow us to retain accessibility and doesn't rely heavily on a series of JavaScript libraries that are delivered via CDN (at the moment, we load the mathjax library via CDN and then and the local minified bootstrap + feather icons + custom JS). The sites retain much of its functionality without a heavy amount of JavaScript and it would be good to minimize the amount of JavaScript we import, as it increases the weight.