Mastering Next.js 14: Creating a Dynamic Sidebar with TypeScript and Tailwind CSS

hey guys welcome to my YouTube channel in this tutorial we will learn how to create a functional sidebar using next cs14 Tailwind CSS and bunch of other Technologies let me show you the demo of what we going to create in this video so basically you have a sidebar with all the option in here uh as you can see I'm currently on the homepage the navigation is also working as I'm clicking on multiple option it is being navigated to respective pages so I can go to payments account there is also items which has Sub menu inside of it so you can expand it and you can see all the sub menu hidden inside of it so you can go to settings security notifications and same for support contact us let's say you are already in the contact space and you refresh the page you will see that the menu is Auto expanded for the sub menu and then it is auto selected for the contact us I'm super excited for this tutorial let's jump right into it to get started with the project uh let me go to next CS page and then if we click on get started we will see that we need to install next Cs and create a project out of it we are currently using App router so this is the command that we need to use so if I could paste it in vsq terminal let me name my project as sidebar yes I would like to use typescript yes for yes L yes I would like to use tail vnd yes Source directory yes we will be using App router now and we let it install the other thing thing that we need to do is we need to go into tail wiin we need to do the tail win is automatically installed with next year so we don't need to do anything for now uh we will do few setup later on the video but currently the other library that we need to use is lucid react so basically I'm using this library to add the icon in our project so this is the command that we need to use use until it is been installed let's wait now the project has been installed we can see it created a new folder called sidebar and inside of it we have all the default file that nexs creates um let me try to go into the project and run it so if I run it using npm run def command it's it will run the default next year's project for us we don't need contact us if I go to SL page you will see that this is the default nexs template that we are running now we need to install few library in order to get started the first one will be Lucid react so I can just add Lucid react and we need to do setup for the tail win so what we need to do is we need to do npx CSS tailin CSS in it this will create a new TSS config file we already have it sorry for that so if I go in here we will see that there are few few dependency and configuration that has been added already uh we don't need background image for now let's just clean the project a bit so if I run this project again currently this is what is being shown I don't need all this thing so what I can do is I can just remove it and I can use this vs code snippet to quickly generate a component and let's name it as sidebar so if I save it and if I refresh the page you will see I have this sidebar but you can still see I have this background color black uh let's remove that from the global CSS uh we don't need this for now in the body let's remove this and then save it we will see that we have this thing as as of now so if I go to tnd I think every configuration is done in here we don't need to do anything else so yeah uh we have a project to get started with now that we have a clean project and it is only showing one page for now which is sidebar we can get started with our project to get started we need to install we need to add a few configuration the first config ation will be adding colors in Tailwind so in order to add color you can extend the tailin themes so you can extend the colors in the Tailwind theme and then you can add your own color so something like this so I I can add a object of color called sidebar and make it active background and icon color I will be using it later on in the video but if if I show you how it works is let's say I have sidebar as of now so now I installed the color or added the configuration in the extend for the theme so I will have a new property in the class name which will let me create it so if I add text as sidebar active and if I save it you will see it becomes the sidebar active color so this is how the configuration Works in this tail vnd we will be using this to maintain the color and add the primary color the background color and the icon color of it to make it active and use it in the corresponding location so if I want to get started what I would do is first of all I will set up the project structure in order to set up the folder structure let us look into the existing folder structure for what we need to create we have a homepage we have a transaction page we have a payment page we have accounts we have transaction payments accounts inside settings we have settings security notification in help we have FAQ support and contact us so we need to replicate this folder structure in our project so in NEX CS how we can do it is so in the app folder you can create the folder structure so let's say I want to create a new navigation for Transaction what I can do is I need to create a new folder called transactions and inside the transaction I need to create a p. TSX file and in this p. TSX file I will write the component that will be rendered for the particular page so if I just create a sample component and name it transaction so if I go in my project you will see I have SL page as well as I have a transaction page which is just showing the transaction similarly I can replicate payment so if I create another folder called payment p. TSX payment and then do similar for accounts accounts PX count for the sub folder what what I need to do is if I look into our existing solution that we want to replicate we have a setting page we have settings SL security which is being pointed out to the sub menu and then we have settings SL notification so in order to replicate the structure what we need to do is we need to create cre subfolder inside the top level folder so what I mean by that is settings will have a ph. TSX which will have settings inside of it so if I go here I can go in settings page and then inside this I will have another folder called so for for security and notification so one will be for security and then another one will be for notifications and inside the security I need to have a base DSX file so I can just add security and then in the notification I need another page called notifications and I need to do the same thing for help Sub menu so I need to create a new folder called Help which will have a soft folder called fq fq and then it will have a file called base. TSX and then let's f use and then I can create another folder for support and if I go here I will see this this is support page and then last would be contact us again same thing for it p. TSX contact us so now that it has been set up you will see that I will have all this Pages set up so I can go in SL it will give me a sidebar I can go in transaction it will navigate me to this transaction page I can go to accounts it will go let me to accounts page and similarly I can go to payment it will navigate to payment page I can go to settings it will navigate me to the settings page on the top level so basically this page but I can go inside of it so settings SL security so this will navigate me to the security page and if you can see in order to verify this is being rendered if I add something like settings security so you will see the change is being reflected same for notification I can add something like notification one you will see this is how it's being structured so if I give you a brief summary at the end of the folder structure we will have something like this the app level at the top the page will reflect the homepage that we have we have different folder for all the folders pages that we need like accounts helps will have subfolder because it has Sub menu inside of it payment will have it settings will have sub folders in order to have that subnavigation transaction so this is how we need to set up the folder structure once the folder structure has been set up properly what I need to do is I need I can get started with creating this container for the sidebar so let me start by creating a new components folders which will contain all the components that we will be using and let me add a new component called sidebar and inside of it I will have a index. D6 file so let's just create a random component and if I try to import it into my layout what I need to do is I just import the sidebar component from component slice sidebar and then use it here so if I save it you will see that on each page I will have the shared component which is being shared from the layout if I go to settings or if I go to homepage anything so this is how you can create a shared component in the next cs14 so what I need to do is I need to do a quick setup for this container uh let me start by making it a full height height screen which which is saying I will create it 100 VH let me make it with 64 pixel give it a background of white and give it a shadow of large at this point and if I save it you will see that I will have sidebar component in here but if you look into it my other component are being inside of it so I don't want that so what I need to do is I need to make this component as position fixed and then if I make it top zero left zero if I do that you will see that uh my other component is being hidden because sidebar is basically shown on the top and let me add a zed index of 10 for it so the next thing that I need to do is I need to make a layout in order to use the sidebar so let me add a new div and what will this have uh flex and height will be full width will be full I see of it I will not have any changes for now let me add a background red gray gray of 100 let me make it 200 so that it's a bit more visible you will see that it's visible here but what I need to do is I need to make it screen so that it is being covered by whole page so you can clearly see the distinction between sidebar and the other component that is being rendered so what I need to do on this component is I need to have a margin left so it can have Flex it will be Flex column width full height full but I need to have margin of 64 which is the width of the sideb that I used here so now you can see the component is being rendered in a proper place let me give it a fix ping of four now you will see that I have the similar layout replic ated here sidebar is here the other component in order to create less confusion let me update it to home so that you will see so home component and this has been replicated to every other P so if I go to transaction I will have the same layout because it is being added on the top layout level so that is how it works now that the layout is being completed for the sidebar we can start making the UI of the sidebar itself you will see that we have an logo at the top and then other component here for the logo I have download downloaded a logo from internet every asset would be included in the GitHub repo you can have the GitHub repo Link in the description so if I try to make so I go here I will see we have some padding so let me give some padding of three pixels if that looks good we will see that we have a bit padding here let me increase it to four pixels so what we need to do is if you look in here we have other component a bit below from here so let's create that image component in the logo so if I add a class name of width full height let's make it 20 pixel for now and then I can pass the source as/ loco. PNG next CS automatically takes up this public let me add an alternative name of logo for this image and if I save it uh it's a bit too big let me decrease the height to 15 it looks much better now let me decrease it more to 10 something like this yeah it looks good now so what we need to do is we need to create a new div which is div of flex column uh and then we have a spacing of Y of let's say 10 for this particular Dev and what it does is if I create a new div here with something like Side Bar items you will see that we have that I make it a wa full I don't know it is not doing that let me make it with fit okay now it looks good so now you will see that sidebar has that Gap that we needed in here which is nice now we can work on creating the sidebar items in here in in order to do that let's define the items that we need so what I usually do is I creates an I create an items array which contain the list of item that we need so let's say the first would be name as dashboard path would be slash and then icon we can use it from Lucid react so if I go here I can go into icons Library if I search for anything with dashboard I see that there is a layout dashboard icon that I can use so if I import it from Lucid react I will see that there is a layout icon if I copy this and then paste it here I will I will do this for rest of the sidebar if I Define all the items it looks something like this I have dashboard with path AS Slash transaction SL transaction icon I imported it from Lucid react accounts uh similarly I have settings and it if a particular item contains submenu inside of it so there is an items array where which contains name of it and then path where it goes through and similar thing for help it has an items for fq support and contact us if you look into it we have just replicated the existing uh items constant I will I like to do this because it creates a bit easier to change later on if you need to make any change on the items for the sidebar apart from that I have also created few interface in order to work nicely with typescript uh a sidebar item interface which contain name as a string icon would be from Lucid react PA will also be in string items will be sub items and yeah this is how it is being render so let's try to render this just try to render the items so in order to render the items we need to use map and let's just export something like B with item. name for now and I need to pass a key of let's say item. paath so let's see how it looks if I go here if I refresh it you will see that I have dashboard transaction payment accounts settings and help uh if I add it inside a Dev and I refresh it so this is showing incorrect form so this is like what I wanted to see so now we have rendered the items that we need to do the next step would be creating a sub component in order to render this item item items so I would like to create a new file called items which contains the code for the sub component so it would be something like called sidebar item and what I need to do is instead of this I need to render this sidebar items from the item input and in here I can pass the key and you will see that it will have the side by item Side by item but I can also pass item as item but for that what I need to do is I need to import it here and then with the same interface I can copy it from here and paste it here I need to use that and it's called I sidebar icon I need to import the other interface for sub item and then same for Lucid react I can just import it here and remove the unnecessary import so now let me try to destructure it so if I get name from it I can show the name you will see that it works the same but the thing is it's in a submenu and it's in it's in a separate component which help us make it a bit easier now we can try making the UI of it so if you look into the UI of a subcomponent you will see that we have multiple different thing one is we are rendering the icon we are rendering the text and there is also a hover set so if you hover over it we have um background and the text is being converted into active color and then the icon so let's just start by making it simple so if I try to just show the icon and then the name so let's just remove it I will have a flex I'll make the item Center and let me add a space of two for now now and if I sew the icon here so if I display icon as icon let me try to render that icon here and then add the name for it you will see it will show like this but we have a smaller icon and then smaller name inside of it so let's do that let me render the name inside of the component so add a class name let let's make it font small uh make it font semi bold and then save it for now okay this looks a bit better but we should be using a different color I guess um no this looks good and if I go here I can decrease the size of it so if I go in size let me make it something like 18 okay this looks a bit better in order to give it uh spacing I need to SP add spacing on the top level Flex Flex column space y one okay so this has a spacing uh there are a few things that we need to do it has a padding let me add padding of three it has a background color in order to look into it for now so let me add BG b side bar background okay this looks a bit better let's increase the spacing to two just for seeing it and I need to make it rounded large this looks a bit more better than earlier one I think let's increase the size to 20 okay that looks good and we need to make this on Hover state so in order to do that you can use a thing called hover which will apply only on H so what we need to do is make the sidebar background so you'll see that this is working as expected one thing that is not working as the cursor is not pointer it is default let's make it pointer so now I think this looks a bit more better let's add a few hover state so on Hover you can see on the existing item we have color that is been updated so let's make it text uh would be we need to make it on over text active text sidebar active and if I save it if I go back here okay this is working perfectly fine it start to it is starting to look like this which is a good thing uh yes I think this looks good the next thing that we need to do is let's say if we have items inside a particular uh sub item then we need to render this particular icon so in order to do that we can restructure items from it and if items is there and and items. length is greater than zero then what we can do is we need to export an icon called shev shev R down if I go here if I type down this is the icon that that I wanted to use so so have run down and if I save it if I go here you'll see that this icon is being rendered only for settings and H but there are a few issue on it let's start by decreasing its size making it to 20 okay this looks much better maybe 18 it's it's not big icon that we want and you will see that we need to make it at the rightmost corner so in order to do that we can add in here make a div which make this a div and then we can add justify between which will simply do this but what we need to do is make this div flex and then again item Center and then Space X would be two I think we can just remove this from here and then save it okay this looks much better so now that we have it on here I think the only thing that we can do is we can make this as another color that we have so we have a color called icon color which is the default color which is being applied here uh until yeah it looks a bit more better now now that we have our UI ready for the sidebar uh you will see that it is not clickable we need to add that click functionality and if you see currently I'm on transaction base but it is not showing the transaction as active so in order to do that let's just start with making it clickable so I have a path called this and what I need to do is on this div click on click I need to run a function called on on click function which is an aror function and uh what we need to do is we need to import use router from nexc and in order to do that we need to make this component as a client component slowly default next just make every component as server component and the top level component for this also needs to be a client component so now that we we have save it we will see that we have a unclick functionality so if I just do an Aller and then the path name will see that dashboard transaction payment and Etc so now we need to go into that path so if I click on router. push and then path so if I refresh this page if I click on dashboard I can go to homepage transaction will take me to a transaction payment will take me to payment page and then account so then so now the navigation is working the next thing would be looking at the Active state of a particular sidebar so basically since I'm on account page the account page should have been active like here so if I go on accounts the accounts is active so in order to do that what we need to do is we need to use another hook called use memo and what we can do is we Define a new variable called is active and basically use memo is a hook which runs whenever the dependency changes and then we can return any value from here and then that value will be assigned to active so what I mean by that is I can pass path and and the other thing that I need to do is I need to import the use path name so this gives me the path name and then path name so basically if I pass path and path name what it does it it reruns the function inside of this used memo and then I can return any value which is being assign to is active so let's do a simple thing which is like return if path equals to path name then it is active else it is not active so once I do that what I need to do is I need to make this class Dynamic so I can pass this string I can remove this so what I need to pass in here is uh uh so if is active then then only make text sidebar active and make background color so if I go here I can see that those are the only two change that is being done whenever an account is so if I save it what you will see is if I refresh this page you'll see that accounts is being rendered on that level but I can still see that text sidebar is not being active for some reason let me look into it but you can see that the background color is being applied so if you if you look into my code now you can see the account is being active and if I go to payments you will see that payment is active even if I refresh this page the payment is active and then soon same for transaction dashboard and accounts so this is working which is a good thing but and everything is working fine as expected inside of it but you will see we have few issues one is it is being it is sending me to help page which is not good and then site setting space but what I need to do is I need to have to expand it so now we need to look into the sidebar items so let's get started for that since we have the uh sidebar working for the item so if I go to transaction I have transaction if I go to payments I have payments the active is also working the hover state is working everything is working as expected uh we can start looking into the submenu items if you look into our existing solution that we need to create uh so we can expand the menu and then we can expand again and then click on any particular menu and then it takes on to security and then it shows that menu here so even if the security is not matching with the stop level path but it is still showing as active so in order to start working on this functionality let's create this expand functionality initially so in order to do that you we need to create a new State called expanded and we can click on expanded and by default it will be false and we are already having used client so we don't need to do that so what we need to do is whenever we are clicking on a particular item so if that items contain a lot of sub item inside of it then we need to expand it so if items and items. length is greater than zero then set expanded equals to true so in order to test it let's just create a new test thing so let's say if expanded then render something like expanded and S Sub menu items and let's just return it so basically if I go here refresh the page I can see that when I click on settings it just so expanded and so some menu items and then same for help but it is not collapsing in order to do that what we need to do is is instead of passing through we need to pass expanded so basically what this command does is if expanding equals to true then it passes false so it does opposite of what we already have so now what happens if if I click on it it just goes expanded and goes away so it's a nice thing to have inside of it let's just the small thing as if class name so if expanded then we have rotate something like 180° or don't rotate it so basically if so what is happened is so if you see initially the arrow is downward but if I click on expand it is showing this way so we can do that using using this rotate command we can also add a duration of something like 75 to make it a bit slower so it shows something like rotating if we add 200 you will see how it is being rotated so it's a pretty nice animation to have in our application translate something like this so now we need to render the sub menu here let's just start by rendering the items so if items and items. length is greater than zero then what we need to do is we need to Loop through items and then map it if expanded is true and then we have items then let's just try to render it so let me try to do a simple render with item. name and then in order to remove the error or warning sign let's just pass key item. path so basically now I can see I am rendering all the small components or the sub menu inside the settings and then when I do this it is dynamic for for that settings so next thing that I think I can do is I can create a sub menu item. TSX so this is like a new item for the sub menu Sub menu item and instead of rendering a p i can render a sub menu item and in order to remove the I need to pass that b so now you will see that I will just render this component instead of that Pap pass item then let me copy this interface and then paste it here and in item let me pass item I Sub menu item okay so it should be something like this and if I destructure it so if I get name from this item and if I try to render this name here you will see that I will have similar thing let's let's start to work on CSS part of it so you will see that we have a gap on the left hand side for it and then we are rendering the items here so in order to add that Gap let's add it here so if I create a new Dev and then I can pass this function here and this Dev will have a flex Flex column I will have a space of one and I will have a margin left of let's say 10 so if I save it if I go here you will see that I have this security notification and if I go in the sub menu uh let me replace it with Dev and let let's make text small okay so this is good and for some reason I'm just rendering uh it's taking a bit more gap for the top level than the small level I need to look into why that is happening but oh so I need to give a why yeah so now that is working correctly and then try to complete the CSS of it if I go here I think we have a bit more gapping on this one now if I save it okay this looks it nice if I need to work on CSS for it what I need to do is I need to make it I think this looks good uh but I need to add add a hover state so basically on Hover I need to make this sideb active color and I need to make it font semi bold so we will have that replicable step I also need to make the cursor as a pointer okay this looks much more like what we already have I think it has a bit more Gap so what I need to do let's say I need to make it two okay so this is now properly replicated for the existing solution functionality UI part of it is being completed so if you look into it we have the cui uh the hover state is also working uh but now what we need to do is make it clickable so if I click on it nothing is happening as of now so let's start with that and let's say I also need to make this so if I am in the setting then this should be Auto selected and then should be highlighted so we are missing those thing so let's add a on click event on here create a function called on click and it will be just uh we need to export path from item and the next thing that we need to do is we need to use router from Nex CS should be next navigation with next app and if we are using next navigation we need to use use client so whenever an on click happen we need to router do router. push to specific po so if I save it and go back let's say I refresh my screen and let's say I'm in security you'll see that I'm being going there so the navigation is now working let's work with the active state so similarly like before what we can do is we can copy this code and use it here we need to import the used Memo from react and then what we need to do is we need to use the same thing for the use path and then import it so basically if I need to make this Dynamic uh what I need to do is if is active equals to true then I need to make text Side Bar active and font semibold else nothing or what I can do is I can just add an end operator that should work so if I go here if I refresh my screen you will see that the security is being highlighted if I go to General the settings is highlighted if I go to notification the notification is highlighted same for fqs support and contact us but one thing you will see is if I go into previous solution you'll see that this is highlighted along with the top level menu also so but that is not happening here so if I'm on security I can see that this is not being highlighted so let's work on that so if I go in items what I need to do is so in is active condition where I'm checking checking this I need to check if items and and if items. length is greater than zero so basically if the current item contains any submenu or not if yes then what I need to do is check if um if I find any items with the current path name so let's say item then start find and where item equals to item do path if if it matches the current name then if if item or I can what I can do is I can add this into a if condition and then if it finds then return true uh yes so basically what what it is doing is if there is item and which is basically referring to if there is any Sub menu inside this top level menu and if any of the path of the sub menu matches the current path name then it is returning as true so I need to do this also and what what I can do is make it more simplified I can just return and that should pretty much B let's try to save it and I if I refresh the screen no you can see the security inside of it uh the other step let's do here is if items if the items is found then set expanded make it expanded and then return true so what it will do is if I'm inside the security it will auto expand the settings and then then say I go into homepage contact us refresh the page so now it is working so if we look into the current project I think we have everything that we need the only thing that I can see of is I need to give a bit more space at the top margin top maybe two okay so that it has this Clarity inside of it let's make it three maybe now that we have completed our tutorials you can see the final product it says I have this nice sidebar I have home you can go to transaction payment accounts I have this collapsable and expandable functionality for submenu items inside settings I can go to General Security notifications and same for fqs support and contact us if I'm inside a particular sub bar and I refresh the page if you can see it is auto expanded for that particular but if I go to accounts and refresh the page the accounts is only shown and the help is automatically collapsed so that is how it works if you have watched till this time of the video thank you very much for watching my video let me know if you have any other application on tutorials that I need to create on I will be more than happy if you leave a like And subscribe to our Channel it will help a lot until next time thank you

Channel: Dev Inteprid

Views: 7,025

Keywords: nextjs tailwind sidebar typescript

Id: zkGqeF3u-4E

Length: 56min 9sec (3369 seconds)

Published: Sun Dec 31 2023