The sidenav component lets you move your navigation into a slide out control familiar to most users.
- [Instructor] A side navigation drawer contains destinations for our app that will help users navigate their way around our website. In material design, a drawer slides in from the left and disappears with not in use freeing up screen space. Let's add a side nav drawer to our application now. And now we're ready to add angular material to our application. There's just one problem. I've got all this old HTML that's not compatible with angular material. That's not a problem. We'll just return to our id and we'll just blow it away. I'm going to go to homepage.html.
Select all and remove. I'm going to go to homepage.sas and I'm going to remove everything below line two. And now I'm going to pull up my application and it should be empty. And it is. Great. Now I'm going to add back some angular components. But first let's add some styling information. I open up styles.css. I want to create a color scheme. Now we're going to get into color scheme in detail later, but for now, just know that we have a primary and an accent color. So I'm going to add the primary color. I'm going to use a mixing called mat palette, and I'm going to pass it green as our primary color.
'Cause we're carrots, we're organic, we're about nature, green seems to make sense. Now let's add an accent color. Same thing, we'll use the mat palette mix in and we'll pass it cyan as our accent color, 'cause it's an interesting color and it seems to go well with green. Now I'm going to create the scheme itself and I'm going to call it this, and we use the mat light theme, mix in, and we'll pass our colors, carrots app primary and carrots app accent.
And finally we'll include angular material theme builder and we'll pass our full color scheme. Let's refresh, make sure we did this correctly. And it looks good, no errors on our application. So now that we've done this, let's open up homepage.html. Let's add the nd sidenav container element on line one and inside this we'll add the nd sidenav element and as an angular we'll use the pound sign to give it an id and we'll call it sidenav.
We'll put the word sidenav inside this element so we can just see it in progress and then I'm going to add a button and we'll give it a click event, and I'm going to reference that to sidenav and say toggle. We want to see that sidenav open and close. So I'm going to put the word toggle here and save. Let's refresh our application. There's our toggle button. But you can see the sidenav appears but I've got a problem. My button is disappearing here. That's okay. That's because the default mode is over. In our case we don't want it to be over.
We would like it to be to the side so I'm going to set the mode to side. Now I should expect this button to slide open when I click it. There we go. Now if you can see this gray line here, it's very faint. Our sidenav is not encompassing the entire page. That's a simple problem to fix. We'll go to our master style sheet, styles.css. And under body we're going to add on line 10, I'm going to set the body html and the mat sidenav container to 100 view height.
Now if I refresh my application, my sidenav now encompasses the entire page. And that's what I want. Let's style it just a little bit more. Let's go to homepage.sas and we're going to do the mat sidenav container element and the mat sidenav element and we're going to set our sidenav to 200 pixels, and we're going to set the background of our sidenav container to grey, and I'm going to use that mat grey which comes from the angular material color schemes and see how that works.
There we go. I can see my sidenav as clear as day. It opens and closes and we're good. Let's do one more thing before we move on. Let's add a toolbar 'cause typically we would have a toolbar on top of our application. So I'm going to return to homepage.html and instead of having this button here, I'm going to add the nd toolbar element on line six, and we're going to have a two-row toolbar, a primary nav on top with icons and a secondary nav for application. So let's build that now. I'm going to build nd toolbar, and I'm going to add an nd toolbar row.
And on the top of my toolbar here, I'm going to add some filler 'cause I want things to be right aligned. This comes from our master style sheet. And I'm going to add some buttons. My first button is going to be an nd button and it's going to say home. And I'm going to put four buttons up here so I'll copy paste this four times and I'll call these buttons home, coupon, coupons, checkout, and help.
And inside my bottom row here, I'm going to go ahead and put back my toggle button so I'll copy that from down here. Put him back up here. And maybe instead of calling him toggle, I'll call him something like menu. Let's hit save and let's return to our application and see what we got. There we go. We've got an application with a sidenav and a toolbar menu. As we go, we're going to style these buttons out a little bit and maybe set the size right, maybe put some other elements in here. But for now, you can see, in fact, let's make that a nd button not just a regular button.
Now it's a menu. Excellent.
- What is Material Design?
- Planning your app
- Adding the required modules to your project
- Installing and configuring Material Design
- Adding a sidenav
- Separating content using the tab control
- Working with grid layouts
- Adding buttons and icons
- Selecting colors and building a color scheme