=== Description
Finalize design details for collapsible sidebar
=== Design details
Latest prototype: https://wikipedia-vue-protoype.netlify.com/p3.html#/en/wiki/Hawaiian_Islands
| sidebar closed | sidebar open | sidebar open (narrow screen) | sidebar open (very narrow screen)
| {F31667521 width=300} | {F31667523 width=300} | {F31667526 width=250} | {F31667530 width=200}
===== Persistence of of open/closed sidebar state
- Sidebar state should persist across pageviews
- For logged-in users sidebar state should also persist across sessions
- For logged-out users every session should start with the sidebar closed
===== Sticky/fixed sidebar
To begin with the sidebar **will not be fixed/sticky** alongside the content, because doing so creates a slightly more complicated two column interface and we don’t want to make access to language links more difficult. Once we’ve moved language links we can revisit this behavior.
===== Sidebar animation
In order to avoid weird content reflow issues:
Above 1360px animation
Below 1360px no animation
===== Sidebar background
Gray vs. white — TBD
===== Open/close trigger/icon
TBD based on closer review of feedback, however considering something like
| sidebar closed | sidebar open
| {F31668458} | {F31668460}
===== Content width & breakpoints
For reference see https://di-collapsible-sidebar-2.firebaseapp.com/Music
max-width: 960px
min-width: 475px
| | browser width 960px or smaller | browser width 961px or larger
| sidebar closed | `padding: 0 25px` | `padding: 0 70px`
| sidebar open | `padding: 0 40px` | `padding: 0 40px`
We've discussed whether or not below a certain screen width the sidebar should slide over the content (like how the mobile menu does). At this point I think we can hold off on that functionality. The website will be usable, with the sidebar open, until the screen width gets below ~700px, at which point a horizontal scrollbar will appear.
===== Page footer
[need to add an image of how this will look]