v5: Adjust docs sidebar and navbar #31119
Conversation
|
like this, particularly since small screen doesn't necessarily always mean "mobile user with touch" (it could, for instance, still be a mouse user on desktop, but with high magnification/zoom; or a user on mobile, but with a paired bluetooth mouse). and the horizontal scrolling without scrollbar is unusable for these users, currently. |
|
I'd like search/version/toggle in a single line. Maybe the version selector could be visually integrated with the search input (and does not need the "Bootstrap" label, only version number). Maybe the icon should be different than the main menu icon (folder tree, hierarchy?). btw, on the home page (not docs, the main page) I propose to make |
mdo
force-pushed
the
docs-nav-tweaks
branch
from
6e95374 to
88a8a68
Compare
|
Rebased to bring this up to speed with the latest Ready for review! |
|
I like it! I agree with @alecpl about the two icons, there's so much lines stacking here… Not sure about a solution though, I just noticed that felt strange. |
|
Yeah the stacked bars is a little odd. How about this? Just pushed a commit for it—icon flips between the expand/collapse icons from Bootstrap Icons.
|
|
@mdo Nice, IMHO much better! |
mdo
force-pushed
the
docs-nav-tweaks
branch
from
16ab29b to
330fb63
Compare
|
Rebased and conflicts resolved. Ready for review! |
mdo
force-pushed
the
docs-nav-tweaks
branch
from
330fb63 to
1401e9c
Compare
|
Thanks for the reviews fam! This will be a nice little addition to Alpha 2 :D. |
* Hide the docs nav on mobile, redesign it for two columns on narrow devices * Tweak spacing on ToC * Redesign sidebar and subnav * Revamp subnav mobile layout so everything's on one line * Tighten up masthead a little * Switch the icon for the subnav and do a little icon toggling * Fix mobile overflow since we changed guters stuff * Add the widths * make the subnav icon purple
Some tweaks to ideally improve navigating across our documentation on narrow devices. This PR removes the navbar scroll that I had implemented and replaces it with our classic collapsing navbar, but with a slight twist. I've added column classes to stack the nav across two columns on mobile devices so that the opened nav isn't too tall.
Still need to adjust the menu toggles (missing some styles, tap targets could be larger, etc), but hoping to get some initial feedback from the team on overall direction. Also wondering if I should do more to condense the subnav (search, version picker, and sidebar toggle) on mobile views.
Any thoughts, feedback, or examples of other patterns would be appreciated!
/cc @twbs/css-review
Preview: https://deploy-preview-31119--twbs-bootstrap.netlify.app/