React Navbar Tutorial Responsive - 3 Designs

yo what is up everyone so today i'm gonna show you how i created three different variations for a react nav bar so i'm gonna start off with the first design and then from there refactor the code to show you the two additional ways to create it as well and this is a super simple basic nav bar so you can get fancy with this customize refactor the code and make it fit to whatever you're trying to make but essentially let me just show you what i got so far and this is the first version and basically on the homepage right now click on the about it highlights it and then we're using uh react router it has the active class and then services etc etc and then ideally this would be the content that you show up on your page and then if i were to just shrink this into mobile then you'd have the hamburger menu now for this video i'm only going to focus on the actual the navbar template design because i made a bunch of websites before with the thing but pretty much this is like a little sidebar drop down i actually tend to drop down at this point this isn't another website i made with a full tutorial so if you want to check this video out how to add like a little drop down component then uh check out the link in the bio and i'll put that there and this is like a smooth girl website too so like you can see all this fancy effects here but that's very um that's my other video so you guys want to check that out but if not this is going to be the first design i'm going to show you first and then i'll show you the two additional designs right after so without further ado let's hop into vs code and let me show you how i made this all right so here i am on my terminal so just go ahead open up your terminal and then just go ahead and type in npx and then space create dash react dash app and then the name for this uh project let's just say react nav var and then dash let's say three and then press enter and then once that decides to finish uploading we can go ahead and navigate into the project and then open this up so i'll see you once this gets completed alright so it's completed now so i'm just go ahead and cd into my project so i'm gonna say cd react dash nav 4-3 and then before i do yarn start also if you don't have yarn you just have npm so you just say whatever that one says but before i do that i'm going to say code dot and this is going to automatically open up vs code if you have it set up if you don't then just quit google search and it's fairly simple to set up and then you're pretty much on vs code if not just go ahead and open it up yourself and then since we're already here i can just do uh command it's either command backtick i'm actually clicking string here but control back tick or command j my bad so command j or control back tick to open up the terminal and then here you can run uh you say npm start or yarn start if you have yarn and i'll run this and every time it says this so i just have to copy this code if you have this error if you don't it should just open up for you but i'm gonna create a new file on the roots call this dot env paste this code here and then simply i'll press the up arrow you're gonna start again and currently have it running so i'm just going to press yes and voila we have the react app up so everything is working fine so let me just shrink this over here let me get yeah let me close this out here and just shrink this back and i can go ahead let me just exit off this one for now so here's the src so let me get off this real quick and let me just delete the index.css i'm not going to use that for this one and then index.js we can just delete it here i'm gonna leave everything else for now because i'll have to worry about it but uh pretty much let's go ahead and let's just create our components aka this is gonna be a navbar so i'm gonna go to src right click hit new folder just type in components and then here let's do a new folder here let me just call this nav bar and then in the navbar folder let's just do index.js and then navbar folder right click again and then i'm using stock components for this so you can use the two or you can refactor it to like just regular css but i'm just going to call this snapbar elements.js right here and pretty much if i go into the index.js if you have these snippets so if you type in uh es7 you can see here get download this one es7 react if not i mean if you like typing out everything line by line then you don't have to but it's going to save you a lot of struggle and then in here you can just type in rafc e enter and boom we have it already created with that little template then i can just delete this word index and just call this uh nav bar and then in here i can just say h1 say navbar here save it and then app.js let me get out rid of this let's just return the nav bar and a little cool trick if i do control space it shows the nav bar and i press enter it auto imports it sometimes it does sometimes it doesn't if it doesn't you can try restarting your code editor but you can see here that it's showing and i can get rid of this logo i don't have that here pretend we can delete this logo svg file too and then perfect everything is good so let me just get rid of this app div and let's just turn into a fragment so you just get rid of this save it and then we can go to app.css command a erase it all and now we're pretty much set to go so let's just go ahead and let me let me install something real quick so let me open up my terminal again and then let me or you could just add the plus sign here and let me just say yarn add so if you don't have yarn you just do mpm you can do mpmi or npm install and then do whatever i type after so we can do let's see styled dash components and then after that let's do yarn at or you say again npm if you have that and let's do react dash router dash dom and then also let's press space let's do react dash icons and uh for now let's just let's do these for now and then if we need anything else i'll just install them after and then we go to our package.json we can see we got stock components grounder dom and icons alright so it's good to see you got those so now let's just go ahead and let's start creating the nav so let's see first thing i want to do is uh turn these divs to fragment next i want to get rid of this h1 so again i'm in the index.js of the navbar by the way and then i'm going to let me close that terminal real quick let me call this one the nav so this is style component so this isn't like a nav tag this is just you'll see if you haven't done stock components before but essentially here's the nav and then let's do a uh nav link so i'm calling i'm naming these again this is what i've named them and once i do a stock component you'll see it so i'm gonna say this is going to be essentially a react nav link so it's different from just a regular react router link because the nav link you can add like active classes and a bunch of extra stuff that the normal link you want wouldn't have you have to do extra code to do the same thing so to the path for react router you have to say two instead of it's basically think of an a tag href except it's react router so it's a two and then here would be essentially the logo so for now this is gonna be an image tag but uh let me just do image as i see there's nothing there yet because we have to actually you would ideally put your logo here but if you don't have a logo i mean you could just straight up say let's do h1 for now because if you don't have an image it's not going to it's going to be a pain trying to follow along so now the links there and then under the nav link i'm going to have the bars and this is just going to be like a little hamburger menu there and then under the bars i'm gonna have the nav menu and that's essentially just a div i'm wrapping my uh my links around so this is like a super concise way i made this i'm sure there's much uh say different or fancier ways to uh create a navbar but there's like the way to do it with the least amount of code so you guys can actually see more of the styling aspect instead of like me doing all this extra stuff and then here this is gonna be a nav link and it's going to say 2 equals to whatever your route would be so this is the about page and then for nav link so if you look up react router nav link you'll notice they have a um like active class thing so you just type for this one i'm gonna say active style and this is for style components if you have like regular like css or sass you'd have to like put the name you call it but i'm doing it this way because it's easier and then i'm just gonna put about and then pretty much uh after that it's just enough btn and then you just copy and paste your link so let me just copy these really quick and it's like the most i'll say basic nav you'll ever see in life super easy actually to make so let's do uh services here and then uh let's see let's do contact us and then sign up and then here let me just change it really quick so services let's see was this contact i'll put contact us and then here would just be uh let's do sign dash up now underneath the uh nav menu press enter and by the way if you're like looking at my code editing like well what kind of extensions i got i just made a video recently with the extension as well so if you guys want to check that out you can too but uh let's see i have um nav btn so there's just like a div wrapping the button and then let me just call this one nav btn link 2 is equal to slash sign in and then simply just say sign in so if i save this right now we're going to get a bunch of errors which i like because stock of pawns actually shows all this so now we can do is we can go into our navbar elements file and then when i go to here we have to actually import some stuff first we need to import is style from styled components and then also i want to import uh nav link from record down so i'm gonna say import and i'm gonna do curly braces and i just named this uh link for short so cool trick to name something like an alias if you want to use it for style components because if i were to do to do like um nav link nav link it's gonna it's not gonna work so i have to say import that link as and i can name this you know like tacos i want to but i'm gonna obviously name it something that makes sense a link from react dash router dom and then also we did install react icons if you've never used it just uh it's pretty much you don't have to do any like fun awesome cdn like copy and pasting all you have to do is just simply add the icon you want so if i say import fa bars which is the little hamburger menu icon you saw from react dash icons and then whatever the first two letters are you would put slash fa so they have a bunch of different icons but i'm using just this one for this and then now we can go ahead and start actually styling so i'm gonna say because we have this in a different file from the actual index.js file we actually have to export these so i'm gonna say export cons and then this is the name which you named it so this is i'm calling it nav because i did uh that's why i have it here that's called called nab and then it's going to set that equal to styled sty dot nav so this again now this is the actual uh tag name now and then back tick back tick and then inside he's back take this we're at her style so if you already know stock opponent you already know the drill but in case you're like brand new like whoa this is what i'm doing so then now let's do background to be zero so just buy for now heights i'm going to set it fixed height to be 80 pixels uh display now we're going to display flex justify content essentially space between so this makes it all centered and the um outer uh outer tags are gonna essentially push to the side and then let's do padding let me do 0.5 ram and then this little trick to uh depending on the screen this will just always be this essential uh size so that i have to wrap it like in the container div so sometimes you say calc 100 viewport width minus this is the max width i want the uh potentially nav bars content to span so a thousand pixels and then what i'm going to do is actually go outside this divide this by two and then semicolon now i forgot to add a parenthesis right here from the calc so essentially just make sure it's princi double parenthesis and then like this so you can pause the screen in case you um see like any syntax errors but then after let me just do c index of 10 or you could put this like a 100 if you want to but ideally this is just so that uh it's above majority of the content now if you did like you followed the other video with the uh side or the drop down menu then you want that to be like the index of like a million or you know like 999 so that it's above everything else but that's just for another video you want to check it out so that's the first one now let's finish and let's do the nav links now so let's export cons nav link equal to style and since this isn't like a uh a normal thing you just you actually have to put in link so the name of what you're importing and then we put backticks here so again this is the rag rider link right there but it's a nav link it's not a regular react writer link i just named it link if i wanted to name i could technically just erase this link and just put nav link but then i have to change the name to like nav links or can't be the exact same for that and then let me just say color hashtag fff so the text is white display we're going to flex these align item center let's see what we got text decoration to be none padding oh what at latin what is that and then zero on a ram let's see we got height let me just put 100 percent and then cursor pointer and now here's a cooler trip it's not components so i can just do the n dot active and this automatically triggers it so whenever i click on it it automatically knows like hey this is the active um class right there even though it says like active uh active style like it knows it knows so they can just say color i just want to change the color to like let's see 15 cdfc and then let's go ahead and let's add some more style so this is actually super short in terms of styling so this video just won't be too crazy but let's do export cons bars equal to style now this is the hamburger menu so what we're actually styling is the react icons which is the fa bars uh icon so back takes here and for display none because currently i don't want to show if it's on desktop view but i want the color to be ff now you could do like the icon uh like contact provider where you can like pass in properties to like every icon but since this is like literally the only icon i just did it here and why did i get out of it so go back and do it and then uh without components you can straight up do it like inside of it so it's kind of like sas but uh like not exactly the same but here the difference too is you can add like javascript stuff too with them stuck opponents but this one's uh i didn't do it for this example this is just more of the design part i'm gonna say add media screen and and then parentheses mac stash width and let's do 760 pixels and i hate this this thing he's popping up but all right so let's do display block and then position colon absolutes let's do top zero um right zero transform to b translate and i want to be minus 100 by 75 percent and then just font size i'll do 1.8 gram and then just cursor a pointer so now let's go underneath this and let's see what we got you got the nav menu and then just the button and link so it should be done soon so let's do export cons that menu equals to style.div with the backticks i'm gonna say display flex and by the way if you're watching this you're like what if i want to make a different variation i make sure you're following along everything because the different variations are just minor tweaks in the code so if you don't have this codes set up already it's going to be a pain to try to like refactor it but just in case you're like hey i don't care about the first variation but i want like the second or third just note that you'd have to have these code this code first before you can um refactor it and then let's do a line dash items uh see center margin dash right what we can do i'm gonna do negative 24 pixels and you'll see why because the button has like a margin on the other side of it so like the centering of the uh the nav links it just looks off to me so again you don't have to have that but i just did it then that uh media screen my screen and max width let's do what so say pixels and display nut so the nav menu will disappear aka the logo on the hamburger menu is the only one left and then let's do export cons nav btn equals 2 style dot 9 with the back ticks i'm gonna say display flex align items center and then margin dash right 24 pixels and keep forgetting to add the midi queries let me do at media screen max width uh let's do what 70 pixels and display none so the button is going to disappear as well and then this should be yeah this is our last stock opponent so this probably is fairly quick nothing than too long and let's do export const uh nav btn link equals to style parentheses and this again this is the same link and then it's back takes here border radius is 4 pixels background is hashtag 256 c1 uh padding will be 10 pixels by 22 pixels color hashtag f border is none the outline is none and cursor pointer and transition there's a little hover effect on it so i'm going to say all 0.2 s e's and out and then simply text decoration will be what is this decoration none so let me press enter scroll up so you can see and then just simply and colon hover so if you want to add like a little hover effect on your uh code what's the component you do like that and then transition maybe just copy this right here the reason i'm copying both you'll see if i um once you're done with this let's do background hashtag fff and color was that zero one zero six zero six save this here and i saved it but yet nothing happened so what we do is go back to index.js and we just have to import all this so i can say um the top imports curly brace so we got nav got nav link we got bars and then we got nav menu nav link nav btn and then nav btn link and it's coming from slash navbar elements save this and it's already been cleared oh looks like i've run it twice and now let's save and it is loading and perfect so now we need to do is go command b back again this is how i close the thing and need to go to app.js and quick little fix i just need to wrap everything around in router and let me do this here too and then i have to do is import this at the top so just import and i'm doing browser router not rotary route okay spell yeah rather as router from react router dom so this should work now and voila we have our beautiful nav but just kidding so now we need to do is um at least we can see everything works and you can see like the active part is there but now let me just go and um what happened so i'm going to do is go to app.css and i have like a default uh google font you guys don't have to copy this but um let's do a little asterisk symbol for now and let's just say font family is sora comma sans serif and what happened why is that a semicolon here and then let's just do box um sizing border box margin zero padding zero if i save this right now the font's not the actual one but i got this from google again you don't have to do this but i'm just gonna import the link here and you guys can pause and copy this if not it really doesn't matter this is just like filler design but uh pretty much now you can see it looks like this and the thing is i need to um actually implement the route so you can see it working and then after i do that then i'll refactor all the code and show you the alternative variation so let's do the routes now so what i'm going to do go under my nav bar i'm just going to pass in the switch tag right there and then in here i'm going to have my routes so routes and also i forgot to create the pages so we'll do that in a second so route first the path is the uh home we got to put exact if you don't put exactly and go crazy because your routes aren't going to work because it's going to think the um slash is in everything and then for component we're going to render the home then i'll just uh sub close that so i'm going to save that here we have an error because now we have to import uh switch as well as routes save that there home not defined so let's actually go to src right click do a new folder call this pages and then simply do new file and just call this index.js rafac press tab change that to home go inside just do each one of home i don't know why there's a second part of doing this and then you don't have to do this but i just did it to um style it i'm just doing inline right now to save some time so i'm going to say star equals quick raise curly brace display colon flex and then let's do justify content so camo case uppercase c center i'll see um align i not content let's do a line items center and then uh let's do height of 90 viewport height and so this work is gonna go back to app.js now and imports uh home from dot slash pages so now click here boom now we're on home because essentially the logo and we're there never go to about it disappears so right now the router everything is perfect i'll just have to create another page really quick on the pages and to do about.js and let me just copy this from index.js and paste this here and then we'll highlight this word and then command d three times to highlight all of it and just change it to about and now let me test this and oh yeah i forgot to import this here's let's go back to i've.js i'll do shift alt down add about to this i don't have to have exact for this one and then change this to about then copy that down this should be slash about not yet and then this should be about here so okay so now you can see home now again you would just rinse and repeat copy the same thing for like the other ones but save some time i'll keep it out but now you can see this is logo number one so let me actually um i'm gonna copy my images because uh already have a logo so just just so you can save some time and then here ideally i would um let me just paste this one in here you can just watch for now what i'm doing but essentially the thing is if you try to import like a normal image it's not going to work you have to do a curly brace and then require this and then do dot slash dot slash we gotta go to our images slash logo that svg and then the alt i'm just going to put um logo so again if you have an image that's how you do it if you don't then you can just leave the text for now by the way you can see it's like this and then we can shrink it here and then last thing i remember when i said why do we have the double transitions on the nav btn to the button because it has like that ease in out fade if you take it off it's gonna essentially if you don't put it here command space this let's see how like it's instantaneous it's hard to tell but like if this was a longer transition you'd notice but then when you put it on it's like nice and smooth so you that's a little just quick fun fact in case you didn't know but here's the first variation so now let me show you how to essentially make the another variation in the third one so here's the main type variation one centered with the buttons over here so let's go ahead and let me show you variation two so let me go to index.js in that bar and pretty much what i'm gonna do is i'm gonna take this nav btn command c and then just paste this under the nav link and paste it here and then i'm going to comment this out this is not btn with btn link save this here and then if i go back you can be like yo what is this and then all we need to do now is pretty much go to the navbar um elements add some like minor tweaks so for the uh let's see on the nav menu right here i'm going to essentially do margin dash rights of 24 pixels and then let me actually leave a comment so i can say like second nav comment this out really quick and then also before i save i'm going to go down to the uh see nav btn link and then let's just do a margin dash left of 24 pixels so here let me do like this second half save it here so now you can see it looks much uh more positioned it just looks cleaner there and then you shrink it out and well no this is nav variation number two so you can see how super simple and easy that was the way i have it set up so if you're like hey i don't like the way my nav looks you can always uh play around like this and then you just switch around so this is the second variation and this is the one i use a lot but uh let's do the third one the third one's one i haven't actually utilized really ever in my videos but uh pretty much just like putting the text here and having that button on this side but i figure i'll show you guys anyway so let me go and let me comment this out so second ask comment out and then let me come this out here and let me save this now let me go back to the nsa yes we have to comment this line out here so let me just make sure people know so second nav and then we're gonna re so uncomment this back out so now we'll save it here and essentially i like the original one except now we're gonna do is go to the uh let's see let's go to the navbar elements now and then pretty much all we need to do is let me go under z index so the top of the nav let me comment say uh third nap by the way if you like how do i comment it's just command slash and this one is going to be justify content of flex dash start and then i'm going to simply uncomment this here now if i save this watch what happens everything goes with it you're like nah i don't want this i want the button to be all the way on the end so pretty much now we need to do is let me scroll make sure uh we gotta go to the nav menu it's right here and go under here let's say third nav so you can tell where i'm at and then we need to do is i'm gonna set the width to 100 viewport width and then i want white space to be no wrap because if you don't put this you're like your little text if you have like way longer items like about section or like contact us or something like super crazy long it's gonna wrap and it's gonna look terrible and then let me see if we need to add anything else on the nav btn right here let's do uh so let me do command again third nav oh and and then let's do justify content flex end and then i'm going to set the width to 100 report with and i believe yeah let me try this first and let's see if that worked it's going out and boom so you can see here that the button essentially flexed end so all the way to the end and then it shifts over and then when i shrink it back you can close and also if i were to like do um background red you can essentially see the uh like the width this right here so you can see it's shrinking as it goes and then if i did this no wrap uncommented this out see that ugliness we don't want that so that's what that's for and then let me just comment this out here and again see how simple it was to just create three variations and with minimal refactoring to the code so this also again this works here so again this is the react nav bar through variation tutorial so if you did enjoy this video give it a thumbs up subscribe if you are new to the channel i'm just docking myself running code building things sharing it with you guys out there and comment down below any suggestions to refactor this or if you have any improvements or even a cooler nav that i have never seen before let me know send me that link and also check out the uh react website video i made with a little drop down nav menu for mobile view if you want to check that out but aside from that i will catch you in the next video peace

Channel: Brian Design

Views: 121,997

Keywords: react navbar, react navbar tutorial, react navbar responsive, react navbar component, react navbar design, react navbar router, react js, react, react tutorial, react js tutorial, react project, navbar react, react js navbar, react tutorial beginner, beginner react project, react project tutorial, beginner react js, react tutorial for beginners, navbar react router, navbar, react js project, react js tutorials, how to make a navbar, navbar tutorial, react nav

Id: VzWBLj_CfpE

Length: 34min 8sec (2048 seconds)

Published: Wed Oct 14 2020