Use the Angular Material Sidenav Component

Instructor: [00:00] To start using the Angular Material sidenav components in our application, we'll include the MatSidenavModule in our app material module exports. To create a side navigation layout, the side navigation and the content contained within must first be wrapped in a MatSidenavContainer.

[00:13] Inside this container, you can include both the MatSidenav component, which will hold your navigation items, and the MatSIdenavContent component, which will house your main content container. Material sidenavs default to adding a backdrop and overlaying the content. To see this, we can make a reference to our sidenav.

[00:28] When the user clicks the menu button, we can call toggle on our sidenav component. We'll go ahead and give our sidenav a default width of 300 pixels for now. When we refresh, we can see clicking our menu button opens up a sidenav with a backdrop behind. Clicking the backdrop will then close the sidenav.

[00:44] This works great for primary menu structures of your application. While a sidenav defaults to the left side of the screen, you can change this by utilizing the position input on the MatSidenav component. If we update the position to end and refresh, we'll see the sidenav now pops from the right rather than the left.

[00:58] While a sidenav that overlays is the default option, you can also utilize two other modes depending on your use case, the first of which is push. With push mode, instead of overlaying the content, the sidenav pushes it to the side, but still supplies a backdrop.

[01:12] The last is side, which appears alongside the content and provides no backdrop over top. This is useful for sticky navigation or subnavigation within your application. We'll take a look at a good use case here in a second. It's worth noting that while the MatSidenavContent component makes it clear where your main content lies, it's not actually required.

[01:27] If we remove this MatSidenavContent wrapper, the MatSidenavContainer component will implicitly use whatever's not contained in a MatSidenav as the main content. What we'd like to do for our application is have a sticky sidenav on the left side that contains the lesson names, so when the user clicks on the lesson name, they'll navigate to the correct lesson in the main content container.

[01:45] What I had to add to the nav list containing all our lesson names as well as a toolbar that will display the active lesson name in a placeholder for the main content. We'll start by adding a mode of side to our sidenav. This will align it to the left of our content without the use of a backdrop.

[01:58] Next, since we want our sidenav to always be open, we'll set the open input to true. Finally, since we prefer our sidenav to maintain a fixed position on the page, we'll also set the fixedInviewport to true. We can see now that we have a sticky sidenav on the left side of the page that contains our lessons and allows the user to scroll up and down, navigating to the correct lesson.

[02:17] While this is mostly what we want, we still have one issue. If the user condenses the page or is on a small screen to begin with, the sidenav will maintain its position, hiding our main content area. Let's see how we can fix this problem. We need a way to update the sidenav mode in the open input when the correct break point is hit.

[02:33] To do this, we can utilize the BreakpointObserver that is included in the Angular CDK layout module, which I've included in the main application module's imports. We can then programmatically observe when breakpoints are hit by using the BreakpointObserver's observe method.

[02:47] We'll pass this query of max width of 901 pixels, which corresponds to a small screen size. We'll then go ahead and plug the property matches, which will tell us whether our media query is currently active. Finally, we'll subscribe and assign the value to a local property, isSmallScreen, which we'll use in our template.

[03:04] Next, we'll create a getter, which will control the sidenav mode based on the screen size. If the screen is small, we'll overlay the content. If not, we'll fix the sidebar to the left-hand side of the screen. We can then come back to our template and swap out the mode and open inputs with properties that will be calculated on the fly.

[03:21] Now when we collapse our page, our sidenav collapses, allowing for our main content to fill the entire screen. All that's left is to add a way to toggle thie sidenav back open and closed when the sidenav is collapsed. Let's go ahead and add a minifab button with the color of primary underneath our SidenavContainer.

[03:35] We'll also utilize a simple grow in and out animation that will be triggered when the button is added and removed. When the user clicks this button, we want the toggle to sidenav overlay. I'll also add an NG if statement to correspond with our screen size property and an icon to our button to make it more clear that clicking this will open the table of contents.

[03:55] Finally, we need to add some basic styling to correctly position our button. We'll give it a position of fixed, slightly off-setting to the right and bottom of the screen. We'll also bump the Z-index.

[04:06] Now when we collapse our screen, you can see our minifab button appears. Clicking it will open our table of contents as an overlay, but when we expand the screen again, we're back to our sticky sidenav.