Swap between Rail, Full or Hidden

[mcurrycl]

I'm trying to create a SideNav that has 3 modes depending on the screen size. In mobile screens it will be fully hidden until the user clicks the "menu" icon, in medium screens it will show as a rail, and in large screens it will show as a full menu.

I tried to set this up using binding for the mode, but this doesn't work as per the previous issue. The only solution that "works" is for me to create multiple sidenavs and just show or hide the one I need, but this creates formatting issues.

How can I accomplish this?

[Jordan-Hall]

Please bear with me. I'm trying to move this into Angular Material angular/components#20050

I'll try and get this bug fix for you tomorrow

[mcurrycl]

Any update?

[Jordan-Hall]

@mcurrycl been taken a look at it Sunday. got some progress but still need a bit more time over next few days.

Sorry I've come down with an illness so just got back to my feet

[uahic]

The issue here is that the directive is active when mode="rail" is present (the directive's selector) but [mode]="..." is an attribute of of the original matnav-container thingy and doesnt know the mode "rail". So as soon as you write [mode]=... it isnt anymore matching the directive's selector

[yalamber]

@uahic @Jordan-Hall any update on this?

[uahic]

@yalamber unfortunately it does not seem solvable in the current way. I think Jordan created a PR on the material repository but their team has internally to discuss it. For my project I just defaulted to regular CSS tricks. It has no animations and is not the cleanest solution but for now its okay

[yalamber]

@uahic is there nay link to css tricks we can use, I am ok with not having animations for now

[mathias-ewald]

Any updates or workarounds?

[Jordan-Hall]

Issue closed please read #56