React & Material UI #21: Drawer & Drawer + React Router

hey everyone in today's video we're gonna be going over one of materialise most use yet least understood components and that is the drawer component now the drawer component is pretty powerful you'll probably find it in almost every application that you use and in today's video I'm going to show you exactly how to use the drawer what the different types of drawers are how to have little icons in your drawer and also how to implement your drawer with react router so that if you were to open it up and click one of the items on the side it would take your user to a new page and update the URL for you so and I want to first of all say thank you to everyone that's been commenting on my past videos I love interacting with you guys and like I say in all videos if you find value in this please consider subscribing liking or leaving a comment I try my best to respond to every single comment that's left and I love any feedback that you have any suggestions that you have I really take that to heart in fact this video right here is from a suggestion from someone that left a comment on one of my last video so once again thank you all for all the support and without further ado let's jump straight into it for the drawer there are three main types of drawers that you have to be concerned with the first one is called a temporary drawer the next one is going to be a drawer that is persistent and the final one is going to be what they call a permanent drawer and I'll tell you what each of these means first of all let's look into the temporary drawer you'll see here in the metal UI documentation they give us some options for a couple of different ways to open their drawer examples left right top or bottom it's pretty self-explanatory if I were to open the drawer on the top you would see here that it sort of literally opens it up on the top left will open on the left and in this example we're pretty much just gonna focus on opening it up on the left but just so you know where the drawer opens up is from a prop called anchor so and we'll look into that when we actually look into the actual props itself in just a second but we'll see here for the temporary drawer if I click left everything else on the drawer will open on the left and everything else will sort of dull out into the background now with temporary drawers that is a feature of it it will open up on top of existing content and it will dull everything else in the background of the event the drawer that is pretty much what a temporary drawer will do and if you really know your Mattila UI you'll know that this temporary drawer is sort of built with the moral component in mind if you're not sure what this moral component is it's pretty much a component that when you click a button it will open up a little you know pop-up in the middle of your screen and it will dull everything else behind it so for example you can see here I clicked open modal and everything else in the background will be dulled the drawer and the content will be absolutely positioned on top of everything else on the screen this temporary drawer will work the same way now if we scroll down to the persistent drawer we'll see here that if I were to open this up so here's the example this one's actually in this little area instead of the way the other one works when I open this up you'll see that it actually pushes all the content to the right and it won't gray anything out so this one for persistent or it won't do the same overlapping of content and it won't tell everything out it will pretty much move all your content to the right when you open your drawer and when you close it again it'll move it all and then you have your permanent drawer at the very bottom which is what we're gonna be focusing on for this video and that is pretty much where your drawer is going to be permanently open here on the left side and it will push any Content over to the right so now that we have an example of our permanent or it looks like let's take a look of the code and see what it actually looks like inside I didn't see here the code sort of looks a bit complex it's not as bad as some other components but let's break down exactly what is happening one by one first of all you'll notice if I were to open for example the persistent drawer again you'll see here in our actual drawer code which is going to be down here where the drawer tags start we're passing in an open prop and that open prop is essentially going to be a state variable that you sign up here and whether or not is it is open determines whether or not you see the drawer so we have a a handler function for sending the drawer open and sending the drawer of clothes and that is triggered every time I click this icon in our app bar so when I click the type down in our app bar what's happening on the hood it is it is sending the open variable for our drawer equal to true and then when I click this button over here it is setting the open variable to false and that is what actually hides it so you'll notice when I go back to the permanent drawer we don't actually have to pass in and open our clothes into so I ready to go oh yeah I was looking in the right place it's right here so we don't actually have to pass in an open into here because our variant is permanent and that makes it so that it is always gonna be shown we don't have to specify whether or not the drawer is shown or whether the drawer is open or not the next thing you'll notice is they're overriding a couple of styles we have our variant they're overriding a couple of classes this is just for styling purposes to make it look good in the metodo I example and then our anchor which we talked about before is left which means it will open up on the left side now the actual drawer itself is really nice because it takes in children for what is displayed inside of the drawer as really good because you can customize it to be sort of whatever you want for example if we were to look here we can specify we can sort of see that this is split into a couple separate parts first you have this sort of blank area and this blank area then leads into an area where there are a couple of options and in between them we have a divider and if you scroll down a bit more after these couple of options we have another divider with even more options coming after that and you'll see here if the code is specified and resembled very similar to what is happening here once the drawer is defined we have a div and that div is gonna take up some space they sort of wanted it to be sort of flush with this app bar which is why they left some space open here you can even make its let this app bar will come and stretch over this short if you really want to do with some CSS stylings but we're not gonna go too much into that and then after that space we have our divider which you can see here and then after our divider we have a list and inside of our list this is sort of where a lot of people might get confusing this is where I was personally pretty confused when I was learning tour for the first time a little while ago but what is happening here is inside of this list they're mapping over they have an array of every single item they want to be displayed in there for example they have an index they have a start they have send emails and they have a draft I so they create a rate and array with all of these and then they map over them and if you're not too familiar with JavaScript where you're just getting familiar map is just sort of like a for each loop that will take in each variable in the for each loop will be each item in the array so when we're mapping over this this text variable is going to be whatever the name of that value in the array we're looking at and then in here we get to do whatever we want for it so for example you can see here in our list item we are we we have a list item for every single item here within that list item we have a list item icon which I'll touch upon in just a second and then finally the list item text and then primary is in list item text on what the label of that item list item will be and we are passing in text which essentially as we loop over it the first time we create a list item that text will be in docked in inbox the second time we loop over it will be start the third times send email etc etc etc and that is what creates the text here for every single list item and finally for this list item icon you'll see here that if we look at here each item has an icon and it sort of alternates so it goes with this like inbox icon to like you know a mail icon then in the inbox icon under the mail icon again and the reason it does is because the way they do it in the documentation is sort of a really weird example on what they're doing is essentially they're saying for every other icon it is it just alternates so the first you know all the even icons for example in terms of numbers like the first one the second one the fourth one so on and so forth will have this inbox icon and then all the other ones the odd-numbered one so for example the first the one you know that comes after the first one and then the third one etc etc if you're looking at array indexes will be male icons so it's sort of weird the way they did this but I'm gonna show you how to do this so that each one of these items will have their own icon and you don't have to sort of do it in that weird way and that is essentially and then we have another divider with another list with more items and that's essentially all there really is to it this all this stuff down here is just sample text just sort of give you an idea how the content looks when you have a tour but that is essentially all if you look at all these other examples a drawer is it is just the drawer tags with the specifications on how you want your tour to behave and then everything inside of it is how you want everything to look inside the actual drawer itself now let's take a look at the actual drawer API and let's just really quickly let's really quickly go over the actual really important props here so for example we have anchor we talked about this by default it is set to left but you can send to bottom left right or top and that just decides where the drawer will show up we have our children which is where you pass everything in classes like every other Mattel UI component is where you can overwrite very specific styles in the tour component then we have for example modal props like I said for some of the drawers there on top of a modal so if you want to specifically pass in props for that modal you would use this we have our own clothes which will in some of the other drawers like I showed up here if you were to click over here this button will take in pretty much the on clothes and we'll set the state to be false the open state to be false then we have paper props because some the drawers built up on paper and we have slide props for any legs slide in transition stylings and finally we have variant which we talked about it will default to temporary which is the one that sort of gray's everything in the background out but you can set it to permanent persistent and temporary so now let's look into code sandbox and actually get an example of how we do this so just like the tabs video I've set up a code sandbox with very basic react routing if you're not too familiar with the reactor outer I'll briefly go through it essentially what is happening is I have three pages I have a home page I have a contact page and I have an about page and essentially all I'm doing with this routing is I'm saying if the URL is just a regular slash I'm gonna display the home page if the URL is slash contact I'm gonna display the contact page and if the URL is slash about I'm gonna display the about page so we can see that on the example on the Left I'm gonna type in slash about here and just see it goes to this is the about page it displays whatever is in the or about touch a sex which is a see about paste if I go to contact you'll see your just switches to this is the contact page which is pretty much all that's in the contact page and then if I just go back to the base URL it will display the home page that just says this is the home page essentially so that is all pretty much there is to react at a router right now we're gonna be first building out a basic drawer component and then we're gonna look at how to really style do things with react router so over here in the actual app that is you'll see here I've commented out this drawer line but essentially we're gonna be creating the drawer in this file so all I've done in this file so far is I've imported the drawer from mattel UI core and I've aliased it and a lot of the times you're gonna want to do this it's sort of weird in your if you're making a project and you have a drawer in your project to name it to name the components something other than drawer but the thing is when you default import the drawer from material UI it will name the name of the meteo a drawer is also just drawer so you have two options either one you can import you know you can alias it and say like mui drawer from and you can directly call it over here you can default import it from the actual drawer folder from a toi library or what i like to do because i like to import everything in sort of the same system as non-default imports from matil you like or I like to alias it so I can say I want to take the drawer component from until UI and I want to name it for my purposes Mottola right drawer so when I'm using the material I tour I'm gonna use mature mu Y drawer tags instead of just the drawer tags like we saw in the examples over there and this is nice because like when I examine abhi importing list item we can even just quickly do that now I'm gonna want to be importing all the list item stuff and I don't like to have huge huge lines of imports like you see here every single thing that they're importing is like a whole like big line so what I like to do is I just like to group import them like so you can when you import them as non-default from court you can group import them and someone actually pointed out in one of my previous videos that this will actually make the bundle a bit when you build your raft application I'll make the bundle a bit bigger which can cause like bundling your application to be a bit longer but I haven't noticed any big performance differences using this in production level application so it's not that big of a deal in my opinion so now I have all these imports let's go ahead and just very very very make a very basic drawer so we're gonna go ahead and import if we scroll down to the actual drawer code we're gonna just import essentially just a list of items and pop that in there the same way that they had before and then for for now we're gonna leave out the list item icon just for simplicity sake and we're also gonna take a list from here as well and now I can go into my application and generally you'll want to put your drawer in your top level component so in most cases that is your applique s you'll just want to put it anywhere because it doesn't matter if you put it above or below the other content because by default with the anchor default it to left for example it will show up in the sort of correct position all the time regardless of where it is in your code and you'll see here if I go ahead and uncomment that code now and I were to go back and refresh the page here oh the last thing I have to do is so right now nothing's showing up and that's because right now the default is variant for the drawer is temporary and with temporary as you recall we have to set open to true so just for example sake let's it open let's set open to true here you can just set open if you don't want to right open equals true and that will automatically default it to true but we can see here if I set open equal to true we'll have our sort of really basic tour on the side here but like we said we want the temporary sorry the permanent variation so I'm gonna say variant is equal to her permanent and you'll see here that I don't get that graying effect here and we still we still will have our actual drawer on the right side here so now let's go ahead and from this point we can pretty much customize bring that I come back in and show you how you can customize it without sort of this weird logic but first if you'll notice the actual homepage text isn't displaying because the app bar is on top of it and unlike the other app variants sorry drawer variants the drawer when it's in permanent State you have to add a bit of styling for it to show properly so all we have to really do here is the first thing we want to do is we can wrap this in a div instead of react fragment and we want to give this a class and pretty much make the display flex so what we can do is we can import make styles from metallic or / styles and we can say can't use styles equals make styles and let's give this div a class name of let's say for example classes dot container and let's get classes from you styles and finally over here we can set container oops container we can say display flex now you'll notice it still doesn't work and all we have to really do is just give this drawer a whiff so that it pushes the content out because right now the drawer is pretty much the way that it's coding internally for me tell you why it just doesn't have a width for this for the drawer container than everything else is bigger so we can go ahead and we can import make styles we give me just copy this so it's a bit faster and we can say drawer we can make though with to something like let's say 150 160 pixels then over here cons classes equals to you styles and we can give our drawer class name equal to classes drawer LLC here our homepage text gets pushed out of it and now we can go ahead and do that simplification I like before so the first thing we're gonna do is let's items list let's create an items list and let's move all of this stuff into there so first we'll just straight up copy what we have here and test this and make sure we have it working before we get on to the more complex stuff and as we can see it looks like there we go it's still working now for the icons and stuff like that what I want to do is I want to essentially make it so that this array doesn't just contain text I want it to contain objects and each object will represent one of these list items and it will have not only the text that should be displayed in there but also the icon itself so for example what I can do is I can say text and then I can say like inbox and let's just um for now convert all everything with tanks so text inbox and tags or say start send email and once I format this it'll look a lot better text and then wrap that in and weakens here so now we have an array of objects and right now each object essentially only has the actual text displayed inside of it as well and now you'll notice we're getting an error all we really have to do here is we can change this from just straight-up returning and what we can do is wrap this in a return and we can destructor the actual text so we can say item we can destructure the actual text from there we can play text is equal to item and this should work and there we go it's still displaying the text so now what we're doing is anything that we want to use in this JSX that is being displayed here we can sort of pass it in but add it as an attribute to this object for every single item and then just destructor it at this level and use it so for example we can also for some things use an icon so we can say icon and I think we have to actually add until you buy icons library UI I con let's see let's see what AM poured it in here so slash icons some at MacDill UI / icons UI / i there we go go ahead and import that and now let's say for example we want the inbox icon and the mail icon this called sandbox by the way is coming from the official example that they have here in the middle of making this video cold sandbox went down so I just was sort of playing around with it a bit and then when I finally came up I started again so for let's say for in box I want the inbox icon oops so I can just call the inbox icon and then let's say for the icon for send email we give it the mail icon icon we can say mail icon all right so nothing's going to be displaying yet but we've added the attributes and you'll notice that for some of these we don't have icons so what we can do here is we can say we can first D structure the icon over here and sometimes this icon is going to be undefined because for example start it doesn't have an icon and I can say icon and and which is pretty much saying if the icon is not undefined and then whatever we put after this and an will be displayed so what we want to display is essentially the actual icon nested inside of a list icon so we can go ahead and delete the matil UI code from before pop this in here and instead of having this weird ternary stuff I can just simply display the actual icon itself if I scroll back here you'll see that we've got it working so now we have a working so that icons whenever we include an icon it'll show up between there and now just for the sake of uniformity let's give all of these icons just so it looks not as weird there we go so now that we've gotten that done that pretty much covers the basics of the drawer but now let's see how we would implement it if we wanted to for example whenever I clicked you know one item have it lead us to another page and also let's increase the drawer with just a little it so that it doesn't cover it there we go so now what we're going to do is essentially first of all let's change this to the actual real names so at home about and contact and we can get rid of this last item over here and this structure is also really nice because it's really easy to add more I didn't stuff of that but here we go we're gonna keep the icons the same I don't really want to for the sake of example find an icon that goes well with home about in contact but now what we're going to do is essentially whenever one of these things items get pressed with reactive router what we want to trigger is something called a history push history is a default object that comes from react router and when we want to change our URLs in a single page application which is the case for react what we essentially want to do is do a history push and then in the parameters put the URL we want to go to so for example for home since the URL is just slash we we want to do a history dot push slash but first of all we need history to actually be passed in here so one way of doing that is wrapping our application with the with router a higher-order component and that comes from react router dong now if I were to take in props here and I were to console dot log crops and open up the console here you can see here books refresh this all right it's just refreshing you'll see here that history of sorry props has a couple of different objects and history location and match are always gonna be default past in when you wrap your component around with with router these are all things to do with react router location it can tell you what your current path name is match is good for getting up URL parameters as we saw in the tabs video and history is good for like I said history dot pushing so we're gonna dis structure history out of here so we can say Const history is equal to props we're gonna pull the history prop of the history variable out of props and now I can add an on click to each of these so I can say on click is going to be a function that calls history dot pushed to just slash for home because we wanted to just go to slash make sure we add the comma here now I can copy and paste this for every single one of them and just change the place that it goes so about will go to slash about and contact will go to slash contact and now all that's left to do here is we can the structure the on click from here from the item and now for this list um I can say on click equals and then I can just pass in pretty much the on click from before the on click that we're getting from the actual item itself and let's see if this works let's go ahead and refresh our application and alright so right now we're on the home page so if I click about there we go it switches the current URL to slash about and about page displays if we go to contact the same thing will happen over and over again and that is pretty much it this code will be on code sandbox I'm gonna be sharing this in the description below and like I said before if you found following this video please consider liking subscribing and or leaving a comment I try to reply to everything and I really hope that you found value in this video and that it was useful and that everyone is staying safe thanks for watching and I'll see you guys next week

Channel: Anthony Sistilli

Views: 46,302

Keywords: MUI, MUI Drawer, MUI Drawer Link, MUI Drawer routes, MUI Drawer routing, Material UI, Material UI Drawer React, Material UI Drawer React Router, Material UI Drawer React Routes, Material UI Drawer icon, Material UI drawer example, Material UI drawer not closing, Material UI drawer react router example, Material UI drawer with button, Material uI Drawer, React, React MUI tutorial, React material ui introduction, React material ui tutorial, sidebar in reactjs

Id: CjFWbEOcq-Y

Length: 26min 7sec (1567 seconds)

Published: Sat Jun 06 2020