React Navbar Dropdown Menu Responsive Tutorial - Beginner React JS Project

yo yo what is up everybody so today i'm gonna show you how i created this react nav bar drop down menu so we're going to be using hooks so react hooks this time and also we're going to be implementing react router as well so let me just show you what we're going to be creating and then we can get in and start coding so first off the bat you can see here it's hover over home and then you can see this is the drop down and we got the hover action over here and also whenever i do click i added these visuals so it essentially is another component and it's changing the page here and then for instance here's products switches the page there contact us and then also in the drop down we'll hover down let's go to like marketing for instance click it updates changes and that's another component there and then also here component changes there and then also the logo too when you click on this it goes back to the home page and then let's shrink it down i made a responsive and pretty much we go all the way over here click on the menu and it's very similar to the previous one i made but this in terms of organization for code for this is much better and also we can see here same concept whenever i click on anything also let me just show you really quick it goes in out and then you have the services so let's just click on there it closes the menu and then it showcases the page and then again i'll do it for the other ones right here same concept here as well as that and then also if i have it opened up they have the contact or you have to contact the logo clicks it it closes the mobile menu as well and then i go all the way back here and then also when i click on the signup button you guessed it it sends you to another page as well and go ahead and like and subscribe if you have not already and without further ado let's hop into our code editors and let me show you how i created this alright so let's get started so i have my terminal open up so if you created react project before then you obviously know the drill so all of my projects are within the desktop and then i go into the project so just go wherever you're creating your project cd into there so i'm just going to go cd desktop and then i'm going to go into my projects so cd projects so it's going to be different on your computer so if you do everything on the master then obviously you can do it there but uh now that i'm in the actual place where i want to create this react app i'm going to go ahead and type in npx and then create dash react dash app and then let's name it let's see react drop down nav bar and let's just put i'm going to put youtube so that i know that this is for the youtube tutorial and then i'm going to go ahead and press enter so once this gets finished downloading might take you a couple seconds might take a couple minutes depending on your computer and then once it's done we will get started alright so now it has completed so now i'm gonna go in and type in cd and then we're gonna go type in the name that we named this file so react that's drop down dash nav bar dash yt then i'm gonna press enter and i have yarn so i'm gonna type yarn start but i guess since a lot of people start with npm let me just go ahead and type in mpm star because i know a lot of people might not have yarn and i don't want to confuse you but if you have yarn obviously you would type in whatever line it says here so i'm just going to say npm space start and then press enter and it pretty much does the exact same thing so right now this is the first time i've had this come up in a tutorial and if you've had this error screen pop up it's a simple fix so all we need to do now is open up our code editor and then we have to create this file so if you do have the setting up you can just go ahead and type in code space dots if you don't have this then you can um quick google search will show you how to install this and have it set up but i already have the settings on here so i can just type in code dot and that opens up vs code so now i'm gonna go over here and then mix it up this back one and then pretty much we have the and pretty much we have our code editor open here now if you having trouble with the terminal you can just go to your folder file and then pretty much open up vs code or whatever code that you're using manually and then just drag in your folder over there too but let's go here to src and actually before we do that we've seen this error it's a simple fix all i need to do is go to the uh left column over here right click and create a new file and then just type and name it dot env and then i need to go back to the terminal where it shows the error and i have this right here skip underscore preflight underscore check equals true and then i'm going to copy this paste this into this file and save it and then now if i were to go back to the terminal and just do mpm start it should work this time all right just like magic you see that it's currently working now and uh if everyone's on the same page you already know the drill you know what this looks like so now let's actually get started to the fun part and start creating the navbar so let's go over to the src and i'm going to get rid of a couple files really quick so first one is the app.task.js right click that one delete and then let's see index.css we're not going to need this so delete this here uh logo don't need the logo delete that service worker and then let me hold shift and click on the second one set up test two right click this and delete that as well move to trash so now we're left with three files here we go to index.js we can get rid of all of this on the bottom go into the rackdom.render get ready let's get rid of strict mode and then go here get rid of this i'm going to save it and i have prettier and some settings installed so that it auto adjusts when i save it and there's a few videos out there showing how to do that in case you don't have it set up but i'll leave that for another video because it adds extra time to the tutorial i don't want to spend too much time on all right now let's go ahead and let's see if we get rid of the index.css as well save this so right now this is what it looks like and then let's go to app.js and we got rid of the logo so let's get rid of this right here and let's see let's just get just delete everything inside of this app and then let's just put for instance just to test it let's just put a little fragments and let's go ahead and just type in say yo press command s to save this and looks like we are good to go all right so now we go app.css and we can get rid of all of this so command a and then command s and now let's go ahead and let's create our components all right so first thing let's go over to src right click this go to new folder and let's type in components and then let's create inside of the components all of our components alright so the first thing we're going to need is the nav bar so let's right click hit new file and let's do navbar dot js and then i'm going to want a css file for this so let's go ahead and click on the components folder right click click on new file again let's do navbar.css and then let's go ahead and create the drop down component so right click here click on new file and let's do d so capital d drop down dot j s and then let's right click it again new file and let's do drop down dot css and then we're gonna need button so let's create again right click it new file i'm going to create the button now button.js and then right click again new file and let's do button.css css and then let's go ahead and create a folder inside of components so it's going to be our pages so let's right click this and go to new folder and let's just call this pages all right so let's actually start coding some stuff up really quick and then we'll add some more pages after but uh first thing let's actually go to the navbar.js and then let's go ahead and start with the first line so there's a cool extension that you can actually download it's called react snippets so go over here and just type in react snippets and let's see which one that i have yeah so this one is one i had right here and uh it's right there i think there's a few others i'm not sure which ones but that's the one i have one right now currently installed and the cool thing is with it is so let me get rid of this really quick so let's go back here where's the x on the um oh here it is all right all right so let's go now back to the code editor now so when i can go instead of typing import react from react i can just type in i m r and then press tab and it just automatically fills up for me saves you so much more time and then let's go ahead and add a comma and then let's add use state so put curly braces and then we'll add use state here and let me yeah let me make my uh screen a little bigger and then next what we're gonna do is we're gonna import the button so let's type in imports curly braces button and we're gonna import this from quotes dot slash button and then we're going to import let's see import board.css so imports course dot slash and then last thing we'll have is imports drop down from dot slash drop down and one more thing i want to add is actually we need to import react router dom we need to import the link so we're going to have to install that in the terminal as well so let's go ahead and just add it up here first so import link from react router dom all right so before we get started let's go ahead and install that first so on your keyboard on windows or mac i believe would be command j to open up or if you have control and then the back tick sign next to the one this also opens up the terminal here as well and then what we can go ahead and do is type in npm install and then space react dash router dash dom and then go ahead and press enter alright so that took like 10 years to install depending on your computer yours might be quicker but that took quite a while for me but once it is done installing you will pretty much be able to start coding up our navbar so once yours is done so i'm assuming you have to pause the video might take a while so i'm gonna go ahead and actually close this out and then i'm gonna go ahead and type in function i'm gonna create our navbar component here so capital n nav bar and then parentheses curly braces and then always going to start off with the return and then the parentheses again and now within these parentheses let's go ahead and start off with a fragment so let's go ahead and it's basically a div without the word div inside of it so let's just go ahead and let's do nav and then class name set that equal to nav bar and then underneath this this is we're gonna start doing the linking and all the uh the fun stuff so that's why we imported the link but let me just go ahead and add it first so you can have some sort of visual so let's go ahead and do link it's a capital l and for link instead of using uh the href with the a tag it's pretty much the same concept except you say two and they say equal to quotes the path that you're going to and then here i'm going to have class name equal to navbar dash logo and let's go ahead and close this out here and then automatically it generates the closing link tag there and then let's just type in i put epic for the um this is the logo name you can replace with actual logo so if i go over here you can see nothing shows up yet so we can now go to app.js and inside of here instead of it saying the um h1 let's try to go ahead and just type in that bar and then let's go to the top and let me import let's see nav bar from quotes dot slash components folder and then we're going into the nav bar for file so save that there and right now what's going to say is we did not default export navbar so let's go back to navbar and below it let's just go export defaults and let's say nav bar save this here and right now it's saying we don't have router so that's a good thing because we need to have the router around the nav bar and then we're going to have our routes within this so that's because we have link here if i were to just make this like an a tag then you wouldn't even notice difference so like for instance if i just say a and then href you can see that we have epic showing up here but now since we're using react router dom i'm going to command c this and bring it back to what we have here now it's linked to so react does not like it if you don't wrap it around with the router so what i'm going to do is go actually let's get rid of these fragments here and instead of the fragment i'm just going to put router and then hit enter and let me delete this bottom one and then let's put nav bar command exit and then paste it between here and then let's see close up the spacing and i need to import router at the top because right now it's saying it's not defined so we're going to say imports and i'm going to say curly braces i'm going to use browser router so br ow ser router as router so essentially it would normally be browser router but i'm saying it saying it as router so that i can name it router instead of typing in browse router so that's why i have that here and then let's go ahead and let's leave it there for now because if i put the other one's going to run error but let's see from and then let's go and let me close out the left column really quick so you can see better react router dom save this and now you can see everything works nice and perfect here so eventually we're going to add the switch and route as well but for now let's just show you just get started here let's go back to the navbar now and then within let's see underneath this we do have fun awesome so in case you guys don't let me skip all that little details first and then we do that at the end because that stuff's like little simple stuff that's not really related but underneath the link tag now so let's go ahead and close this out let's create a div and then basically this is going to be our menu our mobile menu hamburger menu so let's say div with the class name equal to menu dash icon and then let's go ahead and close this and then underneath the div we're going to say i tag i'm going to say class name i'm going to set equal to state which well let's actually go ahead and create that above so you can actually see what's going on first so since we import a use state we got to have some state in here so let's go and underneath there i'm going to say const and i have the brackets right there and say click comma and then you have to say set click so essentially this is going to change or update the states and i'm going to set this equal to use state and i want the initial value to be false so meaning it's currently the hamburger the bars and then once i clicked it i wanted to switch to true so what's gonna happen here is we're gonna say const and i have this function called the handle click and then i'm going to set it equal to arrow function i'm going to say it's equal set click and then pretty much what happens here is i want what happens i want to set the state to be the opposite of what it is so essentially it's like a toggle so we click back and forth i'll go from the hamburger menu to the x back and forth so i'm just going to say exclamation mark click and then let's go down here let me go underneath this and then let's say click so this is the first thing we saw right here and then inside we're going to say the this is a shorthand of like if else statement so basically it's going to say if click is true then we're going to put the icon fas space fa times and also colon if it's not true we're going to say fas space fa bars and then this is self closing so slash brace like this so let me make sure you can see this so it looks like that's and then within this div right here we're going to put the on click so on click and we're going to set that equal to the function we created up here handle click and this is how we're going to be able to change the state so handle click right there and then let's go ahead and save this now we won't be able to see what's going on right now so let's actually go to font awesome and get the cdn so that we can actually see what's happening so if you're familiar with font awesome awesome then you already know what to do but essentially go ahead and go to funausting.com create a free account and then once you're logged in go to your profile click on this and then go down to the option that says fun awesome cdn and then it leads you to this page so when you get here you'll scroll down and all you need to do is copy the cdn here so i copied mine and let me close this out and then let me open up my tab go to public and then go to index.html and then right under here i guess line about 12 13. i'm gonna copy that in here and i'm gonna go ahead hit save and then while we're let's see if i can see the line right now so now if you see this see how the actual let's zoom in really quick so what we just created here this code we're basically toggling the icon so this is the the two icons we have here and whenever we click it the on click handle click event is setting the states so site click is setting it to the opposite so it's going from false to true false to true vice versa you get the point so that's how we got the little effect there and then while we're adding let's go ahead and import the google fonts too just so that we don't have to go back to this so i'll go ahead and just google google fonts pt sans and then simply is the first thing right here or just go to google fonts and search this up and then here we have pt sans and i believe i had bold so just go to bold select this style go to embed and let's just copy this link right there command see this and let's go to index.html let's just do this right under the font awesome cdn we just added paste that in there and then let's go ahead and go to let's put this in the app.css go to font family and then go ahead and type in shift 8 so we're going to select everything and let's just go ahead and do the default uh stuff you see so border box and let's say margin 0 padding zero and then go ahead and copy this family right here pt sans save this and then let's make sure that we have everything imported so i go back we have actually let's import this let me see if i put this in the nav bar or the app actually so we just go back to the app and it works fine okay we're good so let me just go ahead and accept this now let's bring this back here all right so let's go back to the navbar components all right so where we're at we currently have is the icon now it's toggling so let's go outside of this menu icon div here press enter and then let's create our first ul so let's go ul so ul class name and this is going to be pretty similar to the uh when we just saw for the menu item let me say equals to and i'm gonna say click then question mark so if it's clicked we're gonna have nav menu class space active show else we're gonna have nav dash menu show and then it's gonna go and close this with make sure it's the double um it's not a self closing it's an actual ul closing tag and this is essentially whenever you click on this tab here this is going to drag out the menu so you can see it so we'll add the css eventually you'll be able to see what's going on but within here let's create our first nav items let's say li and then class name equal to let's just say nav dash item and then within li so press enter we're gonna have the link so i'm gonna go ahead and actually let's just type it in once and then i'll copy and paste it afterwards so let's go link and then two equals slash so this is essentially the home and i say class name equal to nav dash links and then on click so this is going to be another function we're going to create eventually but let's go ahead and just create it now it's going to be i just call this one close mobile menu and then closing tag press enter let's spread this out a little more as you can see and then within here i'm just going to say home so if i save this right now what's going to happen is gonna say close mode menu is not defined so let's actually go back up here and what i want to do is actually let's see let's put uh let's go right under the handle click and let's just say const close mobile menu i'm gonna set that equal to arrow function so basically the same exact thing except this time i'm gonna say set click to false and it's essentially whenever we're on mobile you'll see what happens when you click that the memory will disappear and then it'll lead you to the actual path that we're supposed to be on so now we got it right here everything looking good right so now let's go underneath now let's see underneath this li press enter and then here's the fun part so what we're going to do is actually let's go ahead and copy these links because they're almost identical the difference is these have much more so this one's a drop down section so let's go ahead and copy the li right there so from li down to this li command c copy this go underneath this and then we'll go ahead and hit paste so right now we should have the class name and then for the link we're going to change this to services and then let's go ahead and keep the class name and then on click everything's the same there the only difference is the home we're going to change that to services and then i want to include so space the icon let's say class name equal to f a s f a dash c a r e t dash down and then self closing tag so slash close at so then now we save this you can see we have these services drop down right here with the little thing right there and then what we want to do two is actually let's go ahead and we'll add that later because right now it's not gonna make any sense actually so let me just keep going so now here's where the drop down comes in so now underneath this link we're going to go and create the drop down so we're going with the curly braces now and this is going to say drop down which we're going to create in the state in just a second so what we're going to say is if the drop down is true then we're pretty much this is a shortcut essentially so you put two and symbols we're basically going to showcase drop down component and then if i go let me see if it works i don't know maybe my um see if it imported it yeah so import this cool trick sometimes it works sometimes it doesn't but um basically like right when you're about to finish typing you can press enter and then it'll import it at the top automatically for you so you don't have to type it in or if you if it's not working for you i believe we typed it in earlier so it should be fine but um yeah i'm not sure when i messed up my settings for that but basically we're gonna have this here and then what's gonna say now is drop down is not defined because we have this here so we're going to need to do is create that state so let's go back to the top right of below the function nav bar underneath the click and sec click and we're going to say the same concepts of cons brackets i'm going to say drop down and then we're going to say function set drop down so this is going to change the state you want to set the eagle to use state and i want the initial value to be false so i save that now everything's looking good and then what happens now because we don't have any css or anything and the drop down is not created then you won't be able to see anything yet so let's go ahead and complete the rest of this stuff so let's go and just go back to this top li again copy this again and then go below this line now paste this here and then let's check what we need to update so slash contact us let's see nav links is fine on clicks all we need to do here is change it to contact us and then let's see go underneath this li now again and then just copy and paste it again and this is going to say sign up so let's change the class name well not the class name i bet the link the path to so let's say sign dash up and this class is going to be nav dash links dash mobile and it's just the way i did it feel free to refactor the code or let me know alternatives in terms of showing like the button and then here i'm going to say sign just say sign up and then underneath this ul we're going to have the button component so right underneath ul we'll have the button slash there save this and right now what's going to happen is that let's see looks like button yeah button is currently not imported actually yeah i haven't exported the button so let's go ahead and create the button first yeah it looks like buttons what is complaining about so let's go and command b and let's go to button.js this one's fairly quick not too crazy and then let's just go ahead and imports dot slash button.css all right let's just go up here and type in imports curly braces link i'm going to say from react router dash dom and then let's gonna say exports function button and then inside of curly braces are going to return this and we're going to say link and then 2 equals sign dash up so this is the path that i want the button to go to whenever i click on it and then we're just going to add the button class name equals btn and then just say sign up so now let's save this and then let's go over here and read what this says react must be in the scope when using jsx yeah it could be the scope i saw one thing super simple mistake i forgot was the most important thing which was to import react from react all right so save this now and boom now we have it so this is essentially we have two buttons one's going to show on the nav bar and then ones when it's mobile is going to show up as well because it's really hard when i was doing it to show them like as side by side so now let's go ahead and let's let's just edit the button css since we're here already it's fairly short and easy so just do colon roots curly braces say dash dash primary colon i say hashtag let's do one eight eight eights ff and then as you target the button class let's just do padding 8 pixels by 20 pixels border dash radius going to be 4 pixels outline will be none borders going to be none let's do font size 18 pixels color be hashtag fff and i'm kind of going a little fast on css just because um it's not really react focused but in case you need i'm going too fast just pause it and then you can copy along so let's say background color var parentheses dash dash primary so now you see the button is quite large and let's do dot btn and then colon hover and then let's just say padding to be six pigs by 18 pixels transition let's do all 0.3s ease dash outs and then let's do background dash color transparents color will be hashtag fff border radius for pixels border is 2 pixels solid var dash dash primary and then last one is yeah we're pretty much done there should be good check it yeah we go right there all right so awesome all right so we're pretty much done with the css and button so we'll go here now let's actually go to uh let's do drop down now let's go to drop down all right for the drop down we might actually we could actually copy and paste a bunch of stuff let's go back to nav bar and just copy everything from the top of the heading and go to dropdown.js copy this we do not need the uh navbar css we need let's see use states let's change import button and let's put menu items from menu item and we're going to actually create this as another file essentially just keeps all of the drop down uh menu items inside of that link's fine here and then we don't need drop down so let's just change this to imports uh see quotes dot slash drop down dot css let's save this and then let's go and create the uh let's see where is it at let's create the menu items.js too because i know it's going to yell at me so i actually go let's create the function first let's say function drop down parenthesis curly braces let's return this and then let's just put um fragments for right now and then let's just say export defaults drop down save and now it's going to say menu items is not found so we need to create this go to components right click this and go to new file and then let's go ahead and type in menu items with a capital i dot js and then this is essentially we're just say exports cons menu items i'm going to set that equal to an array and i'm going to have object values in here so curly braces enter i'm going to say title colon and then this is going to be your uh drop down whatever you want it to be so i'm gonna say marketing i want the path to be slash marketing and then i want the class name so i'm gonna just say short for cname to be drop down dash link so we can actually let me add a comma here and press enter and we can just copy and paste this as many drop-down menus as you want so maybe two three four let me just get rid of this comma here let me change everything now so let's just say development and then development here same thing with this one let's just put design and then design here and then let's just do consulting and i just put consulting here let's hit save alright so now we're done with the menu item so now let's see it should not save this so what is it saying menu items from looks like it's because wait let me make sure all right so it's saying modern affairs about menu items so i spell everything right menu items from dot slash menu items link uh let's just put something inside the jsx first just to make sure nothing's going crazy yeah that's not making sense let me go back and check make sure everything's spelled properly oh yeah so a simple simple little mistake is the i needed menu item not menu items so menu item save all right perfect now we are set to go so now you can see here and nothing happening yet but now we don't have that air anymore all right so little tiny air at least react tells you that so you're not stuck with it but let's go ahead and let's just start creating our jsx so now let's go and type in ul and this is going to have two different things so let's actually add the state first so you can see what's happening so up here i'm going to say cons it's gonna be similar almost identical basically say click and set click so this equal to use states and i want it to be false actually let me um make the screen bigger because you can't see what's going on and i'm going to say const handle click equal to the air function which is saying set click and i wanted to basically toggle the click value there so now let's go underneath here to the uh the ul now and i'm gonna say on click equals to handle click and then under here i'm gonna say class name and i want this to equal and i want it to be say click so if click is true so you clicked on this ul i want the class drop down dash menu space clicked to be added and if it's not then i want it to be drop down dash menu so basically the click part is the class we're adding here and then outside let's just close it closing tag and then press enter and now we're going to actually map through the menu items already that we created in the other file so now let's go and add the curly braces i'm going to say menu items dot map and i'm going to loop through it i'm going to say item comma index so i'm passing in two parameters item so that's just the way i named it you can name whatever you want and then index will pull for the key when the li tag you'll see that in a second but outside the first pregnancy of index and hit space and i don't know if i can get rid of this little pop-up set equal to an arrow function and then curly braces and then press enter and then here we're going to say return parentheses and i want the li and i'm going to say key equal to the index and then underneath the li we're going to add a link tag so i'm going to say link and then class name is equal to curly braces so the primary put in item dot c name so right now what this is targeting is the c name here so basically whatever parameter we put dot c name targeting that class name drop down dash link and then when the path to equal to item dot path which is again that's the path we have here and then title obviously you'll see item.title would be the one you put for the title so then we'll just say after the two let's say on click equal to curly braces parentheses arrow function i'm going to say set click and i want this the value to be false so basically we're just making sure that whenever we click it the value is set to false and then closing tag here and then inside of the link we're just going to add the title so item dot title save this and right now you probably won't see anything because this services doesn't have anything showing it yet so let's go actually command b now and then let me see how much is in the css for drop yeah so the drop down cs is not too crazy let's go ahead and tackle that now so let's go to drop down css i'm gonna say dot drop down dash menu you know that let's just do with 200 pixels position to be absolute let's make it top 80 pixels and then list style let's make that none and then text dash align which is going to be start then under here let's do dot drop down dash menu li let's just make the background let's see let's just set the background to let's see one eight eight eight f f and then the cursor just put pointer here and then dot dropped on dash menu li colon hover curly bridge and say background equal to hashtag 5 c a b f f not dollar sign let's see and then let's do dot drop down dash menu dot clicked so this is when it's clicked i want it to display to disappear and then last will be drop down dash link and it's going to say display block with a hundred percent heights 100 percent and then uh text decoration to be none color to be white so fff and then padding to be 16 pixels so right now you can't see anything right now but let's actually go back to i have believe we have just the nav bar and then just the nav bar actually i think all we need is a snapbar css pretty much so let's just go to navbar css and then we need to create our pages too so let's go and get started here so actually there's a ton of code for the css so i don't want to sit here and spend an hour typing that out again since they're doing react but basically you can go to the github i'll put a link in the bio so here i am pretty much go to the github if you want to copy css and then go to src and then let's go and go to the components folder and then here go to navbar.css and then click on raw and then here you can just do command a selects all of its command c paste this in here to the navbar css file let's save this and now you can see we have our epic thing now i think i zoomed in beginning of the tutorials that's why it looks so weird all right so now i just saved this probably like 10 20 minutes of typing but you get the point here this is what we got going on so most of the stuff was the hover stuff we did earlier in the button but then this entire navbar is what we just copied and pasted so if you did want to see that this is almost identical to the other tutorial where i actually typed everything out except i did add a few different changes here and there but so if you didn't watch the original one css feel free but it's pretty much you can read through this and get get to know what's getting going on and if you did want me to make an explanation or want me to code it out step by step next time definitely let me know in the comments below and then now let's go to let's see drop down let's see what we got missing looks like drop down set the nav navbar.js this is what we need to add so go to navbar.js and then what we want to do is i want to basically toggle this drop down to show so what we're going to do is create two functions we're going to say const on mouse enter set the equal to arrow function and then we're gonna say this is a cool trick that i learned pretty much when you're on mobile so like here the basically the drop down disappears so what i'm going to say is if the window dot inner width is less than 960 i want to set the value of the drop down to false and if it's not if it's a greater so it's larger then i just want to say else set the drop down to true now you could probably do the uh shortcut way to do it and like put the question mark cohen stuff but i want to make this very legible so you can actually understand what's happening so if i save this and let's go and because right now if i click it it pops out you can see this but let me go back and right now you can't see anything yet so let me see go back here it's because i didn't add the function to our jsx here so let me let me do the mouse leaf first because it's pretty similar it's fairly similar and then we can add that into our actual jsx so pretty much let's just copy and paste this it's almost identical so let's see const and then here and there's gonna say mouse on mouse enter on mouse leave and it should be false let me make this false here too and then let's go pretty much actually let's put this let's put this in the jsx so that actually works and then we can go here so what we're looking for right now is the service or drop down menu right here so inside of the ally tag which is within encasing the services link press enter and then inside of the li opening tag let's go and type in on mouse enter i'm going to set that equal to on mouse enter here and then on mouse leave is equal to on mouse leave and i'm going to save this and now let's go ahead and test it and now you can see everything is nice is working the only problem now is we need to actually include the routes so that when you click on something it actually goes to the page and then also when mobile we have to get some rid of some stuff because because there's some issues on mobile whenever you uh shrink it down so we get rid of that stuff too once we get there but uh for now but for now the functionality works so let's actually go and create the pages now so this is the fun part this one's not too crazy but basically let's exit off all of this up here and then right click on pages and then go to new file and then let's just type in sign up dot js and then let's go and create i'm going to create seven pages total so let's do services.js so whatever your menu items you name yours that's what you would change here so products.js and then let's do uh let's see marketing.js and then we got home so let's do home dot js and then let's see what else i got contact us dot js and then if i here let's do consulting dot js so i should have seven total so let's just start off we're already on consulting so might as well go ahead and fill this out but super simple imports react from react and then export defaults function and then capital c consulting and then we're just going to return a simple let's just put fragments here so you can see because if i save it's gonna go to one line but let's just go here type h1 class name equal to consulting and then let's just type in consulting so again this is whatever you named your uh your page so right now nothing happens because we don't have the routes in but what i'm going to do is copy this go to contact us let me exit off these up here so contact us paste this change this from this to contact us and then simply you're gonna go here and just say contact us or whatever you wanna put here save that and then go down the list home let's go fast real quick so let's see home home here actually i put epic for the home so let's just say did i say yeah i put epic but i named it home all right so that's the same here go to marketing paste this change this to marketing put this here marketing save go to products paste this and let's say products and then let's say products here services paste that in let's do services services here and then sign up last but not least sign up and then let's say sign up all right so we're done with the pages so what new do now is actually let's go to yes go to our app dot co c we have it over here let's close out the pages here components and we have app.css so what i'm going to do here is so this just makes more sense i'm going to say dot home so all the page we just created dot services comma dot products dot contact us dot sign up dot marketing dot consulting and then curly brace and then in here we're gonna say display flex height 90 viewport height and i'm just doing this because it just you'll be able to see that when you switch the pages looks better like item center and then justify content center and then font size let's do the ram save this here and right now nothing's happening so what we need to do now is go to the actual app.js and let's start using the routes so here we need to import the additional switch and let me drag this out see switch and then we'll have to put in routes so here this one's fairly simple nothing too crazy but go underneath the nav bar now and this is the way i did it definitely feel free to factor this let me know alternative ways that you did this but i'm gonna say switch and now inside the switch tags we're gonna have our routes with essentially linked to all of the separate uh components aka the pages so we're just gonna go routes and then the path i want this equal to the home and i'm gonna set it make sure it's exact because if you don't put exact it's gonna match anything with the slash in it and then you just never it's not gonna be able to switch over and then i'm gonna say component so that equal to curly braces and i'm gonna put in the component that i want to render whenever i click on this path and now let's just go ahead and copy this down six more times so one two three four five six so here let's go ahead and change this to services and then services here and then for the products let's say products products here home will be contact us and this will be contact us this page coin will be signed up and then let's do sign dash up and again if you have different names then obviously fill it in whatever you name your pages marketing see marketing here and last but not least let's say consulting and then consulting here so if i save this we have to import this alright so one last thing this can take a little bit but let's just say import services from dot slash components slash pages and then finally services so now let's just copy this down see five six and i think yes seven times here change services let's command d this so that it can automatically update both products here and then let's change this one it's going to say contact us let's change this one it's going to be sign up here let's just say home this one's going to be marketing and then last one is going to be consulting so save it all right so right now what's happening so we click here and let's just go and test this out really quick so home epic perfect oh yeah i forgot the logo let me add that later but uh basically services works marketing consulting contact us sign up home page let's check mobile click so one thing i need to do is get rid of this icon because it looks like um yeah it must be missing something on the mobile so i'm not sure what i did what happened here so let's first let's go back to our components nav bar and let's see what am i missing so first thing i know i need to add the epic logo so that's for sure so i'm gonna say here i class equals to f a b f a dash first draft save that so the logo is there and then it looks like uh because it only had home service so missing yeah i think i don't think i've added the other one yeah so i'm missing what is it products yeah i don't even have product on here what did i forget products yeah it looks like perfect products so let's go here edit this change this to products this should be ducks save this let me check there's much better now i'm gonna get rid of this little thing on the um let's see let's see where i have it so i think it's called what is this called care dash down so what i'm going to do is go to navbar css inside of here the media query i'm just going to copy this at the top so i remember this so it would be dot the class name is gonna say display none save that and pretty much there so the only difference was the images so if you did want to copy that let me show you how i did that just in case so last thing because right now the images aren't showing so you can't see like the cool stuff but you can go here the new um file or new folder for under the src and then just type in images and then you can go to github and just clone the project or just download it and you can get all the images from this github file so let me go back and show you where i have all the images here so src right here in this folder you can get download that or also um just download the project and drag it in i'm just going to go ahead and just drag in all of these images so let's drag this into images and then i have on the app.css i have custom css i copied to so again you can go to let's see app.css just go to raw and then just straight up command a command c this and delete the previous code and save it and then you're basically you got all of the code so now the images are off because you can change these here and there but i don't remember what um yeah i don't even remember what image one looks like it's supposed to be yeah i don't know why it's showing it as yeah it should be the what should we call it that's weird anyway so go over here check home services oh i think that's the problem let me check make sure so you're gonna go back to pages and then let me see if i can import this because uh that's one thing i forgot is to import so enter import dot dot slash dot slash app.css and then you basically just do that on every single um page you got so let me go back let's go back home and it looks like it's not running why is it not running this time let me check my console make sure everything's fine ah that's probably what this is on where is this at network.js see where is the improper class let me just type it in right here got them right there so last name oh that was the one error i forgot i forgot to change the class name so go back to pages make it corresponding to whatever the class name was so contact us that's consulting this one should be marketing let's do products services and then sign up save it and boom now we have our react nav bar check it out services marketing consulting products contact us sign up or i think i put like scrub at the end epic home page try it again mobile testing everything works closes closes it out close it out here close it out here and then closes it out here and boom so here is the react drop down nav bar tutorial for the day so if you did enjoy this video definitely go down below and hit that like button share this with your friend or somebody that this might be helpful with and also comment down below what you think or any thoughts and feel free to refactor the code make some edits make it better tell me any mistakes i made or things that you don't get and aside from that if you have not already go ahead and subscribe to the channel and i will see you in the next video peace

Channel: Brian Design

Views: 88,168

Keywords: react navbar, react navbar dropdown, react navbar dropdown menu, react js, react project, beginner react project, react navbar tutorial, react projects, react, react projects for beginners, react projects for portfolio, react project ideas, react project from scratch, react navbar responsive, react navbar with dropdown, react navbar component, react navbar toggle, react navbar without bootstrap, navbar react, navbar react js, navbar react router, react router, react hooks

Id: T2MhVxJxsL0

Length: 61min 46sec (3706 seconds)

Published: Thu Aug 06 2020