Closed harigopal closed 7 years ago
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
@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, thefull
property of ourSidebar
component needs to be settrue
for large screens andfalse
for smaller ones. TheMenu
inside thesidebar
can then be set toinline={false}
to make it a collapsed drop-down. I guess a solution in line with themobx
approach is to have ourappState
storescreenDimensions
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?