mobile: move topbar into sidebar

[jsha]

Right now the mobile UI looks like this:

The icons are out of scale with the hamburger icon, and in a different color. Also, the icons don't clearly map to meanings - for instance, people don't look at "leaf" and realize that means "releases."

---

And when you click on a method in the sidebar it looks like this:

The hamburger icon partially covers the text that you want to see. I'm planning to fix that in rust-lang/rust#92692 by making rustdoc's whole topbar sticky, not just the hamburger icon. But then we'll have double topbars the whole time you're scrolling the page.

I propose that instead of having a docs.rs topbar on mobile, we should move the topbar items into the rustdoc sidebar menu, under the hamburger icon. There we'll have room to write out the text for each item, so it's clearer what they are. And we won't have to have two topbars. It could look something like this:

Replacer

docs.rs

regex 1.3.1

Platform

Feature flags

Releases

Thoughts?

[jsha]

Or another, much easier tweak: We could make the rustdoc topbar have a higher z-index than the docs.rs topbar, so as you scroll down, the docs.rs topbar disappears. When you scroll back to the top it would reappear. And as of rust-lang/rust#92795, the item name will be a quick way to get back to the top of the page. Video:

Demo: https://rustdoc.crud.net/jsha/topbar-scroll/regex/1.5.2/regex/ (use Dev Tools in mobile mode to see the effect).