Navigation drawer - Mini variant behavior
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
#### Feature request:
Add the "Mini variant" behavior of the Navigation drawer.
As defined in the Google Material guidelines:
https://material.google.com/patterns/navigation-drawer.html#navigation-drawer-behavior

#### What is the expected behavior?
When toggled, the navigation drawer change its width.
It's not fully hidden.
#### What is the current behavior?
Only two states are available: displayed, hidden
#### What are the steps to reproduce?
Create a sidenav and toggle it on and off.
The sidenav can only be opened or closed.
No intermediate state.
#### What is the use-case or motivation for changing an existing behavior?
Desktop users need to quickly change the current view.
The sliding effect of the sidenav could be annoying when used a lot.
It's common for desktop apps to keep the navigation opened by default.
But in some cases the icons are self explanatory so no need to display the associated labels.
#### Which versions of Angular, Material, OS, browsers are affected?
Angular2
#### Is there anything else we should know?
A similar feature request was submitted for Angular 1:
https://github.com/angular/material/issues/3158
Contributor guide
Research direction
Start by reviewing the existing Angular Material sidenav implementation and its current open/closed toggle path. Compare that behavior with the linked Google Material mini-variant guidelines; done means the drawer supports a distinct reduced-width state while preserving the existing displayed and hidden states.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 32/100