Responsive Navbar in React using React Router | Beginner Tutorial

hello everyone in today's video we'll be learning how to make a nav bar in react from scratch using react router and it will also be responsive so if we go to the navbar over here we see that we have the website a name on the left hand side on the right side we have the different links if we hover over it we see that it's highlighted if we click on a particular page link we see that the URL gets changed and that works for the other links as well and we see that on this page since the page is too long we can scroll down and the navbar stays on the top and it doesn't move and we can also see that if we click on the website button it goes back to the home page and if we decrease the width of the page we see that a hamburger menu pops open and if we click on that we can use the nav bar as before so we can change the pages and go back to the home page as well and if we increase the width it goes back to how it was so this is a great project if you're a beginner to react and you want to learn how routing works and the basics of routing as well as how to create responsive elements and components in react so without much further Ado let's get started so I just have some react boilerplate code over here which you can get using Create react app or wheat I have made some modifications though so in main.jsx there's only the app component um inside index.css we've added some styling to every element using the asterisk operator so we put the Box sizing as border box we put the margin and padding as zero and the font family has aerial helvetica or Sans serif in app.jsx we just have some text which says navbar and then inside app.css we've added some styling to this app Dev over here so we've just given it a background color of FeFe a height of 100 of the viewport height and a width of 100 now before we get started we have to install react router so to do that we go into the terminal and we write npmi react Dash router Dash Dom and then once that's installed we can run our app using npm run Dev and then we can go to localhost and refresh and it renders out the navbar which we have inside our app.jsx so to get started let's create our navbar component with the multiple links which we need so we'll go into the SRC folder and we'll create a components folder and we'll create a nav bar dot jsx component and a navbar.css file which we'll use later for styling in navbar.jsx I'll go down and write rafc and have an extension which lets me just create a functional component real quick by using that command and I'll go ahead and save this and then inside app.jsx I'll replace this text and import the navbar component and now if I save that the same text is rendered out on the left hand side but now it's the component over here the navbar.jsx so to get started with our number we'll delete everything here and we'll use a nav tag which is semantic tag which basically tells the browser that this is the navbar and then for each of our links we will create an unordered list and each link will be a list item so for for now let's just write down um about services and contact let's go ahead and save that and we see we have the three rendered out on the left hand side now we need to be able to click on these and whenever we click on these we want the URL on the top to change so if you click on about Slash about should be added to the URL and similarly for the rest and to do that we have a special component from the react router Library called link so we'll go to the top over here and we'll just say import link from react router Dom and now in instead of just having the text over here let's just delete this about text we need to add the link and inside that we'll have the about text and let's do the same thing for the others as well so over here we have services and over here we have contact and we'll go ahead and save that and you'll see that nothing is being rendered out on the left hand side and that's because we're missing something in our main.jsx file whenever by using react router Dom components we have to wrap our entire app inside something called browser router which is supplied by the react router Dom Library so you just say import browser router from Jack drop to Dom and wrap it around our app component now what browser router does is it basically keeps track of the different routes that we have and the different links that we have in our website and now we can see that on the left hand side all the links have been rendered out so we'll go back into navbar.jsx now we can click on these links but they don't really do anything and that's because inside this link tag we have to specify a specific attribute which is the two attribute and it basically tells react router Dom to which path we want this link to go to and it's a relative path so if we write down slash about it will take us to the URL localhost 5173 slash about so we'll just append it to your domain name so let's do it similarly for services and we'll do the same thing for contact and we save that and now if we click on about it takes us to slash about services and contact now of course we don't have any specific pages that we're specifying that need to be rendered at each path so nothing is changing in our actual app one more thing we need to do is we want to be able to go back to the home page so outside this unordered link unordered list over here we'll add another link since it's to the left hand side we want it to be separate and we'll just say website that's what we name it and instead of going to a particular path we just specify forward slash and what that does is it takes uh the website to basically no path so for example if I click on website now it'll take us back to the main domain without any paths appended at the end of it by the way if you're finding this tutorial helpful please do leave a like and I also have suggestions for books every engineer should read as well as useful links for buying affordable domains and hosting in the description down below so now that we have our nav bar made uh let's add the other pages that we want to render whenever we go to a specific path so inside components we'll create a new folder called pages and inside that let's create home.jsx contact Dot jsx about.jsx and services Dot jsx and inside each of these I'll just use the rafc command to create a simple functional component and if you remember inside the services page we had a lot of text to demo that the navbar sticks to the top whenever you scroll down so over here inside this div I'll create another div and I'll write down lorem 100 and that basically adds a text with a hundred words when I click on enter and this is just a demo that the page can actually scroll and the number will stay at the top below this we'll add a br tag to just add some space below this div and we'll copy and paste this a few times so that the height of the page increases this is completely optional you can do it if you want to see if the nav bar sticks to the top and we'll go ahead and save that so we have all of our Pages named and created but we still aren't telling react router how which Pages need to go related to which link so it's not rendering anything at the bottom to do that we need to go into app.jsx and below this nut bar we need to use another component supplied by react router Dom called routes so inside this we will specify the different routes that we have so slash contact slash Services slash about and then the home page and we'll specify for each of those routes which component needs to be rendered so let's start out with the first route and to do this we need to import another component called route singular and inside this first we specify at which path we want this component to render so let's say about and then we specify which element we want to be rendered at a particular path so of course at the about path we want the about component to be rendered so we'll put an opening tag and we'll just save that and let's just do it for the other Pages as well so we'll paste that and say at the contact path we want the contact component to be rendered and then add the services part we want the services component to be rendered and at the home page which is over here we want the home page to be rendered and we'll add that at the top and we'll say home and now you see at the home page the home text is rendered and then we go to about about is rendered at Services the entire text that we added is rendered out over here and then at contact contact is rendered now you'll see at the top over here that we are importing each of these components separately from their own files and it's a bit messy so a neat little trick to fix that is we can create an index.js file and we can basically say export star from dot slash home and do that for each of these files so about contact and services and now if we go back into app.jsx instead of having all of these lines we can just say import about contact um home and services and we can say imported from dot slash components slash pages and this is because index.js acts as like the entryway to the pages folder and it's at index.js by basically exporting everything from the other files and it's a neat little way to clean up the code whenever you're importing multiple files from the same folder and if we refresh the website works as it did before so now that we're done with the routing let's add some CSS to our navbar to make it look a little bit nicer and before we do that let's just add a class name to our title over here so we'll name it title and that's the only class name we need to add so we'll go into navbar.css and what we need to do is Target the nav element that we have we'll give it a display of flex justify content to space between so that the website is on the left hand side and uh the other links are on the right hand side we'll say align items Center and the reason it's not changing anything is because we have to go into navbar.jsx and at the top just say import dot slash navbar.css and save that and now we see the styling is being applied so we'll go back into navbar.css and then we'll give it a background color of bluish gray so background color hash 0 f 1 7 2 a and now we see it's increased blue we'll um now go and then add The Styling for the title that we have so we'll say nav dot title we'll give it a font size that's slightly larger so 1.5 Ram we'll give it a margin of one REM on all sides we'll give it a bold font weight so that it's a bit boom bold um we'll remove all text decoration like the underline and the color that it has uh and for the color we'll give it white so we're done with the title now for the unordered list we'll give we'll make a flex box as well so inside the nav the UL will make it display flex and it's a row by default for each of those list items inside the unordered list inside the nav we'll basically say list style none and that should remove those black dots that we have over there now for each of those links inside the navs unordered list list item we'll say display block and that'll just help give it some height and width later on um we'll give it a text decoration of none to remove the underlined we will make the color white of the text we'll give it a padding on all sides of 0.5 gram and a margin of 0 and 0.5 rim so that it's a bit more spaced out horizontally and then a border radius of 0.5 realm we can't see this right now but we'll see it when we're hovering over the links or when we have an active link now the next thing we want to know is that whenever we're at a particular link we want that particular link to be highlighted so that we know we're at this particular page and reactor Auto Dome actually provides us with a very cool component which lets us do that it automatically adds a CSS class to any link that is currently active so instead of using uh the link tag that we have over here we should be using the nav link tag provided by react router Dom so we'll go ahead and replace every other instance with it and we won't replace the main website link because we don't want it to be highlighted whenever we're on the home page um and now all we need to do is that say at the top we want to specify the DOT active class because this active class will automatically be applied to any link that is currently active um and we have talked about Dom will check the current path to the links and figure out to which pages to apply this to uh to which links to apply this to so whenever an active class name is applied to a link we'll just say background color and we give it a background color of 1 d for e d 8. and now we see since we're on the contact page the contact link is highlighted same for services and about but for the home page nothing happens now we also want it to be highlighted when we're hovering over a link so we'll go to the top bottom over here and usually what we would do is say nav Uli a hover and we'll give it a background color of hash 172554 and save that now if we hover over any link it gets highlighted but we'll see some unique behavior let's say we go to the services tab the other links do get highlighted but so does this one and we don't want it to since we're already active on it we want to tell CSS that this this styling should only be applied if the element doesn't have the class name active and we can use a sudo selector um called the not selector so we can say colon not and DOT active and what this basically does is it says apply The Styling if the element does not have the DOT active class and now if we hover over the links they um change the background color but the active one does not now one more thing we want to do is we want to make the navbar sticky to the top of the page so when we scroll down it doesn't scroll with the page so to do that it's very simple all we have to do is go to the top where we Define The Styling for the nav element and we basically have to say the position of the nav element should be sticky that alone won't fix it because we need to tell it to where it should stick so we'll say top zero and this tells CSS that the position of the nav bar should be sticky and it should stick to the top since we specified zero and we see that when we scroll down a bit it doesn't move but if we move a bit more it starts moving and there's a quick fix to that in app.css we can instead of saying 100 viewport height we can just say 100 viewport um percentage and if we save that and we refresh now we'll see that the navbar never Scrolls up so we made the navbar sticky to the top now the last thing we want to do is we want to make the navbar responsive so that the width when the width is below a certain amount of pixels it creates a menu icon and we can open the drop down so to do that we'll go back into navbar.css and before that we actually need to add the HTML for the hamburger menu so to do that we'll go below this link and we'll create a div and we'll give it a class name of menu and to make the three lines we'll just add three spans inside it now we can go into navbar.css and add the styling for it so we'll first add The Styling for the dot menu plus which is the main div containing the menu and since we want to be more specific we'll say it should be inside the nav component and we'll save the position so it should be absolute it should be from the top 0.75 REM from the right 0.5 gram we want it to be a flexbox so we'll say Flex Direction column justify content space between but we'll give it a width of 2.25 gram and a height of 2 RAM and we'll save that and of course nothing shows up because the spans haven't had their styling yet so we'll say nav inside that Target the dot menu inside that Target the spans each of them should have a height of 0.4 REM each should have a width of 100 of its parent the background color should be fully white and then we'll just give it a border radius of 0.2 gram if we save that we still can't see it so we put a display of flex over here and we say that now we can see the hamburger menu but the thing is we don't want it to be visible by default we only want it to be visible once the width is below a certain amount of pixels so by default we'll give it a display none so that it's not visible now to only show certain elements when the width is below a certain percentage or a certain amount of pixels we use something called media queries and to do that we say at media and if we want this styling to be applied when the width is lesser than 480 pixels we say Max width 480 pixels and then all the styling that needs to be applied when the width is lesser than these pixels it goes over here so of course all the styling outside this will still remain but if any styling is present inside this it will override whatever it was present before so for the nav dot menu we obviously want it to be visible now so we'll say nav dot menu then we'll say display Flex and if we open the inspect element yeah so now the hamburger menu is visible now that the width is below 480 pixels now for the nav itself we want the flex direction to be column and we want align items to start and that basically pushes out the menu items to the bottom while just the title and the hamburger menu stay at the top now for the unordered list we want a display of none we want the flex direction to be column we want the width to be 100 percent and we want the margin at the bottom to be 0.25 programming Now by putting display none because by default we don't want the menu to show we only want it to show when the hamburger icon is clicked but we'll hide it for now so we can work on The Styling and we save that and we can see that the menu items are in a column instead of a row now let's add some styling to the list element themselves so we just say the width should be a hundred percent and we want the text to be aligned to the center and we save that and it looks a lot better now and for each of the elements um and the a tags inside them the links we just say that the margin should be 0.2 REM and 0.5 return and if we say that there are a bit more spaced out and it looks a bit more cleaner now we can add the display none property back and we see that it's not visible anymore now to be able to show this we need to use something called use State inside of navbar.jsx and we can import that from react now we basically want to keep a stateful variable which keeps track of whether the menu should be open or closed so we'll just say const menu open and set menu open which will be used to update this variable and we'll say use State and by default it should be false now what we want to do is we want to go into this unordered list and basically say that we want a class name but not a not a regular string we want it to be conditional based on the menu open variable so we'll say is menu opened equal to true if it is we want to add a class called open to the unordered list otherwise we just want it to have no class name and now we can go back into namiba.css and we can say for the nav unordered list if it does have the DOT open class name instead of being display none it should be display Flex which should render it out and show the menu whenever the button is clicked so now if we go back to the website and whenever we click on the hamburger menu icon now it should open and close the menu and it's not doing that because we haven't added a trigger on the click event so we'll go to the menu and we'll say on click make an anonymous Arrow function and in this all we want to do is say set menu open and we just want to reverse the value so if it's open it should be closed and if it's closed it should become open now so if we save this and go back into our app we see that clicking the icon opens and closes the menu and of course the number works as before so we can go to the about page Services page contact page and close it down and of course if the width is larger than the entire navbar is rendered out so that's about it for this tutorial if you want some links to some books and resources for engineers such as buying domains at a cheaper price you can find those in the description of the video you can also find a link to the GitHub repo where all the code for this project is hosted and if you did like the video please do like and share it and do subscribe if you want to see more tutorials and comment down below if you want to see any more projects similar to this thanks for watching and see you next time

Channel: Code Complete

Views: 45,304

Keywords:

Id: 17l6AOc8s10

Length: 26min 16sec (1576 seconds)

Published: Thu Jun 22 2023