Make sidebar fixed

[joseemds]

This pull make the sidebar fixed, eliminating the need to scroll all the way up to change pages. With this change, users can easily access the sidebar navigation while browsing through the content.

This change only affects desktop users, and the mobile experience remains the same as before.

Before

before.mp4

After

after.mp4

(Sorry for the low quality videos, i don't know how to setup OBS properly)

[jpgrayson]

Hi @joseemds. I like this idea and I appreciate this PR.

However I'm seeing it break on desktop when the browser is wider than 768px, but not wide enough that the fixed-position header fits in the left-hand margin of <main>. In these circumstances, the header thus masks the left-hand side of the main body. It is not obvious to me how to tweak the CSS to resolve this problem (which, IIRC, is why there currently isn't a fixed header). This problem needs to be resolved in order for me to accept this PR.

[jpgrayson]

Actually, here's one idea. I added this to the new media query to ensure enough margin in the <div> that holds <main> and it seemed to work okay:

  body > div > div {
    margin-left: 12rem;
  }

So the complete media query becomes:

@media (min-width: 768px) {
  body > div > header {
    position: fixed;
    height: 100%;
  }
  body > div > div {
    margin-left: 12rem;
  }
}

The 12rem margin is derived from the header's flex-basis of 10rem; i.e. to be a little wider than that.

I'm not confident that this is a bullet-proof approach. Let me know what you think.

[joseemds]

@jpgrayson Hi, Sorry for the delayed response, initially I tried to replicate the behavior that we want using overflow: hidden in the body, and only making the main content scrollable, but had some problems with some parts not being scrollable.

I tried locally the margin-left: 12rem and it looks pretty similar with the current version of the website. I will push a commit with the margin-left: 12rem addition

[jpgrayson]

Thanks again for driving this change, @joseemds.