Create a Responsive NavBar with Next.js & TailwindCSS in UNDER 15mins

hello hello and welcome to another video where we will create something very useful let's see but simple we will do a navigation bar because all websites need one right so we will create ours with next.js and tell you in CSS it will be fully responsive and also by clicking on any of the links when you're on a larger screen it will take you directly to the section it will scroll the section so we will see how we can do that and also when we are on mobile if we click on any of the links the navigation will close and will go directly to the section that we just chose to so the first thing we have to do we have to go into the index.js file and just create our sections so the first section it will be the about section then we will have the blog section we will have the contact Section and we will have a project section so if we scroll down you will see we will have here for different sections now let's take a look and see how these sections they have been structured so the first thing we do have we do have an ID and this will help us to actually scroll to the section when we click on the the link and and then we just added some basic styling really and just for the purpose of this video and just to be easy to demonstrate um that scrolling uh when we click to a link and then we just added um just plain text and this is exactly the same approach we followed for each section if you see here we do have a Blog and we do have an ID contacts and we do have ID projects so all the IDS they are different for each section now let's take a look at our navbar components so we have created a components folder inside there we do have the number component now the first thing we need to do here we just need to go and import the image from next image the link from next Link in the U State just because we're gonna use all of them and we just need to add the use State and for navba and set it to false the next thing we need to do we just need to add our Naf where we will set the width full and the background black and the position we want in fixed top zero left zero right zero and we will we want the zent index to be 10. the next thing we need to do we just need to add a div where we will have some styling um such as justify between we're gonna add a padding X4 MX Auto for the large screens we want to set the maximum width to 7xl for the medium screens we want items Center we want flex and also we want some padding X8 the next thing we need to do here we just need to go and not and and add another div where inside there we will have the logo and also we will add the button the hamburger button which will use we will use for the mobile so we have the logo here so when we we use the link just so when we click to the logo uh it will redirect us to the home page and also we do have just an H2 um just for the text um and also we do have the hamburger button for the mobile now let's see how we've done this first of all we need to set that div to Hidden uh if it's medium screen or larger what that means that means that if we are on a mobile this will be visible because that's when we want to display the button but when this is on a larger screen we want to hide it now we added the button here and inside the button we have the on click and we set the set nav bar to opposite of the current state so for example here we set it to false so when we click to the button we just want to set it to the opposite so if it's false we click once we set it to true we click again we set it to false and we added some styling um as well and on the button we will have a look shortly and the next thing that we did it was actually to check if the navbar is true then we want to display the close image so for example if the number is open on mobile we want to show The X the close M image otherwise we just want to show the normal image so let's take a look and see first of all actually we just need to go inside index and we just need to import here the navbar and also to add it there and let's take a look and see if it's visible now or if we are missing something and there we go so if you see for example here let's go back to the component let's minimize that a little bit so there we go so basically if you see here we do have if the number is true if the navbar is open then we want to show the close otherwise we just want to show the hamburger menu and this is what it means so currently the navbar is closed so we show the hamburger menu and when we open it of course we just need to add the functionality but when the navbar is open then it will show the other an image now if you see here I have the source as hamburger menu for example.svg and and I have set it to public save it to public and I have the two svgs here so if you take a look it's just a simple SVG file you can of course replace the SVG file with the file that you want and and it's the same for the hamburger menu I just want to use these two specific ones but feel free to use any SVG that you might like and replace the existing ones um okay so if we go back to here now so we have said of course we had some styling to the image which you can do as well um and we have set the heighten and width to 30. now the next thing we need to do we just need to go and add a div which this div will actually hold all the links now let's just first add the links foreign there we go so all of them or they more or less the same the only thing that changes is actually the um the text for each link so let's just have a look at one of the links so first of all we added some padding we set the text size to extra large and the text color to white the padding then we just said that when is medium screen or larger we just want to have um adding x 6 we want the text to be in the center we've got some border and and some more styling and here we just started when we hover we just want to have um the the caller to change to purple and when is on medium screen or larger we just want to hover and have the text purple and oh sorry here was the background purple uh while when it's made more a larger screen we just want to have the text purple we'll have a look at this um shortly and and yes and when it's medium we just want to um go back to a transparent background so basically what we did here we just did different styling for mobile and different styling foreign there are different approaches on that I do really like this approach because you can just change the styling for either mobile or larger screens just in one line really and have them all nicely together now here if we click on the link first of all the href takes us to the section about so if you remember here we had the ID about and so the href will takes us to that section you need to make sure that the text is exactly the same with the section with the ID section ID text otherwise this won't work and and then if we click we just set the nav back to close so basically let's just take a look on that and see what we've done so here for example we open it with closed enough so if we click for example about our blocks the Napper will close and we will just go directly to the section and and then if we try for example projects again the same the number will close and we just go to the section of course there are different approaches with that for example you can easily have the number appearing on top and then have the sections below but personally I do like this approach I just find it a little bit more elegant where you just have the nav bar on mobile when you click to open the navba you can actually see only the navigation bar and then if you click any link it just hides the navba and you just go to the section of course there are different approaches and you can play around with it is up to you and but this is the the logic here so basically each link we just customize The Styling either for mobile and then for how we want on mobile and how we want it on um larger screens and it's the same we're repeating exactly the same for all the other links and this is basically the navigation bar uh there isn't anything more than that and it happened previously um I did navigations bar with navigation bar sorry um with um a lot more complicated approaches and I do really like this approach and I just find it just Compact and as a solution and easily adjustable and so you can just go and adjust directly um the style that you want for either um mobile or larger screens and just in one line and you can manipulate the specific element just then and there and yes so this is the navigation bar and let's have a look as well um something that we haven't done how it looks on larger screens so larger screen again if we hover he actually um change the color to purple and then if we go to each section it just takes a step and then if we go to um small screens it just shows like that now if we just go and inspect it and have a look as well um how it would look on any other device let's just go and check for example um an iPad so an iPad it will just show as normal of course I don't have many links here um so I just chose to show the links as normal if you have more links it would be maybe a lot better if you would just change the um hide the links and just show the buttons instead and then let's have a look again sorry this is iPad and then this is the the mobile let's just go and check this projects and yeah and that's it it works um just fine of course this is a very basic solution and you can just change the styling and just make it um different and just so it matches with your project if you find this video helpful please don't forget to like the video and subscribe to the channel and if you have any recommendations or any requests for any upcoming videos that you would like to see in this Channel please just leave a comment in the comment section below

Channel: Code with Rita

Views: 32,657

Keywords: NEXTJS, TAILWINDCSS, NEXT, TAILWIND, NAVBAR, NAVIGATION BAR, RESPONSIVE

Id: EtPRSidpxSU

Length: 14min 59sec (899 seconds)

Published: Sat Dec 10 2022