Components: Proposal: allow md-sidenav to align to the bottom|top of md-sidenav-container

[thefliik]

Bug, feature request, or proposal:

feature request

What is the expected behavior?

md-sidenav should be able to align to the bottom and top of a md-sidenav-container, in addition aligning to the start or end (right or left) of a md-sidenav-container. I imagine, to simplify implementation, it will be necessary to limit a specific instance of md-sidenav-container to either containing md-sidenav's in bottom / top alignment or start / end alignment.

What is the current behavior?

md-sidenav can only align to the start or end (right or left) of the md-sidenav-container.

What is the use-case or motivation for changing an existing behavior?

Greater flexibility in using md-sidenav to hold website content / app tools.

Is there anything else we should know?

Personally, I'm only looking for the bottom alignment functionality, but it seems like the component might as well gain top alignment functionality as well.

[willshowell]

Sound like bottom sheet. It's on the README as a future component but isn't being tracked by any issues.

[thefliik]

@willshowell yes, it looks like bottom-sheet would supply the bottom alignment part of this functionality.

[devversion]

I'm assigned to create the bottom-sheet at some point. Should we use this as the issue?

[thefliik]

@DevVersion, I imagine that question isn't directed at me, but sure.

It's unclear from the material design spec for bottom sheet, but I'd like to put in a request for bottom sheet to support mode="'push'". Also, I imagine you've chosen to separate out md-sidenav and md-bottom-sheet because that's what the material design spec does, but, imho,

A) having separate components for bottom vs side panel positioning is unintuitive. Seems like its the same component, you're just putting it in different places. They should just be combined into one component.

B) md-sidenav isn't a great name. I've been using the component more as an md-sidepanel. i.e. its way more useful than just navigation. md-bottomsheet doesn't seem like a great name either, especially if the component also supports top positioning (and why wouldn't it). It general, it seems like component names shouldn't be tied with one, specific usage of the component (when there are more possible uses available). This being said, it's obviously not a big deal. Both components will be super useful whatever they're called.

[devversion]

The question was indeed directed to you.

As Angular Material follows the Material specifications we mostly follow the names that have been specified there.

A bottom-sheet can be only opened from the bottom and I don't think that a sidenav will have that functionality at some point.

So I really think that this issue is for the bottom-sheet.

[mackelito]

hmm are you guys sure that it´s not https://material.io/guidelines/components/bottom-navigation.html that you are looking for?

[devversion]

This is the tracking issue for the bottom-nav https://github.com/angular/material2/issues/408. But bottom-sheet is different to bottom-navigation.

[mwent-cray]

Very nice to have - currently in need of such a feature. :(

[thefliik]

@mwent-cray Depending on what your needs are, the Angular Split library might help you out. I found it after putting up this issue and it actually addresses my needs better than a bottom sheet.

What you can't do with it is easily build an overlay pane. If you want to push content aside though, it's great. You can disable the ability to resize and you can also animate on open/close.

[mwent-cray]

@thefliik That's a nice package, quite useful but for a different use-case (which coincidentally I also need) I was hoping this issue would be more geared toward the bottom navigation @mackelito mentioned.

[Aaronm14]

Have been googling around for something like this as well.

My use case is that I want the sidenav to basically slide open from the side of the screen a button was clicked. So on landscape it could open from left or the right, and on portrait the buttons would be on the top and bottom.

Any ideas even as a workaround? I briefly looked at the CSS but it seems like it might not be straightforward to write a couple lines of CSS to change the way it opens.

[intergalactickraigor]

Try something like this as an override for a workaround.

.bottom{
top: auto;
left: 0;
right: 0;
bottom: 0;
transform: translate3d(0,100%,0);
}