fix(sidenav): allow to hide side nav depending on the media query#11581
Uh oh!
There was an error while loading. Please reload this page.
Conversation
googlebot added the cla: yes 
Splaktar left a comment
Splaktar left a comment There was a problem hiding this comment.
I need to do some more thinking about the naming of this API, but the current name of is-locked-closed will have to be changed.
In the meantime, I've left some comments and CodePen examples that I've been working with.
| $media: function(arg){ | ||
| $log.warn("$media is deprecated for is-locked-closed. Use $mdMedia instead."); | ||
| return$mdMedia(arg); | ||
| }, |
There was a problem hiding this comment.
I don't think that we need to add this old deprecated API warning for the new isLockedClosed API.
| * @param{string=} md-component-id componentId to use with $mdSidenav service. | ||
| * @param{expression=} md-is-locked-open When this expression evaluates to true, | ||
| * the sidenav 'locks open': it falls into the content's flow instead | ||
| * of appearing over it. This overrides the `md-is-open` attribute. |
There was a problem hiding this comment.
In the MD Spec's Surface Behaviors when this value is true, it maps to Permanent. The default when this is false is Temporary. If you want to implement the Persistant behavior, then you need to allow the value of md-is-locked-open to be toggled like in this CodePen example.
We should link to this part of the spec in the main SideNav docs (above) and mention these behavior names. We also need to have demos of each type of behavior (could be as part of 1 or 2 demos).
| * the sidenav 'locks open': it falls into the content's flow instead | ||
| * of appearing over it. This overrides the `md-is-open` attribute. | ||
| * @param{expression=} md-is-locked-closed When this expression evaluates to true, | ||
| * the sidenav 'locks closed': hides sidenav. |
There was a problem hiding this comment.
I'm still trying to get a handle on what behavior this API really has and how to name it.
Based on the naming, md-is-locked-closed="true" should make it so that you can't open the sidenav at all, even via toggle(). But in this CodePen you can see that is not the case. This doesn't mean that your behavior is incorrect, it just means that we have the wrong naming of this API here.
There was a problem hiding this comment.
@Splaktar what if I change it to md-is-hidden, is-hidden-when or md-hide-when?
Basically by specifying the condition you determine when the sidenav has to become closed after it was opened.
Splaktar added needs: review Splaktar added the g3: reported 
Splaktar commented May 15, 2020
@marosoft let's revisit this one for |
Current behavior is not correct Fixesangular#4595
This comment has been minimized.
This comment has been minimized.
Splaktar added the needs: rebase 3 participants
Current behavior is not correct
Fixes#4595
PR Checklist
Please check that your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
At the moment it is not possible to hide side nav without breaking the view - the overlays stays visible.
Issue Number: #4595
What is the new behavior?
A new attribute allows define when the side nav should hide depending on the media query.
Does this PR introduce a breaking change?
Other information