Dashboard's mobile view should have an option to switch to displaying the sidebar

[ajaleelp]

@harigopal From what I could gather, this is not pretty straightforward. We cannot copy from Ferret as they use actions from react-redux to toggle the nav bar. For our application, the full property of our Sidebar component needs to be set true for large screens and false for smaller ones. The Menu inside the sidebar can then be set to inline={false} to make it a collapsed drop-down. I guess a solution in line with the mobx approach is to have our appState store screenDimensions and add event listeners for screen size changes. We can utilize something like https://github.com/digidem/react-dimensions for this. This can then be used from any component which needs to be responsive. Another approach I found is to use a mixin like https://github.com/akiran/react-responsive-mixin. See discussion here: https://medium.com/@mustwin/responsive-react-9b56d63c4edc#.5jabe25ep Will await your input before taking this forward.

@rahulravindran2709 How do you generally go about making components responsive?

[rahulravindran2709]

Hey jlee i am new to this grommet thing but wont they be responsive through CSS by defaullt. I checked out your sidebar by resizing browser and can see that it switches to full width in mobile as it is This is what i saw in the css @media screen and (max-width: 44.9375em) index-vanilla.css:5 .grommetux-sidebar { max-width: 100%; width: 100vw;}

In mobile we usually hide the navigations by default which can be toggled into view by clicking on a button beside the brand name like below. Resize browser to small width and check it out http://bootsnipp.com/snippets/featured/toggle-navbar So you could slide out your sidebar when this button is tapped. As for the width of the sidebar in mobile it seems to be handled already