Float the navigation panel when scrolling

[numberoverzero]

I've had a few pages get long, where having the navigation scroll with the content would make jumping around the docs much more comfortable.

What about something like the Bootstrap docs navigation sidebar? There's a good breakdown here that builds the behavior in layers.

Even without attaching a scrollspy to highlight the current location, simply fixing the navigation to scroll with the content would be a nice enhancement.

[numberoverzero]

The basic sphinx styling needs to be overridden a bit here, since margin-left: -100% messes with a fixed position.

I've been testing the following which breaks on mobile:

div.sphinxsidebar {
    /* added  */
    position: fixed;

    /* Existing style */
    float: left;
    width: 230px;
    font-size: 90%;
    /* removed */
    /* margin-left: -100%; */
}

---

With respect to mobile, I'd argue the nav shouldn't wrap to the bottom of the page anyway. Testing the bootstrap docs they don't render the navigation at all under 992 px. which only works because they have the top nav.

What about a dropdown button with the top-level headings only for small screens, hiding the fixed sidebar?

---

EDIT: Here's a long page for testing (probably too long...)

[bitprophet]

Thanks! I'm tentatively +1 on the general idea, but lacking time & not actually being a genuine CSS wizard (& also being somewhat conservative re: changing things with this much opportunity for potential bugs), I don't know if I'll be digging into it anytime soon :confounded:

Still, totally leaving it open in case a (thoroughly tested :D) PR comes out of it sometime.

[numberoverzero]

I can take a stab at this. What do you consider sufficient testing? Are some screenshots at expected breakpoints in responsive design view sufficient?

---

As far as the collapsed nav for small screens, what about at the top with the glyphicon-align-justify icon?

Seen in the boto3 docs:

---

Although the expanded form could be improved upon:

[bitprophet]

What do you consider sufficient testing? Are some screenshots at expected breakpoints in responsive design view sufficient?

Yea, that's probably fine, noting which browser/engine you're using for screenshots probably also good to capture.

And that "icon at screen top" pattern is one I've seen and seems as good as any :)

[numberoverzero]

Looks like boto3's theme guzzle_sphinx_theme uses jquery to handle the toggle. Additionally, this is only rendering the nav once, and the right panel wraps below the left when it's under the breakpoint (for reference, 768).

Currently alabaster's nav wraps below the content, which feels unnatural to me - I'm used to the nav following the collapse button immediately. I'll work on the wrap order first (so nav is above content), and then adding a button to expand/collapse when screen size is under the current breakpoint.

[bitprophet]

As with most things in this theme that decision (re: where small-screen nav ends up) predates me. I think I agree that having it come at the "top" seems least surprising.

[numberoverzero]

Found another interesting choice in the basic layout.html file: only sidebar2 (rendered after doc in html) is rendered inside the document div, not sidebar1 (rendered before doc in html).

To put the navigation before the document (nav at top of screen when we collapse for small screens) and still have the proper alignment (nav closer to doc than to left edge of the screen) we'll need to redefine the content block to put the sidebar inside of the document div.

I'm copying over the demo folder from the guzzle theme to make testing easier. I think there was another issue asking about testing, so this might help others participate in development.

[numberoverzero]

Ok, I've cleaned up the content block to render the sidebar before the document, but within the document div (see previous comment about the basic/layout.html sidebar difference) and moved the margins around so it looks nice on <= 875.

Here are some screenshots from my test environment (Ubuntu 14.04.3, Firefox 40.0.3 using the Responsive Design View):

Full width, nav at the top

Full width, scrolling with a fixed nav

875px, top of page

875px, scrolling between nav and document

[numberoverzero]

I'm going to attach a PR so that we can discuss specific changes. This doesn't include a button to collapse the nav, but I'd rather split it out so the diff isn't unwieldy.

[nicolaiarocci]

Howdy, just posting my +1 here. Would be great to have a more responsive alabaster (also, see the pull request we got this, linked above).

[numberoverzero]

ping - any chance to review the PR and screenshots above? Happy to tweak things on feedback.

[bitprophet]

Hm, Github I think you're being a little aggressive parsing my commit message, the word "fixed" was quite a ways away from the issue number :angry:

[bitprophet]

So I just merged the sidebar stuff, making it an opt-in setting toggle (fixed_sidebar - readme updated with that info) so folks aren't all "wha?" when they upgrade. Thanks for that @numberoverzero!

If we ever get around to solving the "How to release a visually backwards incompatible version" problem I'd probably flip that so it's opt-out instead.

Let's leave this open pending the other bit re: mobile sandwich icon menu dealie.