Responsive Navbar Tutorial In ReactJS

hey guys how's it going i'm back with another video and before we actually get into the video i want to show you guys the end product so this is what we're going to be building it's a navbar which basically is fully responsive so like when we get closer to here you can see everything starts shrinking and then it gets to a point where there's a button you can click on this button and like all the links appear here and it's basically like uh if you've worked with bootstrap before we're basically building the same thing but without using any libraries so it's fully like pure react and honestly i prefer to do it this way i don't like using libraries the only styling library i like to use is um like material wipe however only for icons and also maybe style components but we're not using any of those we're just using pure react with css and yeah that's basically it so let's go into the video okay guys so let's start the project from the beginning and you can see i have a simple like react application here it has literally nothing just an app.js which we have here our app component which currently just says like and subscribe which you guys should do if you want me to continue posting videos but yeah basically we just have this and also the app.css which is like nothing i just added two things on the app.tss which is basically i told the body to have zero margin and zero padding which is extremely important because it you need to do that or else we're gonna have kind of like weird stuff for the the sides and i also made the app component uh the basically the app div containing the whole screen so being like 100 of the width and 100 of the height so that we can play around with a nice canvas so like a nice uh position you know so what we need to do is actually let's create a component folder i'm going to basically create the the navbar component so i'm going to come here and say navbore.js and basically i accidentally wrote it wrong so let me remove the the comma here navbor.js so i can just say r rfce and for me this is a snippet so it basically just imports everything into my application as you can see right here and inside of here we can start working with our whole navbar so what do i actually want to do in this network well first of all i want to have a div which has a class name of navwar so that's something important then i want to inside of here divide my screen into two parts right so the left side and the right side and obviously it won't look perfect like it won't look clear at the moment but what i want to do is actually i want to have access to the app.css file in the navbar so we have we can basically implement css inside of here as well so i do that by basically saying import and i as you can see right here are nav boards inside of the components folder so i can just say two dots to get out of the components folder and now we are over here and we can just say app.css and that's fine so now we have access to the css file in this in this component over here and let's come here to our app.css and i basically will just simply have try to access my navbar and what i want to do is i basically just want to first of all give it a background color and i already chose um like i'm gonna give the background color that i used in the example that i just showed you guys at the beginning of the video basically to put that color you can just write 0 2 1 e e39 so that's basically the color that i was using and obviously no color will be shown right now because then f board div is currently like it doesn't have a width and a height so let's make it have a width of 100 and also a height of like 80 or 80 pixels sorry so 80 pixels and oh also we're not seeing it because we actually haven't imported anything to our app component so we can just come here and say navbar and we're calling the navbar component but we need to import navbar so navbar from dot slash component slash navbar now you can see that our nav board shoots should start appearing yeah it appears right here because we're now calling the navbar component inside of the app.js and in our navbar component we have a div called navbar which we're setting all these different things in it to be have about this background color and this height so what else do you want to have well on my whole application on my whole navbar i just want to change the font to how to be a aerial so i'm going to say yeah this right here so ariel helvetica and sen serif that's fine so i also want to make it a display flex so why do i want to make it a display fax because basically on like normal nav boards usually there's links on the side maybe a logo and there's like kind of a search bar over here but the idea is you always want to have like usually people have stuffs on the left side and stuff on the right side so how are we going to do that responsively so basically we're going to use flex and that will allow us to come here to our navbar.js and inside of here we're going to create two divs and this is something i always like to do if you've seen like previous videos probably you've seen me doing this before so i create a div called left side and i hate when this happens so i create a diff called left side and i also created one called right side and literally since we have flex we can just say over here we can access the left side and the right side by saying nav bar left side and give it a flex of 50 and now the left side will have a size of 50 percent of the screen and we can do the same thing for the right side so that it covers 50 percent of the screen if you can't see it currently it's because they they literally don't have anything like the let's add the background color so you guys can see for example the left side let's make it red and let's make the right side equal to blue so actually green let's make it green so when i save it you can see that it is clearly responsively divided into two sides right so that's perfect and we obviously don't want the background color it was only to demonstrate it to you guys and what we actually want to put inside of here is basically we want to put on the left side all the different links we want to have and on the right side the search bar so to put the links we want to first of all create the links so let's come over here sometimes what i like to do is since if i have a bunch of links i create an array of links and i map through each element but i don't want to complicate stuff so what i want to do is i'll just come here and say a which is the tag for links and i'll just put the name of the link so let's create a home link let's create a one form one for something like feedback about us i'll create four actually yeah so let me come here say something like feedback i don't remember the ones that i actually put in the beginning of the video but i'm gonna say feedback about us and contact something like that so contact okay and for each link we need to give an href which will be the path so home will be slash home and you can see that after we do that it kind of starts a gaining shape uh of a like of a link so we can basically just add an href for each one of them and we can change it to like slash feedback so if you're using react water dom which i won't show you guys in this video but basically if you're using some way to create routes this is basically the idea right this is just the links so about us and contact okay okay so we have four four links as you can see right here and obviously they look horrible right now but we're gonna fix that so how do we actually fix that well what i'm thinking is maybe we want to uh create a div over here to wrap through all of them by saying like div and i'll come here and say div and then i'll basically call this div links so links right here and now on my net on my app.css i can basically come inside of here and on my left side like over here i can just say dot navbor dot left side links and i want to basically just first of all set a max height of 80 pixels because i want them like the max height of this to be 80 pixels since it's the size of the the navbar and also something that is extremely important to do is we got to change all the like the looks of it right so what i do is i just come here and i say i want to access all the tag the a tags so all the links inside of it and i just want to first of all remove the text decoration so text decoration none this will basically remove this kind of aspect pretty like the underline then i want to make the color equal to white so white the font family i want to make it 25 pixels because that's like that's pretty big right no it's not font family actually it's font size i don't know why i said it font family but font size will be basically this and obviously it looks ugly right now but that is because we need to separate them as well as we can come here and we can just say margin left something like 15 pixels and it will kind of like separate them as you can see right here but you might be asking well why are they like kind of this way because we we're actually like it's not responsive at the moment so i'm going to increase the size a bit of the screen so you guys can see it's currently over here we want to put them right at the center right so how do we do that well we're going to come here to the left side over here and i want to give it a display flex and i want to justify content center but the thing is as you can see it's only just to find stuff to the center i want to give it an align item center and it will now put everything to the center however we actually don't want to justify stuff to the center why because when we open this you can see that the links are like right at the center of like it's exactly at the center we want to kind of keep them right at the side right so how do we do that well actually i want to say justify content left and you can see it's pushed to the left so it's always the same right so that's perfect that's exactly what we want and maybe if we want we can add some padding but let's not do that for now you can see our like our links are perfectly fitting and now let's start working with our search board so how do we actually work with the search bar well let's come here to our navbar.js and inside of here on the right side we can basically just come and say input so input of type text and inside of here like over here you can have a button so it's going to be an input and a button and for now let's just say search but i'm going to use material y icons on this video to basically add a search icon over here but you can see this is the basic idea right and i also want to add a placeholder for the search because i like doing that so placeholder equals search and you can see that now there's a little message over here saying search so that's perfect uh we created everything for like the jsx part of the project now let's continue working on our app.css because it's the the styling of the project so since we already worked with the left side let's start working with the right side we're obviously going to be making more changes uh when we start working with the responsiveness of the project but let's focus right now on the right side so the first thing we want to do is obviously give it a display flex like we did with the left side and we want to align items uh to the center just like we did with the the left side so that the search bar is right at the center but differently from the left side we want to keep the search bar right over here so we instead of justifying stuff to the left we want to justify stuff to the flex end which basically means it's going to be right at the end over here oh accidentally saved the wrong place so um let me go to my project yeah let me save it you can see it's right at the at right side however obviously it looks horrible because it's stuck right at the edge so we want to add some padding some padding right so padding right and let's make it 25 pixels let's see how that looks you can see it's kind of pushed that's okay yeah that's okay so you can see it's kind of pushed but that's okay so what we do what do we want to do now well we want to basically just come and access the right side and grab an input and the input will be basically the search this search bar right here we want to increase its size so i'm thinking width might be like 220 pixels something like that i don't remember exactly what i put but basically height will be something like 30 pixels and also we might want to have no border and by the way i'm just going to push this a bit so you guys can see the changes occurring immediately so let's remove the border like it's increased in size remove the border but we want to add kind of like a border radius to it so border radius of like four pixels so it looks a little bit better and what else should we do well i'm going to increase the size inside of it so font size is going to be something like 20 pixels as you can see it increased but because we did that let's give it a padding left of like 15 pixels so this search thing over here it's kind of like pushed as you can see and let's finally just turn the color of the text equal to black and that should be fine right so basically this is all we're gonna do with our input but we obviously need to change the button as well because it currently looks ugly so let's do that let's come over here and let's just say right side dot button and the button will basically be a bit different the button will have a height of like something like 30 pixels 30 pixels um actually that looks a little bit smaller so i'm gonna make it 20 pixels 32 pixels yeah that looks okay so 32 pixels and then we want to make a width of like 70 pixels and maybe a font size has increased as well so let me actually do it like this 70 pixels and now it's bigger but let's increase the font size so font size let's make it equal to something like 16 pixels okay so it looks a little bit better now and you can see that it's currently kind of responsive not but it's not responsive when we do this and we're going to fix that totally we're going to replace this to like a button which will basically open up the links over here so that's the important part of it and also i just want to make a final change whenever i hover a button it like no matter where in the application i always want to basically change the cursor to pointer so what i like to do is i just come here at the top and i say every single button in the application i want to give it so that when you hover it you change the cursor to pointer and now if i come here and i just hover it you can see that cursor is now a pointer which is great right because it just looks better in my opinion so now let's start working with the functionality of like basically making whenever we decrease this a bit it will start to decrease the size of the link right so how do we actually do that well we use media queries and i i think you guys like um if you're what like most people already know about media queries but it is a great like it's the way to determine and do something with your css if your screen is at a certain like width and height so basically if i say for example at media only screen so screen and max width so width is equal to like something like 850 pixels i remember it being 850 pixels that's why i'm saying it we can basically do this and what does that mean is basically we are only going to render stuff so whatever we put inside of here is only going to oh accidentally put an l here so it's only going to occur if the width is less than 850. so whatever whenever we shrink shrink our size over here for for the width for the the screen whatever css we put inside of here will be taken into account so what i want to do is actually i want to decrease just the size of this links so how do i do that well i come here to links so network links a i grab that i put that inside of here and basically if the width is equal to 150 i want to decrease the the font size to like 20 pixels it was previously 25 so you can see that when i'm not currently at 850 but if i reach it a bit you can see the size decreases so this like the font size decreases to look a little bit better but we're going to add another one when it reaches something like 750 to decrease a little bit more so let's just copy this and let's add a 750 max media max width and let's decrease this to like 15 pixels so let's see if i get to 750 yeah now it looks better as you can see right right new right now and the important thing is when we reach this we no longer want to just decrease the size of the links what we want to do is we want to replace this completely with a button that when we click on it it will open up a model or whatever you want to call it a div down here containing the links so now is where we actually work with that so how do we actually do that well it's very simple actually especially when you're working with react what i like to do is i like to come here and i like to import the use state hook so use state and inside of here i can just say const and i'm going to create a state which is going to represent whether or not we want to show the the the like the toggle or not so this is it's going to basically ask us if we want to show this like the the div appearing here with the links or not so i'm going to call it show links and set show links and i'm going to decrease this a bit because now we don't even need to have like a huge a browser browser size so i'm just going to say use state and it's going to be a boolean which is starting to be false so whenever you render application obviously you don't want to show the the links automatically you only want to show them when you click on a button and that's something that is actually important and we're going to do that before we actually start working with the states basically we want it so that whenever you reach this size this links disappear and a button appears here so how do you do that well it's even more simpler you can just come here and just add a button over here which is going to be something like open we're going to add like you can see it's appearing over here but we obviously don't want it to appear uh if we're like this we only want it to appear if we reach a certain width right so what we do is basically we come here to the app.css and when it reaches something like i'm going to say 650 but i don't know if that's exactly what we want but 650 if the width becomes less than 650 we want the button to appear however if we if it isn't then we don't want it to appear so what do i mean by that well let's come here to left sides i want to grab the left side uh dot links button actually it's not dot links it's just left side dot link no left side dot button so i want to access the button in the left side and i want to turn it equal to display display none okay display not so you can see the button currently doesn't exist and it will never exist unless we turn it on so what do i mean by that well i'm going to copy this and here at the bottom if the screen becomes less than 650 we want to make it display flex so that it literally was non like the display was none but it becomes less than then 650 you can see the button appears right and that's great because it's exactly what we want however we also want to not only make the button appear but we also want to make the links disappear so what do we do with that basically we can just come here and say uh when it's less than 650 we want links not a so links to be display none so you can see that if we reach 650 the links will disappear and the button will be the only thing in the screen right so that's great for us and yeah that's perfect right so now that we have that done we want to basically be able to click on the button and change uh basically make it appear down here however let's also make the button look a little bit better and i'm just going to make it by basically coming here and saying margin left um i don't know 20 pixels and it's going to like oh i forgot to add the yeah and it's going to be pushed a bit to the side um you can see right here the button now is over here we're obviously going to make it look better when we add the materia material icon but that's okay for now and now let's come here to the navbar and basically remember that this state right here represents whether or not we want to make the div showing the link appear or not so how do we do how do we actually ask that well we need to have the we're going to come here to the links and we're going to add an id to the links basically this id will be called hidden and basically when the id is equal to hidden when there is an id in this div called hidden we want to make it so that the div appears just like you saw in the beginning of the video and the links are all like perfectly aligned however when the id it there's no id hidden then we don't want to show that and we can ask that but basically instead of saying directly id equals to hidden we're going to ask if show links is equal to true so if it is equal to true then we want to set the id equal to hidden if not we just want to set it equal to an empty id and why is this important well because if we come here to our app.css we can just come to the top over here and we can now we can now access the links which has an idea of hidden and that is great because that means we can basically set a new like a different style for the links that will change whenever we click on the button so let's do that let's actually come here to left side links and i'm just going to copy this right here i'm going to put it down here we're going to remove button i'm just going to say left side um hidden so i'm accessing the hitting right and for like initially we want to make it equal to display flex and that's literally it for the moment but the important thing is we want to basically set it so that whenever we reach a point down here when it's like really small when we click on this it should appear so what i want to do is actually want to set it equal to true initially so we can see it so we can kind of see the changes we're making and i want to come right here at the bottom and the only time that this div will appear is actually when the max width is equal to 650 so inside of here i can just come and say navbar dot left side and hashtag hidden so we're accessing the hidden version of this div and inside of here we're going to make some drastic changes to how this div the left side div exists for example we want to make it a position absolute and then we want to basically give it a left to be 0 pixels and a top to be like we want to basically start this div down here so we know that the the navbar has a height of 80 pixels so we can just say we want the top to be 80 pixels and then after we do that we can just set a height i usually set this equal to auto but just for demonstration purposes i'll make it 230 pixels and the width will obviously be a hundred percent and i want to set the background color equal to exactly the same background color we had before which is this one right here and you can see right now if i refresh the page the the div appears right if i make this equal to false then the div doesn't appear because there is if it's false then there isn't an id called hidden and that's the basic idea right but obviously the div isn't perfect yet for example we want the links to be stacked up on top of each other so how do we actually do that so we come here and say display flex and we give it a flex direction which basically means we can set it equal to column which will make them stack on top of each other and then we basically can just say something like a line item center and they will be pushed to the center and yeah i think that's like basically it for this div however let's access the the links inside of this div so that we can make it we can make them separate from each other because they're currently like really close to each other so you can just come here and say um something like margin at margin like 20 pixels and let me see i think it's too big the margin right so let me make it 10 pixels um the margin currently is too big so let's how how would we do that well actually the the height is not being set for some reason let me give a max height of 230 pixels okay yeah so i set a max height at the top here to be equal to something like um i forgot it's at the top here if you want yeah i set it equal to 80 pixels but that was before when we only had this uh nav bar so now that we want to increase it we can basically set it equal to 230 and you can see that now this is perfectly fitting it's now like they have a margin between them and that's fine we also want to increase the font size i want to make it 25 pixels and it looks a little bit better as you can see right here and obviously this won't appear if we increase the size it only appears if we decrease however we want to change it because we want it so that whenever we click on the button this will appear and whenever we don't click on the button like whenever we click the button again it will disappear currently it's just showing so i'm going to set this equal to false and in order to do that effect i'm going to come here to the button i'm going to give it an on click event and inside of here i want to basically just pass an empty function an anonymous function and i just want to say set show links equal to not show links what does that mean well we want to set the value for show links equal to the opposite of whatever it was so show link starts as false if i click on the button and it is like over here if i click on the button it will say true because not false is equal to true but now it's true so if i click on the button again it is false you get what i mean right so we now have this effect and remember that this only appears if we get close to here so that's actually like mostly what we want to do there isn't much we can change now the only changes we want to add is basically add the material ui aspect to it so we want to add the links right so i have two links that i actually have written down to icon sorry that we can use in our project and i'm going to install material ui so to install material why you want to first yarn add material so actually add material ui core you want to first do this and then you want to add also material ui icons so these two libraries are the ones you want to install so after we you do that because i already did it and also if you're using npm you just change yarn add to npm install after we do that we can come here to our basically our our main application here and just copy water right here because i have it read down these are two icons that serve perfectly for what we want so i'm just going to say from ads material ui slash icons and the other one is basically a search bar a search icon so i'm gonna click copy and say search icon and now we have these two icons which we can use uh to basically correspond to the buttons for example with this open button over here i want to use the instead of saying open i want to use the reorder icon that occurs that exists in material ui so reorder icon slash okay so now if we do that you can see that if we refresh it um did it break it's compiling for some reason um okay it's compiling i'm gonna basically just stop the server and run it again so um yarn start start it's gonna start my application again my react application and while i'm doing that i'm also going to reply replace the search over here the search button to the search icon okay okay that's perfect so for some reason yeah it started the development servers the the server let's take a look to see if it's looking good i don't know why it's while my computer is super slow i don't know why that's happening but i'm gonna load my react and i'll come back in a second okay guys so i'm back and i actually figured out why why broke we actually need to change this to icons slash reorder reorder and this will work now we can also add a slash search here at the bottom so slash search and if i save this you'll see it will start compiling our application again and okay wait okay so it's going to comply application again sorry that my computer is super slow but i'm going to come back after it finishes compiling okay so i'm back here and as you can see if i shrink this a bit you can see that now we have two beautiful icons we have the search icon and we have the the reorder icon and if i click on this it opens up if we click on this it doesn't so it's perfect it's already working this is the final version basically you can see it's fully responsive you i would recommend like if you want to like just like show you guys this right here only occurs if the screen is this size so to fix that you know what i'm gonna do i'm just gonna come here before any of you guys say anything about this i'm just gonna come here and increase this to like 780 um did that fix it no let's make this 800 800. let's see if that fixes it it doesn't let me make this 8 30. okay none of them were fixing it uh maybe just let me see the size of the screen of this so the size currently is at 8.50 oh okay okay okay so actually i need to increase this over here to like 880 and yeah now it's fixed so you can see currently you can just like it's fully responsive uh you can click on this button it will open up and close it's beautiful and yeah this is this is the basic idea so i really hope you guys enjoyed this video if you have any questions let me like let me know in the description uh comment what you want to see next leave a like because i'm posting every single day and i i would really appreciate it will really help grow the channel and subscribe if you want to see more because again i'm posting every single day so i'd really appreciate if you did that so really hope you guys enjoyed this video and i see you guys next time you

Channel: PedroTech

Views: 19,874

Rating: 4.9548874 out of 5

Keywords: computer science, crud, css, databases, javascript, learn reactjs, mysql, nodejs, programming, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, responsive navbar, navbar, responsive navbar tutorial, navbar tutorial react, navbar tutorial, responsive navbar react, react navbar, react navbar tutorial, react navbar responsive

Id: nLTMn19vupw

Length: 32min 2sec (1922 seconds)

Published: Fri Nov 20 2020