Material UI Tutorial #13 - Permanent Drawer

all right then so in our layout component right here i'd like to make a side draw for the navigation so it would include maybe a site title at the top and also links to each of our pages now if we take a look at the documentation for the draw component right here let's scroll down there's loads of different types of draw you can have a draw that opens when you click on a button like this you can also have drawers open from different sides so for example top and also to the right etc if we scroll down here we can have a responsive draw we can also have a persistent draw if we click on this it opens like this the one we want is a draw that's always open a permanent draw right here so it's always going to sit on the left of the screen so this is the one that we want now let's take a little preview of the code to make this up and again it's going to look quite complex at first if we scroll down here we can see there's an app bar involved as well but the thing that we want is this draw so the draw down here has a lot of different props and things inside it we have a list of items we'll look at lists later but i don't want to just copy and paste all this i want to create our draw from scratch i just wanted to give you a quick preview of what we're going for here something that's permanent on the left and has these different links inside it so let's start fleshing this out in the code so the first thing i want to do is import the draw component but also the typography component as well because we're going to use that to output a bit of text inside the draw and then down here we can use our draw components and inside that we're going to do a div for a little bit of content and then the typography component as well inside that now the variant of this is going to be an h5 so let's add in that prop h5 like so and then all i'm going to say is ninja notes like so all right then so that's our basic draw but at the minute it's not really going to do much we're not really going to see on the page so we need to say to material ui how we want to implement this draw so there's a couple of things we need to do first of all i'm going to give this a class name and i'm going to set it equal to classes dot draw now we need to make that class up here so let's come to the top and do this draw class now the first thing i want to do inside this class is apply a width for the draw now i'm not going to hard code it here instead what i'm going to do is create a width for that up here by saying const draw and we can spell it width is going to be equal to 240 and the reason i'm making it up here is because we might use this variable in several places inside our different classes later so then we only have to specify this width once at the top and if we change it we don't have to change in multiple places so then i'm going to say the width of this draw is going to be the draw width like so okay so now we have that class that specifies the draw width the next thing i want to say is the variant is going to be equal to a permanent draw and now material ui knows to permanently display this on the page we also need to say that the anchor is going to be to the left and that means it's going to place this draw on the left of the screen if this was right it would place it to the right if it's top it would put it at the top etc so if i save this now and come back over here i'm gonna open this up and now we can see this very very primitive draw on the left over here so if we go to the home page we're going to see this as well okay cool so then now we also want to pass in one more thing into this and that is going to be something called classes and what this does is allow us to override the css of the classes inside the draw component built into it by material ui now this draw component obviously has a lot of template inside it and part of that template is the paper component so we can override the paper class with some of our own properties and we're going to do that because we want to set the width of the paper because at the minute the draw width is going to be 240 pixels but the paper inside it is much smaller and we want to make it a bit bigger so it pushes it out to the right so in order to do that i'm going to say right here we want to override the paper class with one of our own classes and that's going to be classes dot draw paper like so and this is going to be pretty much the same as the draw class so let me copy that and paste it down here and call this draw paper instead so all we're doing is applying the paper inside the drawer that's built into it with this width and if i save it you might not actually notice much difference but it does scoot it over to the right a little bit it makes that paper wider now we do have one problem this stuff under here is going under the draw it's not sitting next to it up against the edge of the draw now what we need to do is set the display of this instead to be flex and what that means is that this will sit on the left and then this will sit on the right so let's give this a class as well class name is going to be equal to classes dot root and we need to make that class up here now so we'll say root then inside here i just want to set the display property to be flex and that means that this will now sit next to this instead of going over it so if i save it and preview that looks a lot better all right then cool so that is our basic draw created in the next lesson i'm going to show you how we can create a list of links right here with icons on the left as well

Channel: The Net Ninja

Views: 28,235

Keywords: react, material ui, react tutorial, material ui tutorial, react material ui, react material, material ui crash course, tutorial, crash course, react bootstrap, material ui project build, materialui, materialui tutorial, react materialui, drawer, side drawer

Id: Ix1LZGBSp-E

Length: 6min 2sec (362 seconds)

Published: Fri Mar 26 2021