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

[jorroll]

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.

[jorroll]

@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?

[jorroll]

@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 #408. But bottom-sheet is different to bottom-navigation.

[mwent-cray]

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

[jorroll]

@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);
}

[angular-robot]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.

[crisbeto]

We're in the process of cleaning up our issue backlog. I'm closing this issue, because it's unlikely that we'll implement the feature as proposed. While the Material Design spec has a bottom navigation, it's not the same as a sidenav positioned at the bottom.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}