Build a Responsive Side Navbar w/ Submenu using Next.js 13 and Tailwind CSS

hi everyone in today's video we are going to be building this responsive side navigation bar with submenus this is also mobile friendly so as you can see when we shrink the screen it gives us a hamburger menu icon and when we open it up our menu is also there to do this we are going to be using nextjs 13 as well as Tailwind CSS so let's get to it so we got our IDE open on the left and our Local Host open on the right I have a blank version of this project that I'm going to be working with but you can see the full project in the description below if you want to move ahead faster now we're going to be walking through step by step on how to create what you saw in the demo so the first thing we need to do is get some prerequisites out of the way we are going to be installing a couple packages and they are right here the clsx frame or motion Tailwind merge and iconify react going to go ahead and install all these packages so I already have them installed we're going to move forward and we're going to be adding a couple items inside of our files and the first one we're going to start with is our constants file inside our constants file we are going to be putting what navigation items we are going to have so I'm going to be copying pasting those items into here and we're going to be walking through it you can see we are importing icon for those little svgs that you saw earlier we have types of side naav item which we're going to go ahead and add right now so we're going to go to types we're going to add the side navigation item type so we're going to go ahead like that inside our type we have a title a path an icon submenu and submenu item so if we go back here you can see what those types are we have an array of dictionaries of these side nav items so the first one we have to home the path is just the backs slash and the icon that we want is the home icon for our items that have sub menus you can see our title our path the icon that we want it to be assigned and to say that submenu is true and we are going to be using that variable later on on to see which items have sub menus and which ones don't cuz we need some differentiator then after that you can see right below these are the submenu items we have the title and the path associated with them I didn't add an icon because I thought it would be too cluttered but you could go do that if you want for now this is what that looks like and these are the other items and paths that we have now for each path that we have here we're going to have to create a path for them which we are going to be in a second so we got our constants and we're going to be using using this later on we're going to move forward with adding a file into our lib folder and that's going to be our utils file and inside our utils file we are going to have this code right here this is just handling class name management this is for our styling so this is what it looks like this is pretty standard if you look at other repos this is what they have as well as we're going to be adding a file into our hooks folder and that file is going to be called use scroll and inside our use scroll file we are going to be adding this this code right here now what this code is doing it's a function it has an input of a number that number is used as a threshold and it's returning a Boolean value of scrolled we're checking to see how far down the user has scrolled on a page and if it has then we're saying that it's true and then we can use that variable for styling purposes which you'll see in a second now the prerequisites out of the way we could continue with adding our Pages now our Pages represents our routes that we have so if we open up our constants to help us out so we can see what paths we need to create so I'm going to show you how we create One path for instance we already have the home path right here which is our page now if we want to create our projects path all we need to do is go to app and create a folder called projects and within projects you have to create a page just like that and this is our projects route so this is the page that our route is going to be going to so if we create some placeholder one right now this is what project page looks like so if we start up our project doing an mpm runev and you could see if we navigate to the Project's path it looks like this so this is showing up so this is our route now if we want to do a route for our submenu items for this one since it's inside projects I want it to be a part of the Project's path but it's up to you of wherever you want to direct it but for this instance we're going to keep it like this now you see that the sub menu item for all is going to the Project's path so we don't need to create another route for that because we just created it right now now if we want to create a route for web design we have to go inside project create another folder within it name it web design and then within that create another page just like that and then we're going to put our placeholder web design page and now if we go to Project web design it takes us to this page now we are going to do that for all of them so I'm going to quickly do it so I'm done creating all the routes so all of our routes should be here now as you can see here and I'm going to go ahead and close them up so we can move on to adding our header to create our header we are going to create a folder called components and within components we are going to create header and there are two headers that we are going toate create we are going to create one that is going to be for our normal desktop version and we need another one for our mobile version so we're going to do header mobile and we are going to set those up so once we get those two files created then we are going to go inside our layout and import them inside here so we're going to import header as well as header mobile and you will see why and we are going to put them right right above children so we are going to do header header mobile now once we've imported them into the layout then we could go back and start working on just plain header so I'm going to close this up so there are a couple things that we are going to need to import and add to the top so let me add those right here so as you can see we are using client side rendering here we are importing react link use segment layout segment we are also importing you scroll the one that we created earlier and CN once we've added those then we can go ahead and also add a couple variables within our components so you could see that we are initializing Scrolls and we're using our hook and we're setting the threshold to five and then we're also initializing selected layout to use selected layout segment then we are going to go ahead and add what we are going to be returning so I'm going to go ahead and paste the code there and walk you through so in our artive you can see we're using CN and then we are combining all of these classes you can see that our header is sticky meaning that if we scroll down it's going to stick to the top that we're sing it to full width that we're making sure that the Z index that means it's on top of all the other pages that it's on top you have a border on the bottom you can see here when scroll is true then this is going to be the setting and then also when select the layout is true this is going to be the setting right now our header is the height of 47 PX and you'll see why in just a second you see that we have two inner divs right here and what they represent is our logo and right now I have a placeholder for our profile now right now our logo is not showing but as soon as we start shrinking it then you can see our logo shows and then our profile gets HD in right here and this is the logic for that now this is what our header is going to look like when we're on desktop mode and right now the logo is not showing up because we are going to put it in the side navigation bar which we'll see in a second but now that we got our header component done then we can go ahead and move to the header mobile so we'll take a look at that and this is a little bit more complex you can see how when we shrink it this goes away but before in the demo you can see that the menu icon shows up so this is where that's happening now there are a couple Imports that we need to import from the top so I'm going to go ahead and add that here now we are importing the link we using use path name which I used in the previous video our side navigation items that we created earlier our side have item type our icon and frame or motion for what you're going to see next now there is one more type that we need to add into types and we are going to go ahead and do that now if we go here we are going to enter it right now and this type is going to be for the menu item with sub men props which you are going to see in a second our item is a side nav item which is this and we have a toggle open function which you're going to see in a second so if we go back to the header mobile then we are going to also import that type which is right here now we got our Imports out of the way the next thing we are going to do is start adding our variables so here view of our initialized variables we have path name container reference height is open toggle open these are a couple of our variables that we're going to be using you can see it's giving us an error right now for use Dimensions cuz it doesn't exist so we're going to be adding that function right now and this is what the function looks like what it's doing is returning the current dimension of the screen now once we've got that in then we could go ahead and start looking at our component and what we are going to be returning so if we go ahead and this we're going to start with the outermost div which is this one so our motion import is being used right here and the tag that we're using it with is the nav tag initially it's going to be closed and depending whether on the user pressers the toggle or not then it's going to open up and the toggle is going to to be inside here as well which we are going to add then within this motion. naav we're going to have a div that's absolute and that's going to be the screen that's going to be all white when we open up our our mobile view of our side nav so you can see sidebar is missing so we are going to need to add that so if we go up top here we're going to paste it in this is what sidebar is it sets the variance for what it looks like when it's open and when it's closed so that's how it's being initialized here and then right underneath that we are going to be importing a list which looks like this we are missing another variable called variance which we are going to also add at the top right here so this is what it looks like and this is for more of the animation effect now within this list this is where we are going to be using our side nav items we're going to go ahead and do side nav items we're going to map it since it's an array and then what we are going to do is we're going to return something if it exists and then right here we're just going to do item index now for styling purposes we want to see also when the last item is so to do that this is what we need to do we get the length of the side items minus one and then we look at that index and then we will apply different styling which you'll see now within this return statement I'm going to be pasting in what we are going to be returning it's going to give us some errors we haven't added it in yet so we are are wrapping it around a div we are checking if the item has a sub menu if it does then we're going to show it a different View and if it isn't we're just going to give it a normal menu item View and then for that last item we're just going to give it a different styling if the case is satisfied so now we're going to go ahead and add menu item with submenu and menu item right below in here so we're going to import menu item and then all that is it's just a list and then it has children that we're passing it to and the roller right here as you saw is a link and then now we have to add the variance for this so then that is this right here here are the variants this is the motion that it's going to do when it opens and closes and then right below menu item I'm going to be adding menu item with submenu and it's a little bit more complex and I'll explain it to you in 1 second but let's finish adding everything back in So if we go back to our list so right underneath here we are going going to be adding our menu toggle button so this is our hamburger menu icon so it doesn't exist right now we haven't added it in so we're going to go ahead and do that so let's put that right above menu item so let's put that right here this is our menu toggle you can see it's just an SVG that is wrapped around a button and then it's asking for path so that's another component that we have right here and that's what that looks like so now when we close this up then you'll see our hamburger icon is showing up now if we try opening it like this you could see our submenu items are here and if I open it up it goes away and what is going to show here instead is our sidebar Nav Now this is only for responsive purposes if you want to use this on your mobile phone so as you could see let's go back to where we added our sub item with Sub menu so here any of the items that have submenu items we want to check the path name now in order to get the root menu item to also be highlighted with the submenu item we have to check if the item. path which is this one right here our root is included in our path name so the way that we set up our constants projects was inside all of these paths so that's one way to highlight or change the styling of the root menu item now each menu item with the submenu has a function called submenu open so it's independent of each so if I open this one this one opens if I open this one then this one opens separately so that's how we could control that now this is the section where we're showing our items right here and then here we're checking if the sub item path name is equal to the path name now we don't want to do the same thing that we did here with includes because we know that this path name includes our item path we were looking for this specific path name was which is different if we set this equal to item path then all of them are going to be highlighted or all of them are going to be active if one of them is active which you'll see right here which we do not want right so that's why we're going to keep it at sub item and that's how you're able to get each one individually to change styling that is header mobile now I'm going to be moving to building our side navigation bar now to get our side now we're going to go back inside here add inside component components our side nav component we're going to initialize something here and then once we got that we are going to go back inside layout and import our side nav once we have imported our side nav there's a couple changes we are going to make one of them is with this we are going to add a background of white to our body we are then going to wrap everything around a div and then once we've got it wrapped around we are going to add a class name of flex then we are going to wrap this around a main put these items inside here and then we are going to make this a flex one and then right above main is where our side nav is going to go just like that and now you see our side nav is showing up you see that there's a little bit of a width now we could go back inside side naab and start adding items to it so I'll I'll close these other things so we are going to first add our Imports which looks very similar to our header item that we just worked on and then we are going to add to our return what we are going to return which is this now there is one item that's missing which is menu item which is a little bit different than our previous menu item so I'm going to add that right below and then we'll go through it so our side nav item is coming along and let's step through it step by step so in our outer div we are setting our width as well as our background we want to make sure that our side naav is going all the way down and filling the screen that it's fixed so whenever we scroll down in our page area that that Scrolls and not our side now and we have a border of a right so that's how that's happening there then we have our link and our logo but currently it's not showing up and that's because our header right now had a z of 30 before now we want to make sure that whatever is in this area we are going to give it a margin left because we want this to be next to our side nav and not overlap it in any way in order to do that we are going to create a couple wrappers we're going to go back here we are going to go inside our components I named one of the rappers page wrapper so here is one of the wrappers this is what it looks like and this is going around our page so that's one of them we're going to go back to layout go back to import page wrapper and then we are going to wrap it around our children this page wrapper so that's our first wrapper and then for our second wrapper is where our margin width comes in so I named the margin width wrapper and then inside here is very similar to page wrapper except we are making it a margin left of 60 which is the same width of our sidebar and then other styling aspects of it so then we're going to go back to our layout and then add our margin width wrapper right here and then this is going to go around these items right here anything that is inside our main so we're going to put all these inside here just like that now you can see our logo is showing up our header is no longer on top of our side knv and then everything looks better now we can go back to the side nav component to take a deeper look at it so let's go and do that so we are using side naav items again here and we are passing it menu item inside menu item we are checking the path name and each one like before for the mobile view for the menu in mobile view we have a submenu open and we are passing it a toggle submenu function to set the submenu if it's open this is the main portion like before we are checking if the item has a submenu and if it does this is the functionality that it's going to have this is going to act as a button so this one is one that that has Sub menu items if we click on it it's going to open up a drop down that drop down is showing up right here and we are checking if the sub item path is equal to the path name and if it is then the font is going to be bold like it's shown here so if we click on this this is bold and this this is bold and if we click on any other link then the background is going to be whatever we set it to be so for this one since it's a normal item that doesn't have a sub menus then this is what it's going to look like and then we are checking if the path name is equal to the item. path and if it is we are giving it a background of this color so that's how that's being set up and yeah that's mostly it that's how you add the side navigation now if you want to go ahead and change the pages you're more than welcome to so I'm going to go ahead and do that for all the pages so I went ahead and updated all the styling for the pages so they all use the same format you could update it to however you like but as you can see I have at the top a font bold a text that's bigger and then I'm setting these little boxes as placeholders and this is how that's being done and then also I want to show you how the scrolling works so if we go to home and we scroll down you can see that we have our header and it sort of gives it a little bit of a transparent background and a blur this is how we go down our side nav is fixed and then also if we shrink our screen like this we go into Mobile mode and then everything lays out nicely if we click on our menu icon and then this shows up and then we can navigate to whatever page that we want and then that's how it's being done that's it for this video thank you for watching I hope it was helpful if you have any questions feel free to leave it in the comment section below everything will be available in the description and don't forget to subscribe and join our Discord thank you and until next time

Channel: Hosna Qasmei

Views: 32,606

Keywords: nextjs, tailwind css, nextjs 13, responsive, navbar, responsive navbar, submenu, side navbar, side nav, side navigation, side navigation with submenu, typescript, web dev, ui

Id: 3pTPcyUJx-Q

Length: 20min 49sec (1249 seconds)

Published: Sun Oct 08 2023