Make Sidebar Collapsible #164
Description
Tell us about the issue you are experiencing
The sidebar currently takes up too much of the viewport. When trying to do responsive dev, I have to manually hide the sidebar with css in the console and remove the side padding on the ndpl-content in order to be able to accurately determine px values for breakpoints.
I am building design systems within Astrum where each component is responsive on its own and it has been a real challenge with the current sidebar to determine where components need to break.
Additionally, the sidebar has made presenting to clients sloppy when projecting or when showing them the library on smaller laptop screens ( 13"). It especially causes problems with 50% width Astrum components.
What behaviour would you expect?
It would be great to be able to click a little UI Icon in the top left-hand corner to fully hide the sidebar and extend ndpl-content to full-width whenever desired.
How can this issue be replicated?
Simply view library on a smaller 13" screen OR to really see the issue, begin resizing the viewport as you might if trying to build components to be fluidly responsive.
Screenshots / Screencast
With Sidebar Active
With Sidebar Hidden
This is the exact same screen size, but I have hidden the sidebar and remove the aforementioned padding. Much better!
Your environment
Platform: macOS High Sierra
OS Version: 10.13.3 (17D102)
Node Version: 9.4.0
NPM Version: 5.6.0
Astrum Version: 1.9.5