Description
Finalize design details for collapsible sidebar
Design details
Latest prototype: https://di-collapsible-sidebar-5.firebaseapp.com/Hathor
Wide screen (1780px)
| sidebar closed | sidebar open | sidebar open on special page |
|---|---|---|
 |  |  |
Narrow screen (1280px)
| sidebar closed | sidebar open | sidebar open on special page |
|---|---|---|
 |  |  |
Persistence of of open/closed sidebar state
- For all users sidebar state should persist across pageviews (i.e. if I go from one article/page to another, in the same browser tab)
- For logged-in users sidebar state should also persist across sessions (i.e. if I close the browser tab, and then open a new one)
- 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:
If there is enough room for the sidebar to open without the article content having to move, the sidebar will have an animation. This should be at or above 1420px (the magic number at which the sidebar can open without the content having to move).
If there is not enough room, the sidebar will not have an animation.
Sidebar background
The sidebar background changes based on the width of the page.
Below 1500px: background: linear-gradient(to bottom, #ffffff 0%,#f6f6f6 5%,#f6f6f6 50%,#f6f6f6 90%,#ffffff 100%);
At or above 1500px: white background w/ left border that mimics the gradient above
(I wasn't able to figure out how to get the gradient border to work the way I wanted so for the prototype I ended up putting a gradient background on the parent element, and then making the parent element 1px wider than the sidebar container.)
Open/close trigger/icon
TBD based on closer review of feedback, however considering something like
| sidebar closed (hamburger icon) | sidebar open (<< icon) |
|---|---|
 |  |
Container width & breakpoints
There are three containers. All three containers usually remain horizontally centered within the browser window. The case where they don't is when the browser is less than 1500px wide and the sidebar is open, in which case the content container gets offset to the right.
- Page container
- this is the outer-most container, ensuring that on extra wide screens the header contents don't drift too far from the content. The only thing that lives at this level is the site header.
- max-width: 1650px, padding: 0 30px
- Workspace container
- this is in place to ensure that the sidebar doesn't drift too far from the content on wide screens. It also acts as a container for Special page contents that are not limited to the content container
- max-width: 1440px, padding: 0
- Content container
- this is the inner-most container, which contains the article toolbar and article contents
- max-width: 960px, padding 0
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
Page footer should be within the workspace container (red dotted line in screenshot below)
Special pages
certain special pages will not have a fixed-width on the contents container.
Here is an extreme example of how this will look:
Sidebar closed
| normal page | special page | gif |
|---|---|---|
 |  |  |
Sidebar open
| normal page | special page | gif |
|---|---|---|
 |  |  |
