angular-material-rail-drawer-plugin
angular-material-rail-drawer-plugin copied to clipboard
Jordan-Hall
Swap between Rail, Full or Hidden
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?
Please bear with me. I'm trying to move this into Angular Material https://github.com/angular/components/pull/20050
I'll try and get this bug fix for you tomorrow
@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
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 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
@uahic is there nay link to css tricks we can use, I am ok with not having animations for now
Issue closed please read https://github.com/Jordan-Hall/angular-material-rail-drawer-plugin/issues/56