React & Material UI #26: Header (Appbar + Toolbar) & React Router

hey everyone in today's video we're gonna go over one of the most requested videos that I can't believe I still haven't done yet something that you'll find in every single react application that's using Mattel UI and that is a header otherwise known as an app bar biomaterial UI now this is pretty obvious why you would use this and a lot of different applications that you're building it's essentially what you would find at the top of every single webpage over here you can do things like add a little menu you can add a title to the page you're on you can have buttons but most of all you can have sort of this ability to have a menu that will take you to different parts of your site and in today's video I'm gonna show you how to implement a pretty basic one of these and also I'm gonna show you how to make it a bit responsive so it looks a bit better and on top of that I'm gonna show you how to use it with react router so you can direct your users to different parts of your site however you would like and if you find value in this video please consider either leaving a comment liking or subscribing I can't tell you how much it helps with YouTube's algorithm to get these videos out there I love reading all of your comments this video if you look at last week's video is pretty much I'm doing it because someone in the comments suggested it so I really appreciate it and even though I don't get to reply to every single comment anymore I still read each and every single one of them so thank you guys for all the support all the suggestions and all the feedback so without further ado let's jump straight in a bar is a bit of a weird component in the sense that you actually need if you scroll down to the bottom and look at the API section two different components to build the header in your application number one is app bar which is the component we're looking at right now and number two is tool bar and tool bar doesn't have its own component page demoing how it works because it would pretty much almost always be used in conjunction with app bar and I'll show you just through this simple app bar how that works if you were to expand the code here you'll see that if we scroll down each header is comprised of essentially two different things number one is your app bar and then number two is the tool bar within the app bar now the difference between these two components is that the app bar is pretty much what gives the positioning and what gives the styling in terms of layout to the actual header itself and toolbar is sort of what gives this for example nice background that you see over here for every single application let's go in code sandbox and edit this and sort of play around with that specific metal UI example if you were to see I were to remove the toolbar that the app bar gets nested in you'll see that everything internally sort of gets really jumbled up and if I were to go back and keep the toolbar and remove the app bar I think I had it the other way around the app bar is what actually gives it its its styling in terms of color and stuff like that and the toolbar is what gives us an instructor you'll see here that we sort of must have a regular bar you can't really see it there's not really any styling towards it and also a bar will give it sort of the structure that it will always stick to the top so that header functionality whereas tool bar will not do that so if we go back we can see once we have our app bar in our tool bar inside of it is where you pretty much nest whatever you want to be inside of your header so for example we have a menu icon in this example we have some typography that says news and then we have a button that says login and you'll notice that where it is positioned is all through you Styles over here so for example our div wraps this entire header with root but also if we were to look inside of the f bar to see the stylings we can see for example our menu button has the menu button classes and you'll see all the really doing is just adding some margin our typography has classes not title and all they're doing classes on title is saying they're setting Flex grow to one and what that will do is it will push whatever comes after this typography to the very end of the container div which happens to be the login button which as you can see is pushed to the end so knowledge of flexbox is also pretty beneficial to have while you are making a header now we can see if we scroll down there are tons of different examples they have they have header with more stuff inside of it so for example maybe a search bar maybe some notification icons and stuff like that maybe a menu you can see here you have one specifically with a menu another one specifically with just the search bar they have a demo of them doing it with the prop dense which will only work for desktop but it'll make the margins and the padding around it a bit smaller so the pass so the app Bart doesn't take up as much space then you have prominent which is pretty much for example if you wanted an app bar and then under it let's say for example any page that you're on you want to display some specific texts and stuff like that and then finally for mobile and stuff like that they give you an example of how to sort of make your app your app bar at the bottom of your application and then with like a button and I'm sure you guys have probably seen that if you use Android app bars at the bottom of an app that look just like that so there are tons and tons of tons of different things you can do with these components but we're gonna be focusing on just pretty much the basics how to use a bar with tool bar maybe make it a bit responsive with a menu and also whoops maybe make it a bit responsive for the menu and also work with react router and to do that we're specifically going to go with this specific example right here app bar with menu now before I go straight into that let's take a quick look at just some of the important props that you'll see in app bar and tool bar and you'll notice if you scroll down to the bottom of tool bar you only see it being used in app bar however I think you can use toolbars in tables as well so this isn't the only place you would use it so if we go into the app bar API we can see that you can set things like color you can set things like the position which directly correlates to the CSS position of the entire div and those are pretty much the main things that you're going to be using honestly the fixed position is how standard app bars work unless you're trying to get a different functionality from your header you wouldn't deviate from this fixed and color obviously is something you could change depending on your application depending on whether or not you set a primary color in your theme for your application or whether or not you just want to set it to something different and tool bar you'll see here there's not too much you can play with they have for example variant being regular dents which we exploit gutters which is pretty much some extra padding on the left and right of the app bar if you set it to true it'll just disable that extra padding that you see there so let's go ahead if you aren't familiar with my videos I have this one code sandbox which has pretty much react router already set up and I'm gonna be using that for this example so for example if you come here you'll see that in our app dodge is we have a reactor router set up with three different pages number one is the home page which is a slash and you'll see here all it is is just Texas as home page I have a slash contact page so if I go to the application type slash contact it'll bring me to this page called the contact page which as you guess it is just a page that has text that shows contact and finally we have the about page which is no different from the previous two so what we want to do here is essentially add a header and when we add that header component I want it to be able to click whether I'll click which page we want to go to and also I want to be able to control if the screen is too small I want the header to not show any text in it but just the menu and then maybe a drop-down menu where we can edit that so to do that we're gonna come back to our documentation and we're gonna take this example right here so I'm gonna go ahead and copy this entire thing into my header component I've already set up a blank header ojs component nothing's inside of it and I'm going to be displaying it pretty much at the root level of our component which is just a thought jas so gonna go into hetero sex is gonna paste us all in now you'll notice in this example they have a little switch bar where you can determine whether or not you want to show that little icon with the menu and stuff like that so let's go ahead and just say get rid of all of that logic so we'll see here if I were to actually go ahead and uncomment this and import it we'll see here that our app bar shows the way it showed in the Mattila I example but we just want to get rid of this logic and we probably want to get rid of this as well so let's go ahead and go into our header component and sort of start taking out all the boilerplate play cold than they had so first thing we're gonna take that out um that's gonna come with this function which is gonna come with this state variable let's just go ahead and remove that we're gonna get rid of the logic of whether or not to display that thing on the side based on that um based on that switch at the top and finally we're gonna remove the imports and that we just have a basic component that as you see here has a menu over here and this drawer or this menu doesn't really work I think it makes more sense to get rid of this have this drawer icon here and only show that for our icon whenever we're in mobile form so let's go ahead and modify that if we come here we can see that within our toolbar this is where the real header code starts from here to essentially here what we're gonna do is I'm gonna take this icon button and this menu icon I'm gonna cut that out of here so you'll see here now if I save it doesn't show up there anymore and where we have this menu we can see here this is where that's happening we have an icon button and then inside here we have the account circle which is that sort of profile looking picture I'm gonna replace all of that with our menu icon so it sort of makes more sense when you try to open it but one thing that we're missing is we have to add this on click to handle menu back in there so I'm gonna actually just paste this below cut this in yep and then I'm gonna delete this code right here on that shows the old menu button so here we go now we have an actual menu icon that opens up the menu and we'll go sort of into making those menu items actually going to the specific place we want to so first let's add a home option in this menu then we're gonna add a contact option in this menu and finally we are going to add a let's say about option now you'll see whenever someone clicks on one of these menus right now what it does is it just handle calls this handle closed function which will pretty much close the menu and if you're not too familiar with how menus work pretty much there's two functions on having a menu open closed one of them is called handle menu the other one called handle closed all it really does is sets this anchor state variable um and all that really is is it tells you where the menu is going to open up so if we click handle menu if we click this menu icon it's gonna call handle menu and it's got the st. gonna set the anchor elements position to wherever our mouse was and that's where this drop-down is sort of gonna pop up and then when we click on something that would essentially you know close the menu it'll set the anchor pretty much the positioning of it to null which essentially just closes the menu so that's all that's really happening there you know how it's not really too intimidating and then for whether or not the menu is open so you see here our menu the open is going to be based on this open variable it's pretty much just gonna be whether or not this anchor variable this anchor safer that we just talked about that is getting set from these two functions is going to be either a real number or a real value or just null so pretty cool logic I'm gonna tell you guys part I would say so what we're gonna do is we're gonna just pretty much add the router logic to make it so that whenever I click one of these it'll go to that actual page as well as closing the actual menu so first things first let's go ahead and instead of having the default export up here and stuff like that we want to wrap this up in react router so I'm gonna pretty much turn this into a regular arrow function so Const I'm also gonna name it header and we're just gonna make it a header function or sorry an arrow function and at the very bottom we're just going to say export default header and you'll see that there we go so it's not working any different we can also get rid of some unused imports we have up here now I'm gonna import with router from reacts router - Dom and if you're not familiar with react router I've used in some of my other videos but what it'll do is it's a higher-order component and when I wrap my application around with with router you'll see if I were to query the props for header now if I were to consult autolog the props and open up the console and let me move this there we go out of the way so we have a bit more room for what's actually being shown on the screen if I open the console and let's say refresh this you'll see that all of a sudden I'm getting a couple of default objects coming in from react router so for example I'm getting history location and match I've gone over in previous video which each of these are gonna be used for but if we want to be able to pretty much go to a different URL in our application we see we need to use something called history dot push so in our handle close we're actually gonna be called it we're actually gonna call this something like handle menu click so that the name makes a bit more sense and we're gonna add this to every single one of these and what I'm gonna pass into each of these over here is I'm gonna make these arrow functions so that I could I can call it and pass in a specific value so over here I'm gonna pass in I'm gonna take in to this I'm gonna take in let's say new wrapped or a new page or let's say page URL for example so the page over so I'm gonna pass it null for this one because this one is essentially just the on clothes function for the actual menu itself and in fact I don't even need to call handle menu on click for this one I can straight up pass in this state variables a set anchor a pl just like this and and set this to no so that we don't have to worry about weird paths being passed in from the on clothes for the menu itself what we do want is to worry about the page names from the menu items themselves so I have handle menu click and in here I'm gonna pass in the page Rotten to go to so for the home page I just want to go to slash and we can go ahead and copy this and the reason we're making it an arrow function instead of keeping it regular is because when you want to call a function directly aka pass something into it if you were to just do that here without the arrow function this will run every time this is rendered and you'll see when this gets run the react component will rerender and you get into an infinite loop scenario so the way you get around that is by making it an arrow function that calls on click that actually does the call itself so we're gonna make this go to the slash contact page and finally we're gonna make this one call our handle menu click thing and we're gonna make that go to about just like that now you're gonna see nothing's really changed if we go in here nothing's going to be clicked or anything like that we get a console error let's see what this is for okay so we just got a little error because it's in strict mode not that big of a deal we can go ahead and get rid of this console log and in here with this page URL let's go ahead and destructor history from the from the props from the props prop that we saw getting passed into the header sorry and then over here all we're gonna do is we're gonna say history dot push page URL now if I were to go ahead and refresh this you can see here we're on about if I were to open this menu and click home BAM we get routed back to just regular slash if I were to go click about we get routed to about and content we get around to about contact sorry so now that we have this working let's put in the logic to only show this menu when the screen size is small and then adding some items over here that will show up instead of this menu when when the site isn't a regular regular screen size that's not you know a mobile one so we're gonna come over here and actually I have this page open up if you don't remember from some of our other videos the way you make media queries to actually get the breakpoint looks like this so the first thing we're gonna do is we're gonna import use media query and there are lots of different ways to do this actually in fact if I were to look at theme break point let's see if we can let's see if they have an example here with the with theme hook instead alright it doesn't look like I do so let's go ahead and just use this example we can go ahead and import use media query just like that and all we're gonna do is we are going to take that example that we were looking at before let's see over here so what this will do is in our component itself we can add this here oh and we still need a with theme so we can switch off with theme or use theme let's check it out so let's say use the so this so that with theme is so used even with theme I've talked about before but the difference is when you use with theme you're using a higher-order component that will actually pass the theme in as a prop but if you use use theme it's a hook that will actually get you the theme variable so we can go ahead and over here let's see were the examples of using over here so you just import this from Styles just like that and actually we can straight up bundle this important make Styles one and then all now we just pretty much have access to the theme variable in our component if we do this essentially now these two will work perfectly because this media query what is going to do is it's going to check our theme variable to see what breakpoint we are currently in so I can set make a variable that will be a boolean called you know let's say is mobile and my condition from whether or not it'll be is mobile as if the theme dot breakpoint is small or smaller than small which pretty much encapsulate s-- the encapsulate some breakpoints small or extra small it's not if I console dot log is mobile just to show you guys in console what that will look like we can see here right now it is being set to true because our screens have been small but as soon as we start to expand our screen you can see here it's no longer true so let's set this to XS because I think small with how soom do my m2 code sandbox is a bit big you'll see here as I slowly make the screen smaller and smaller all of a sudden we are now in mobile so that is the logic we are going to use to determine whether or not we want to show our menu so I can come over here and I can make a ternary in here so right over here I can say something like is mobile and then if it is mobile I'll have all this code that displays the menu related stuff just like that pop that in there and then otherwise I'm going to let's just display a typography and then say not mobile and we're gonna replace this but just to make sure this logic works so let's see what did we do wrong here okay it looks like we forgot to add some fragments over here to make sure that we have a top-level items inside of there and there we go so right now the typography will say you know not mobile but as I get smaller it'll switch into this menu item which is exactly what we want so let's go ahead and now remove replace all of this logic properly with with actual text here that will allow us to click it so what we can do is let's say for example we just want a basic header that will show all the options we can copy this icon button code over here we can paste this and we'll have instead of a menu icon wrapped inside of it we can put typography instead get rid of this on click and we also can get rid of this class name over here and you'll see here now when I click one of these and obviously the styling looks a bit ugly in fact maybe we can keep that menu button class let's see does it make a square okay so that menu button class doesn't actually make it look a bit nice either but essentially if you wanted it to look like there you can play around with the props for this menu icon actually you know what why don't we just do that right now so let's go to icon button there API and see if they have any quick props that allows us to if given a negative margin counteractive padding on one side so let's try one of these outs so let's say that is false let's see how that changes the sort of icon around it okay so still looks sort of weird one thing we could do is instead of having typographer an icon button which I think makes more sense is we can actually just use a button and have for example something like home passed in and and let's go ahead and import that and I guess this makes a bit more sense also because we're going to be using an onclick to change the page so we can see here there we go now we sort of have a home button the color of the button let's go ahead and play around that so let's set color you close like secondary not the best let's see if we go to the button API let's see what other options we have for color we might have to just straight up set it or what we can actually do is set the variant equal to contained and that will make it be a bit more noticeable there we go and we can go ahead this get rid of these that get automatically added and let's remove the color so it doesn't look that far off there we go you'll notice here also that what is happening is our flex Grove in our title is what is actually pushing this to the end of the page one way we can solve that is pretty much as using our theme break point to only apply this flex grow if we are in small again so what I can do here is just pass this in the same the same break theme break point that we had down there as you can see we're passing theme in to make Styles and we can pretty much say we're only going to fly apply this flex growth when the theme is on the XS break point or down so you'll see here now a home will automatically move to the left and when I make this smaller BAM the Flex row goes back to one and it pushes the menu all the way to the end now let's go ahead and add some more menu items over here first let's wrap this in the div just like so and let's just add a couple more d's so home contact and about now you'll see it's all sort of bunched up so what we can do is we can add a class name to this div so your classes thought let's say header options then up here we can go ahead and add a couple things number one we can say displays flats number two we wanted to take up the whole width of the header so we can go ahead and we can go ahead and have Flex equal to one so it takes up all the space and now if we go ahead and inspect you'll see there are a couple of different styles I can add here to make this look a bit nicer so let's go ahead and go into here let's make this a bit bigger you can see we have our flex one and our display one here if I were to for example add the justify content space evenly you'll see that it spaces out a bit nicer so let's go ahead and add that'll also justify content let's set that to space - evenly and there we go so not the nicest looking thing in the world but you could play around with the styles this video is more to show you sort of layout and how to get all this working in the first place and then the last thing we have to do is add it some when I click one of these buttons it will actually work well what we can do is we can create a Const handle button click and handle it the exact same way as we did before for the handle menu click except we're not going to be closing or modifying the menu we could if we wanted to be lazy at this or if we wanted to clean our code up a bit we could actually have our handle menu click actually call this function so it doesn't feel like we're done in code but just for display purposes let's just go ahead just so it's easier to understand and add the same logic into here as well and now for each one of these buttons we're just gonna add an on click so on click equals the same way we did before go ahead and copy this for each one of these contact and about and there we go as we click it will see the page display changes or sorry the URL changes when we go into mobile we get this sort of menu and when we open it up we come back to this view and both of them work and that is pretty much the basics of how you a head it works now I suggest um if you're really intent on learning how to sort of make this code a lot nicer and cleaner fork this repository and if you remember from our other video where we did this we want to make this a lot more systematic and programmatic so for example we wouldn't have a brand new menu item over here and I'll show you guys an example with the menu item and then as sort of maybe a take home or a learning experience you guys can apply the same logic to maybe these ones over here and simplify things so what we can do to simplify this code a tiny bit and there's a lot of things we can do to simplify this code is we can have and all this menu items stuff sort of be programmatically displayed so for example I can create a data structure called menu items and in that data structure we can make that a list of objects and in each one I can say for example menu title I can have a menu title let's wrap this object and I can have let's say a page URL and so for example if we look at our menu the first one we have is called hole and that leads to the page URL just slash the second one we have is called contact and that leads to slash contact the third one we have is slash about and that will lead to slash about and now I can go ahead and do here is it's a displaying every single one of these just like you have here just redundant code I can just say menu items that map and then I can get them new item from there and just simply I can return one of these and I can add a menu item or even let's make it even a bit easier to understand instead of just having the jesús directly in there I can make this a real function I can destructor so Clontz let's say like title and page URL equals menu item and what that will do is it'll pull the title and page URL out of this menu item object each menu item object and I can just return pretty much one of these guys and in here I can it in the menu handle menu click I could just have the page URL and in here I'll pretty much just have the title let's go ahead and get rid of all of these now alright and let's see if that works ok so we have a bit of a bug let's do some debugging and see what is going on first of all that's console dot log title and page URL to see for getting the correct ones and it looks like our title is not getting it properly oh right I called it menu title so that was the issue and let's get rid of this console log and we can see let's see if it works there we go so just like that we have it working and we got rid of a lot of redundant code in the meanwhile and most of the times if you're building a full stack application this sort of data like what items to be be displayed in the menu and stuff like that will come from the back end and this view is a lot better to work with that as you if you watch my pokedex series you'll see that's how I built out that whole application that was getting real data from an API what I would do is I would sort of programmatically add all the data and then just loop through these data structures to display it that way if you ever add or subtract data you're not you know coming in here and moving or adding another button tag so I challenge you guys to fork this repo do the same thing that I just did here with these regular buttons try out maybe simplifying the code a bit by maybe making the function structure a bit nicer and maybe edit the styling a bit to make the header look a bit nicer but that is pretty much how head it works it was a bit more of a complex example but I know a lot of you guys wanted to see how it works responsibly and that is how it is done so once again if you found value in this video please consider subscribing leaving a comment really helps liking the video I can't tell you how much it helps with the YouTube algorithm to help get these videos out there it really helps I love as I said before I love seeing all your feedback in all your comments and I hope you're all staying safe and thanks again for watching

Channel: Anthony Sistilli

Views: 56,251

Keywords: Material UI, Material UI React, Material UI Header, MUI Header, MUI Appbar, MUI Toolbar, Material UI Appbar, Material UI Header React JS, Material UI Header Example, Material UI Header Tutorial, Material UI Header Menu Example, MUI Header Menu, Appbar Menu MUI, Material UI Appbar responsive, Material UI Appbar Collapse, Material UI Responsive Header, Material UI Header React Router, Material UI Header Menu Responsive React Router, Material UI Appbar Navigation

Id: 3HAARPCabUo

Length: 32min 25sec (1945 seconds)

Published: Sat Jul 11 2020