Create a Responsive Sidebar Menu with Angular Material

hey everyone i am suep khan and i'm a front-end engineer in this video i'll show you how to create a responsive site bar navigation menu with the angular material component library so what do i mean by a responsive sidebar navigation menu well on desktop or larger screen sizes we have enough real estate so we'd like our sidebar to remain visible at all times reminding the user of the different sections of the site on smaller screen sizes we'd like to hide the sidebar and show it only when the user wants to navigate to another section something like this in other words our sidebar will respond to screen size changes that is it will be responsive looks good let's get started to see exactly how to do this we have a new project set up here let's add the angular material library to it next let's add our modules that we have to use in our app we are going to use the mat toolbar module the math site nav module the button module the icon and the divider module let's just copy them all in great let's start building our template first we'll add the toolbar at the top then we'll add the material side navigation the material side navigation component has some parts to it the container is actually called the mat sidenav container as here this has a matte side nav inside of it and then the matte sidenav content you could keep any content here including a router outlet you will most probably be using routes to show a different section of the site here in my case i'm just going to have a diff and i'm just going to keep some text in it called main content okay now it's time to add some styles to spice up our layout so first we are going to add some styling for our toolbar we are going to give it a background color of a dark navy color and we are going to make the color white next we will add the styling for the side nav itself and lets also display displayed side by side so we can see our changes we will make the side nav mode side and opened at the start so we can observe the changes we are going to add a bit of a margin a fixed width and a background but before we see the changes we'll have to give some fixed size to the container itself we give a height of 100 viewport height minus 65 pixels and we can see our side nav container we're going to give some rounded borders and some padding and we're going to align the text in the center onto the content we're going to give a height of a little less than the matte sidenav container and some margins and a bigger margin on the left and then we are going to just use a flex container to center everything great lastly we just need to give some elevation and we're going to add matte elevation set 4 to the content and the border radius which seems to have been missed here okay this looks great now this is strictly not needed for this app but i wanted to make a more complete example of a sidebar let's now add some menu items to the sidebar we already have our template set up as below we're just going to copy it in great we have some buttons let's also add some bit of styling to make them better looking let's add a style for the buttons and the icons within them okay now it looks much better also we'll add an avatar section at the top with the name and a designation we'll just copy that in as well great so we have an image from unsplash and we have a name and a designation and a divider let's add styling the remaining styling for this let's copy it in now i'm not spending much time on this because it's the main purpose of the app is something else okay so this looks enough for our purposes we just need a bit of tweaking in the margins to make it look better okay yeah i think and yes a bit of margin here okay yes this looks great so now that we are done with our visual layout let's add the responsive functionality to make the sidebar responsive the material sidenav component provides us with a property called mode for large screen sizes the we want the mode to be side this means that the side nav will always remain visible and our main content is displayed along with it the other mode is over we'll need this when we want the sidebar to be hidden normally but only appear over the content when we want to navigate to some other section something like this so all we need is a way to switch between these modes when the screen size changes fortunately we can detect screen size changes with the angular cdk layout package and its breakpoint observer service so let's go to our app component and first we'll add a view child decorator at the very top to get the mat sidenav component reference in our code we're going to name it sidenav and give matt site now then we'll include the breakpoint observer service in our constructor declare a private variable here and call it observer and refer it to the breakpoint of server i'm going to import the layout package material layout package and we're going to refer to the breakpoint observer service here next any code to access the site tab should be in the ng after view init because otherwise our sitemap instance might not have been initialized as yet so we're going to specify an ng after view in it handler here and here we'll use we'll refer to this dot observer and we'll use the observe method of the breakpoint observer now the breakpoint the observed method can take in any number of breakpoints if any of them matches or changes state that it stops matching all subscriptions to the method are notified so let's add the observe on a maximum width of 800 pixels and then subscribe to it we'll add a subscription and we get a response of res now when this matches it means we are on a small screen so we're going to add an if condition here with a condition on the matches and when the width is not greater than 800 pixels so therefore we need to just set the mode of the side nav to over and also we will close the site nav because you don't want to show it if it doesn't match in the else condition it means we are on a larger screen and we can switch the mode to side and open the side nav great let's try this out now so as we can see we don't see any change here but when we are going to change the screen width to a larger screen size we can see the side nav shows up and then when we take it back to the mobile screen it disappears and it comes back again there's just one thing left now if you watch closely on smaller screens we don't really have any way to open the sidebar let me show this as you can see there is nothing to show the sidebar so let's quickly add a toggle button for the purpose the first thing we'll do is to add a template reference variable let's go in our after component.html and add a template reference variable to our mat site nav we will call it hash site nav and it will export as the matte side nav component then we'll add a material icon button button mat icon button will only show this button when the mode is over so we're going to refer to the sidenav instance and it's mode and when it's over we're also going to add a click handler here and that click handler is only going to call the toggle function of the site nav just going to toggle either open or close now we can have two icons here and let's add some if conditions for those icons the first one would be menu and this icon will show when the sidebar is in the close state which would be site nav dot opened false and the other icon would be the close icon and this would have the condition of the site nav being opened great let's test this out now okay i think we have put it in the wrong position let's shift it to before title okay let's try this again great now as you can see it pops up right and the icons change and it has all the required functionality and when we change the screen size we don't have it and then it appears again when we reduce the screen size so as you can see by combining the cdk breakpoint observer and the material side nav component we can build a truly responsive sidebar navigation menu with not much effort you can follow the same approach to make other components responsive as well i hope you liked this video if you did be sure to subscribe for more thanks for watching

Channel: Zoaib Khan

Views: 86,150

Keywords:

Id: 4CYuOiRHHA8

Length: 12min 17sec (737 seconds)

Published: Tue May 25 2021