mui icon indicating copy to clipboard operation
mui copied to clipboard

Published 20 hours ago • verified publisher icon muicss

How to set Example Layouts : Responsive Side Menu hide the sidebar as default

Open re-imagined opened this issue 7 years ago • 5 comments

In that example, the sidebar is show as default, how to set hide as default.

re-imagined avatar Apr 28 '17 13:04 re-imagined

To hide the sidebar by default you can comment out the media query: https://github.com/muicss/mui/blob/master/examples/layouts/sidedrawer.html#L74 https://github.com/muicss/mui/blob/master/examples/layouts/sidedrawer.html#L106

then remove this element: https://github.com/muicss/mui/blob/master/examples/layouts/sidedrawer.html#L266

then remove the mui--visible-xs-inline-block mui--visible-sm-inline-block classes from the other toggle element: https://github.com/muicss/mui/blob/master/examples/layouts/sidedrawer.html#L265

amorey avatar Apr 28 '17 14:04 amorey

thanks! It works. It hides the sidebar as default now, but does not show as it did before, and the hiding animation is gone.

by the way, I recommend that it would be better to make an easy way to let the user to choose it show or hide as default

re-imagined avatar Apr 29 '17 06:04 re-imagined

What do you mean by "does not show as it did before"? Can you describe the behavior you're looking for in more detail? The behavior with the modifications should be:

  • Side drawer is hidden by default at all screen widths
  • Clicking on the hamburger icon in the header will dim the main content and the side drawer will slide in from the left
  • Clicking anywhere inside the overlay will hide the side drawer

BTW, great GitHub avatar!

amorey avatar Apr 29 '17 12:04 amorey

sorry for that I did not describe it clear. I mean when I click the icon to let the sidebar show, it does not push the main content to the right side as it did before, and when I want it to hide, instead of slide and hide to the left like before, it just disappear immediately

re-imagined avatar Apr 29 '17 13:04 re-imagined

The sliding is controlled by the hide-sidedrawer class on the <body> tag: https://github.com/muicss/mui/blob/master/examples/layouts/sidedrawer.html#L91-L105

One way to modify the code to behave like you want it to is to add the hide-sidedrawer class to the <body> tag on load and modify the behavior of the hamburger icon to toggle the class: https://github.com/muicss/mui/blob/master/examples/layouts/sidedrawer.html#L208-L214

amorey avatar Apr 29 '17 13:04 amorey