Hamburger Menu ReactJS

bonjour now in today's video we are going to build a hamburger menu so currently we have this navigation that you see here but what we want is that when this screen reaches a specific width we want to transform this navigation bar to a hamburger menu because in my opinion this looks way cleaner so that is what we are going to build in today's video alright so we created this navigation bar that you see here in this component called navbar and basically this is just an unordered list containing some links now we created this in the video that pops up somewhere here above and i will also place a link in the description so if you want to know how we have created this then i would suggest to watch the just mentioned video because we won't repeat those steps here alright that being said let's start creating the hamburger menu so basically we want two types of navigations a normal navigation for laptop and desktop users and a mobile navigation for mobile users so therefore we will create two new files we will create a new file called navigation.gs and this will be a stateless function component called navigation and for now inside here we just return an empty string and we will create another new file we give that file the name mobile navigation and this will also be a javascript file and it will also be a stateless function component and we give it the name mobile navigation and also here for now we simply return a string or i mean an empty string all right now if you think about it and when we go to the browser again then both navigation should use the same links so the mobile navigation should use these links that you see here but also our normal navigation so i think a good idea will be that we copy this here i mean we copy this unordered list that we see here and this contains all the links so we copy it and then we remove it here and let's also remove the nav tags and then we will create another new file and we give that file the name navlinks.gs which will also be a stateless function component which will give the name mavlinx and then inside here we just paste our unordered list that contains the navigation links all right so we created this component called netlinks because this allows us to reuse these links inside our two new navigations and if you watched my previous videos then you know that there are three important things if you want to inject a component inside another component and the first thing we need to do is that we need to export the components that we want to inject so we do that via this line that you see here and then you go to the component where you want to use the nav links component so the second thing that you need to do is import and then you say math links and you can give it any name you like from and then the path to the component which is nav links and then you can inject it in here like this and now we have injected this nav links component inside our mobile navigation and we will do the same in our normal navigation we import it and then in here we do this all right and for now let's surround this with the nav tag so this will come in handy later on when we are going to style things a bit and we give this the name class name classes dot navigation and we will do the same in the mobile navigation component and then closing tag however we don't give this the class name navigation but we give it the class name mobile navigation alright so what have we done so far we have created two new components a normal navigation component and a mobile navigation component and both components reuse the nav links that you see here and in the other component you see it here so what we have done is that we have also created a component called nav links and we do that so we can reuse them inside our mobile navigation inside our normal navigation however if we now go to the browser then we don't see any navigation at all and that is because we also need to inject these newly created components inside our navbar components so what i mean with this is that we have this navbar component here however we need to inject our mobile navigation here and our normal navigation so what we first need to do is we need to import it so we say import mobile navigation from that's less mobile navigation and then we can inject it in here like this and we do the same for the normal navigation so we remove the mobile part and here we also remove the mobile part and we do the same here all right so if we now go to the browser and we refresh it we see what is this here oh yeah because we have specified a class name here like this we need to import the css and where is it this is the css line because this is our css file navbar.module.css so we have to replace it with this one and we have to do the same here all right and if we now go to the browser and we refresh it we see the navbar two times and no we are not drunk the thing is that this happens because we injected the normal navigation and we injected the mobile navigations so the first one is the normal navigation and the second one is the mobile navigation so here we see our first small problem we see two navigations the normal navigation and the mobile navigation now if you watch my video about making a website responsive and the link will pop up somewhere here above and i will also place it in the description then you probably know that we can fix this inside our css so if we go to our css file if you hopefully remembered is that we gave our mobile navigation the class name mobile navigation so what we can do is that inside our css we can say dot navbar dot mobile navigation and as a default behavior we don't want to display our mobile navigation at all so we can say display none now if we now go to our website and we refresh it we still see it ah i made a typo so we now go to our website and we refresh it then we are sober again because now we only see one navigation and that is the normal navigation but now comes the fun part because we can now say that this is all fine however when our screen reaches a width of let's say 990 pixels then we don't want to show our normal navigation but instead we want to show our mobile navigation and we can do that with the help of media queries so we can say add media and when our screen reaches a width of let's say 990 pixels what we then want is that we don't want to show our normal navigation so here we say display none however we do want to show our mobile navigation so then we can say display and let's say display flex for now so we convert this to a flex container and let's give it a background color of red alright so if we now go to the browser and we refresh it and if we make the screen a bit smaller then somewhere here yeah we see now this background is red so now the mobile navigation kicks in all right so let's place this on the left and this on the right maybe make the visual studio code a bit wider something like this and now we are going to create this mobile navigation right here so first of all we want to add a hamburger icon to this mobile navigation now there are several ways to create a hamburger icon for instance you can create your own via css however we will use react icons for this now if we go to our packets.json where is that file here and then here we see that we have already installed react icons so we've already done that in a previous video so we don't have to install it here again but if you need to install it for the first time then you go to the path where your project is stored inside the terminal and then you type in npm install react dash icons and when you press enter then react icons will be installed and you you eventually see it in your packets.json so you see a line like this all right now once you have installed that you can go to react that's icons that github dot io and in here we can search for a nice icon that we want to use so we search for menu and yeah you can pick any hamburger icon or any menu icon that you like um yeah we will pick this one so when you click on it it is copied and if you then go to your code and let's close everything close all and then we go to our mobile navigation all right so we are now in our mobile navigation and then we can say import and then we paste the name and then we can say from react desk icons and then we say the first two letters of the name of our icon so in our case this will be cg and then we can use that icon inside here so what we can do is we can simply do this what the hell and we say cg menu round so the name of the icon that you see here and we give it a class name for now let's make this a bit larger so we give this a class name for now because that will be handy later on and we say classes dot let's give this the name hamburger and then we give it a size of let's say 40 pixels and a color of what and then we close it all right now if we now go to the browser then we see the icon right here on the left alright so let's now center this icon vertically and i think you don't see it that good here but what we can do is we can go to the css file and then we can say align this items center and this centers the hamburger icon vertically and we can use this because we have converted this to a flexbox container all right so what we now want to do is that we want to position this hamburger icon that you see here all the way to the right so what we can then do is we have given this icon the class name hamburger so we can go to our css and we can copy this and then we say dot hamburger and then we can give it the position of absolute and then we can say place it all the way to the right so so if we now refresh it we see that the icon is placed all the way to the right however we want to push it a bit off to the left so therefore we can say here instead of zero we say five percent so it will be pushed five percent more to the left and yeah now we have this and if we hover over this icon here we don't get a nice pointer so therefore we can simply do cursor pointer and i see a typo here it is not cursong but it is cursor and if we refresh it and we hover over it we see a nice pointer so that's quite nice i think now we want to make this icon clickable so what we want is that when the user clicks on this icon then it should show the menu so therefore we go to our mobile navigation again and let's press enter and therefore we can simply do this we can say unclick equals and then we can specify a function and this function will be executed every time that someone clicks on the icon so for now we can say console.log and then we say you clicked on the icon my friend so we have something like this maybe you have to make this a bit larger so you see the whole code so this gives us the following functionality when the user clicks on the icon the function inside this unclick event handler is executed so if we now go to the website and we open up developer tools let's make this a bit smaller let's go to the console so what we can now see is that when the user clicks on this icon we see i want to point with my finger but you cannot see that so if i click on the icon here then you see that it prints you clicked on the icon my friend all right but we don't want this function to be executed we want more because somehow we need to keep track of this clicking state so we want to know when a user clicks on this icon since then we want to show the menu and when the user clicks again on this icon the menu should close so in order to get this done we can use the use state hook from react and therefore we need to import that first so we can say import use state from react and then here what is this it should be react yeah like this and then inside our component we can call the use state hook so we can say use state and this returns two values and the first value is the state now we give this the name open but you can give it any name you like and this is a boolean value so it can be true or false and the second value is a function and we give this the name set open and with this function you can change the state so yeah we can say equals and then inside this usted hook we can specify a default value or a starting value and in our case that will be false of course all right now we can call this set open function inside our onclick event handler so we can simply say that when the user clicks on the icon it should flip the current state so as a default value this will be false however inside here we can remove this and when the user clicks on the icon we want to flip the state so we give it an explanation mark and then we say open so yeah what this basically does is that if it is false the first time you click on it then it will be flipped to true and if you click on it again it is the value is true but then it is flipped and the value will be false so yeah i hope this makes sense it isn't that difficult i think all right and now we can simply do and then we can say if the value open is true then we want to show the netflix and otherwise we want to do nothing so if we now go to the browser and we refresh it then you see when we click it it pops up and when we click it again it is gone bam bam all right so now we can also do more fancy stuff for instance what we can do is that we can show another icon when the menu is open so let me show you what i mean with this so we go again to our react icons and there we search for something like close and then you pick any um icon you like i will copy this one here and then you say import name of the icon from and this will be the same path all right and let's copy this and remove it here and we will give it the name const hamburger icon equals and then we place this stuff inside here all right and what we can now do is that here we have this other icon this closing icon so we can simply copy this whole code here and then we rename this to close icon or close button i don't know you can give it a name you prefer and then we change this to this and what we then can do is when the value open is true then it should show the close icon otherwise it should show the hamburger icon so let's now go to the browser let's refresh it and let's make this a bit smaller all right now when we click it the value open is set to true and this changes the icon that you see here to a close icon alright so now we are almost there however we need to style this mobile navigation a bit and this is something which we will do in the css file so we will go to navbar.css all right so first of all let's remove this red background that we see here and then we want to style the links that we see here so what we can do is we can say inside our breakpoint here or inside our media query we can say dot navbar nav ul and this is the path to the unordered list and we can say display flex so we convert it to a flex container and then we can say flex direction column and then all the items inside the lists will be placed vertically as you see here so not horizontally but vertically and what we can then say is position absolute and what we can then do is because our nav bar has a height of 80 pixels so we can say we want to push this 80 pixels more to the bottom and if we refresh it and we click it then we see that it's placed exactly below this nav bar here all right and we want to place it all the way to the right so we say right zero and then we can give it a with off let's say 100 and then we refresh it and we see this so now we can give it a background color of 1 8 1 8 1 8 and if we now click it we see this all right and i think what also will be nice is this so we can say border top and then we want to give it a border of two pixels solid and as a color we will use this color here all right let's refresh it and now we see this now i think we can give it a little padding on the left so it will be pushed more to the right so what we can then do is dot net bar nev unordered list and then all the list items inside this unordered list we want to push that a bit more to the right so we can say padding left 15 let's refresh it and then we have something like this and i think what also is nice if we give the nav bar an opacity of one so if we now refresh it and we see this and i think this looks nice only when we maybe have to zoom it in a bit so i think when we hover over this that it doesn't look very nice here that we see this line at the bottom so what we can then do is we can say dot nav bar and then ace that hover and then we say border bottom none refresh it now we don't see any hover at all so what we can then do is give it a color i mean we don't see any hover effect at all so i think it will be nice if we give the text a color of purple-ish so if we refresh it and we hover over it then we have this and i think this looks pretty nice however we still have a problem because if we now click on on a link here then what we see is that it goes very nicely to the section however it should close the navigation so what we want is that when you click on a link that it should also close the navigation exactly like we have here when we click on it on the icon and that is something which we are going to fix now now we can fix this relatively easy so we first go to our mavlinx component and in here we type props so now this nav links component accepts some props or in other words we now specified that our nav links component is able to accept some additional parameters and then inside our mobile navigation we can do the following so let's make this a bit wider so inside our mobile navigation we can specify a function so we can say const close mobile menu so we can say this is a function from nothing that sets the value open to false so this value here will be set to false and what we can then do is we can pass some props or we can pass some arguments to the net links component here so first of all we can say is mobile it's true and then we can say close mobile menu yes and we give it this const here so we paste this in here all right then inside our netlinks component we can then specify an unclick event handler on all the list items so what we can do is that we can say on click equals and then in here we specify the function that should be executed when someone clicks on the list item so we can say when perhaps that is mobile is set to true then it should execute the close mobile menu so we place parenthesis behind this and yeah the same on click event handler should be placed inside all the list items alright so we have this now i can imagine this that this is still a bit fake so let me explain you how this works in the mobile navigation inside this component we specified this function that you see here now this const close mobile menu is basically a reference to this function so it isn't executed yet it is a reference so when we pass this close mobile menu reference to this component to this netlinks component the function isn't executed yet so when we go to the nav links then we see here the unclick event handler and this accepts a function and what this does is when the props that is mobile is set to true then it executes the function so in short this is a reference to the function but it isn't executed yet it is executed inside our nav links component but only when the props that is mobile is set to true so if we now go to the website and we refresh it and we open our mobile menu and for instance we click on the about me then we see that it goes to the about me section and the navigation menu or the hamburger menu is closed alright so i hope this makes sense now we still have a little bit of bonus material if you like if you don't like it then you can skip the video don't forget to like and subscribe of course that's a joke you can do whatever you like but we will apply some nice animations to this mavlinx component here and we will use frame emotion for this now if you haven't watched my previous videos then i highly encourage you to watch that one because there we explained frame emotion uh in a nutshell so we basically explained how it works and stuff like that and we won't repeat it in here and i will place a link to the videos in the description so yeah in order to use framer motion we need to import motion from framer motion from framer desk motion and then we can convert each list item to a motion element so yeah we can simply say convert the list item to a motion component so we place this in front of the opening tag and we have to do the same for the closing tags all right and then in here we will specify a object and we give it the name animate from and this will have a opacity of 0 and a y value of -40 and we will also specify an animate two object and we give that an opacity of one and a y value of zero and then because we have converted the list item to a motion element we can give it some props so we can give it a initial props and then we give it our animate from now i won't cover all the details then again you should watch my other videos but it isn't that difficult i think so hopefully you can follow it a bit then we give it the animate from object and when we convert the list item to a motion component we can give it animate props so here we can say we give the object animate two so what this basically does is this is the starting value so it should animate from an opacity of zero with a y value of minus forty now this y minus 40 means that it should place the element 40 pixels higher than its original position and then it should animate to an opacity of one end to the original position as we have specified in our css file and yeah this we will place inside all the list items so we can do this all right let's format it all right and if we now go to the browser and we refresh it then we see something like this but what we can do is that we can specify a delay so we can say transition and then we can give it a delay of let's say 0.05 and here for the second list item we give it an lay of 0.10 for the third zero point twenty and four the one next for the next one oh zero point thirty and for the last one 0.40 and if we now go to the browser and we refresh it and we click on it we see this nice effect so yeah when we don't see the mobile navigation and we refresh it we also see this effect and in my opinion this looks also nice i keep it this way but you can decide yourself if you like this animation or not alright so that was it for today's video we created a nice hamburger menu so when the screen reaches a width of 990 pixels or lower this hamburger menu pops in so yeah when we click on it it opens up and if we click on a link it closes or when we click on it and we click on the icon again it closes so yeah that's basically what we created in today's video i hope you like it and i see you in the next video

Channel: DEVAMS

Views: 7,163

Rating: 4.9269404 out of 5

Keywords: hamburger menu, React hamburger menu, React responsive menu, react navbar, navigation bar, NavBar CSS, Responsive Hamburger menu, Responsive navbar menu, responsive react navbar, react navbar hamburger, react hooks, reactjs tutorial, hamburger menu react, hamburger menu reactjs, react js for beginners, how to create a navbar, react navbar responsive, react navbar tutorial, responsive navbar tutorial, react navbar component, responsive navbar, hamburger menu tutorial, react

Id: Et5tDPoU03c

Length: 33min 3sec (1983 seconds)

Published: Mon Apr 05 2021