Add Navigation Rail Sidenav Component
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
#### Feature Description
This was [just added](https://material.io/components/navigation-rail/) to the official Material Design spec. Navigation rails provide ergonomic movement between primary destinations in apps. YouTube and Google Photos are a couple of examples that use this component.
#### Use Case
The rail is a side navigation component that displays three to seven app destinations and, optionally, a Floating Action Button. Each destination is represented by an icon and a text label.
The rail can function on its own at larger screen sizes, such as desktop and tablet. When users transition between screen sizes and devices, the rail can also complement other navigation components, such as bottom navigation.
#### Preview

Contributor guide
Research direction
Start by reviewing the Angular Material navigation components and the linked Material Design navigation-rail specification to understand the existing component patterns. Done means adding a navigation rail that supports three to seven destinations, optional text labels and Floating Action Button, and use alongside other navigation components across screen sizes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100