For more info please check the components's official demos & documentation demos & documentation

Angular Material provides two sets of components designed to add collapsible side content (often navigation, though it can be any content) alongside some primary content. These are the sidenav and drawer components.

The sidenav components are designed to add side content to a fullscreen app. To set up a sidenav we use three components: `<mat-sidenav-container>` which acts as a structural container for our content and sidenav, `<mat-sidenav-content>` which represents the main content, and `<mat-sidenav>` which represents the added side content.

Sidenav content Main content
Please open on Stackblitz to see result

By default, Material will only measure and resize the drawer container in a few key moments (on open, on window resize, on mode change) in order to avoid layout thrashing, however there are cases where this can be problematic. If your app requires for a drawer to change its width while it is open, you can use the autosize option to tell Material to continue measuring it. Note that you should use this option at your own risk, because it could cause performance issues.

Auto-resizing sidenav

Lorem, ipsum dolor sit amet consectetur.

The drawer component is designed to add side content to a small section of your app. This is accomplished using the `<mat-drawer-container>`, `<mat-drawer-content>`, and `<mat-drawer>` components, which are analogous to their sidenav equivalents. Rather than adding side content to the app as a whole, these are designed to add side content to a small section of your app. They support almost all of the same features, but do not support fixed positioning.

Drawer content Main content