Navigation - Make contextual sidebar collapsible
Resources
In order to allow for collapsing and expanding the sidebar we add one more row that's anchored to the bottom.
When the sidebar is collapsed its width changes to 48px + 2px border (total 50px). This gives us 16px margin on either side of the icons.
The height of each row is the same as in the expanded state. This way there is minimal vertical movement of the elements in the sidebar.
The avatar in the header must shift a few pixels to the left to be centered in the new width.
| Expanded | Collapsed |
|---|---|
 |
 |
There must be at least 16px margin between the last navigation row and the collapse button.
| Expanded | Collapsed |
|---|---|
 |
 |
When there isn't enough space to fit all the rows in the sidebar, the collapse button floats above the others. A top border (#e5e5e5) and a drop shadow (rgba(0,0,0,0.03), 0, -2, 2) are added to the collapse row.
| Expanded | Collapsed |
|---|---|
 |
 |
Resources
Meta issue #32794 (closed) - Global and Contextual Navigation