Jordan-Hall / angular-material-rail-drawer-plugin

Angular Material extension for mini/rail drawer variant
Other
47 stars 13 forks source link

Swap between Rail, Full or Hidden #26

Closed mcurrycl closed 1 year ago

mcurrycl commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

Any update?

Jordan-Hall commented 4 years ago

@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 commented 4 years ago

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 commented 3 years ago

@uahic @Jordan-Hall any update on this?

uahic commented 3 years ago

@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 commented 3 years ago

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

mathias-ewald commented 2 years ago

Any updates or workarounds?

Jordan-Hall commented 1 year ago

Issue closed please read https://github.com/Jordan-Hall/angular-material-rail-drawer-plugin/issues/56