Sidebar Navigation Menu using Tailwind CSS | Beginners Guide to Tailwind CSS

hey guys welcome back to my youtube channel today i am going to show you how we can create this sidebar navigation by using tailwind css and let me show you how this works so here you can see this arrow after clicking over here this section is getting reduced and we can only see the icons right so that's how it is expanding then we have this search bar this is a basic pretty simple search bar and then we have the menu here we have the sub menu items as well and when this sub menu items is opened that time if we close then the sub menu items is getting closed and also when we are opening it that time it is staying on that position which was before so that means previously we have opened it so that's why it is opened and if it is closed then when we are opening it that time is also it is closed so this is the ui which i am going to create today by using tailwind in react and also let me tell you that if you are interested in tailwind css then previously i have created a tailwind css tutorial where i have shown you how to create an ecommerce website ui by using tailwind css and that was on basic html but you will get to know the tailwind so i will provide the link of that tutorial in the description below or you can check that out from the i icon of this video so if you are interested in this kind of tutorial then hit the like button subscribe to my channel for more tutorials like this and don't forget to hit the notification bell icon so that you get notified whenever i post a new tutorial on this channel so without wasting any more time let's get started with the tutorial [Music] ok so first we need to create the project and because of that i am at delwin css official website and here let's click on get started and here we need to go to the framework guides and i am going to choose this create react app so we are going to create the react app so let's follow these steps and here let's open the terminal and in the terminal first i will go to this directory where i'm going to create the project and let's copy paste the command and i will provide the project name as tailwind nav now hit enter so here it is getting created and then we need to use this command under our project and by using this command this tailwind.config.js file and postcss.config.js file will be created so now it has been created so let's go to our project and let me open it in my visual studio code okay so it has been opened and now within this project we need to provide these comments so by using this first command tailwind css post css and auto pixel has been installed in our react project and then by using this command those two files will be created those config js files so here you can see this post css and tailwind config css files has been created now after that within the tailwind config js file we need to provide this now save it and after that let's copy this one and within our index css at the top i will use this one now save it now we can start our project by this npm run start and here we can see our project is running now let's go to the app.js and here let's get rid of these things and here i am using functional component so now it's been updated so we can see that it is working perfectly well with our tailbone css classes now i am going to position this code editor and the browser beside each other let me do that okay so i have done that and now we can start creating our ui but before proceeding let me install another package here which is react icons so let me stop this process and here paste this command now hit enter by installing this package we will have lots of icon packages available for our project as you can see here we have bootstrap icon and design icon feather icon flat icon font awesome all sort of icons available we can use icons from this and to use the icons we need to import it first then we can use it so this is for the font awesome icons and if we go to font awesome icons then we will see list of icons available with this package and we need to import that particular icon from the react icons package slash fa so fa for font awesome similarly we have bootstrap icon so slash bs that's how it is present here right so from here we will get the icon list and for specific icon we can get the icon name from here so if we want to select that so that has been copied right so that's how we can add icons to our react project so i have installed it and now we can start creating our project and for that first here i'm going to extend our theme for the colors we can create custom color here and i will create dark purple color and here i will provide the color code after that i will create light white and for this one i will use this rgb a color and by this we are extending our theme and this dark purple light wide will be available for our use now let's get rid of it and i will create a div this will be the rapper div and here i will provide the flex so that means display flex okay and within it i will create 2d the first one is sidebar and the second one is home page now save it after saving it it is not updating here because we are not running our project so npm run start so here we can see those two sections have been created for the sidebar i'm going to use this dark purple color in the background okay so the color has been changed now let's change the height of it and for this homepage section i'm going to provide a padding and for this home page text i'm going to put it within h1 tag and for this h1 let's provide this font size and i will change the font weight to semivolt now we can focus on this navigation section so first i'm going to provide a padding here so here is the sidebar text we will not have this text we will create the actual component instead of this text and i am going to provide extra padding at the top of this section so that's why i have used pt okay this have been moved slightly bottom and i need to use a width of it so that's the navigation section and when this section will be reduced that time it will have this width so it will be dynamic but by default it will have this width now let me create that icon here by which we can make this sideways section expand and reduce so here first we need to add a icon so i'm going to use bootstrap icon so let's copy this import command and for the icon i'm going to use this icon so let's copy it by clicking here and paste it here so we are importing it and then i can use it here so here we can see the icon but it needs to be placed over here so instead of this text white it will be background white for the text color i will use this dark purple color increase the font size of it and make it rounded so i am going to use this rounded full and now we need to position this here and that i can do by providing this absolute position and at the right it will be minus 3 so that means minus 12 pixel and from the top it will be 36 pixel and to use this absolute for the wrapper div i need to use relative so now it has been pushed here but here we can see a problem that at this side we don't see any proper definition of this arrow so i need to provide a border here so it will be a border and for the border with i'm using one pixel if i want to make it thicker then i can use this number so by this it will make 2 pixel or 4 pixel but i want to make it 1 pixel so i am using this border and for this border color i am going to use this dark purple color so now it is looking good and for the cursor of it i am going to use cursor pointer so right now when we are here it is not looking like it is clickable but after providing this cursor pointer it is changed to this hand icon and now it seems like it is clickable so now make this thing dynamic and for that first i need to import use state from react and then i can use that and for the default value of it i will use true so here this w72 is defining the width of it so we need to make this dynamic and for that we can use template literal here and now we can check for open if it is true then we will use this w72 if not then we will use w20 and we can get rid of it and we can update this state by providing this on click and for this on click function we can provide this set open and whatever the open value will be it will set it to opposite of that so that mean if it is true that means after clicking over here it will become false if it is false then after clicking over here it will become true so now save it now after saving it let's see so here we can see that it is getting reduced and expanding it is doing the functionality but it is not looking good that's why we need to provide duration here here i am going to provide 300 millisecond duration so in that time these changes will be done so now it's looking good right and also one more thing i want to do for this icon also i want to change this thing to template literal so i want to make it dynamic so if it is not open that means open is set to false that time i want to rotate this component to 180 degree so that means now it is changed to right arrow so that indicates now it will go here and when it is open it will go at the left side right so this thing is working perfectly fine now after this within the sidebar div i will create the logo and for the logo here we need to use an icon and that icon will be this and design icon and that icon name will be this so i have copied it and use it here and here let's create a div and within this wrapper div i will use that icon for this repetitive class name i will use inline flex for this icon let's use a background color bg amber 300 okay so here is the icon for the size of it i will use this size and i will use the border radius so that's why i have used rounded so border radius is 4 pixel use a cursor pointer display of this one will be block and i will use float left now beside this i will provide a text tailwind for the color of it i will use white color for font weight i will use font medium for the text size of it i will use this size now let's provide some spacing here and that i can provide by providing merchant right to the icon okay and now you can see that when the sidebar is not open that time this logo text is present here i don't want that so that's why here i want to use the open variable so i need to change the quotation to this thing and then i can use open if it is not open then i will use scale 0 let's see so this is how it is working right so when it is opened that time it is showing the icon along with the logo text but when it is not open that time it is only showing the icon and also i want to provide a duration here it's showing the transition in a proper way right and along with that i want to provide another animation here for this icon and for that also i need to change this quotation and for this one also i want to rotate but i want to rotate 360 degree and that is not present here in this list it only has the 180 degree so to provide custom value we can do it like this now save it now let's see okay we are not seeing that because i haven't provided any duration here let's provide a duration 500 so now we can see the animation here properly right so this thing have been done now after that let's create the search bar so for this search bar report div i'm providing flex item center rounded md so that means border radius with 6 pixel and the background i will use this vg light white and for the icon of it i will use this bs search icon which is from bootstrap icons so we have already imported bootstrap now we need to import that particular icon and let's use it here for the color of it i will use text white color so here we can see that let's provide margin top some padding here for the padding left and right i will provide the 16 pixel padding for padding top and bottom i will use 2 pixel so that's how it's looking right now for the size of the icon i will use this 18 pixel and i will use display block and float left for the cursor of it i will use this pointer now after this icon let's use the input field the type of it will be search and now let's provide some class name here for the font size of it i will use this text base size that means 16 pixel let's provide a placeholder here the background of this input field will be transparent and width of it will be 100 percent of the wrapper view text color of it will be white so that means when we will type those things will be invite and i don't want this outline so it will be outline none so when it is focused that time this outline will not be present there when the cursor is blinking that is the focus state and for that state we have provided this outline none and also i want to provide some spacing here so that i can provide by providing margin right here so it's looking good now we need to make it to work with this variable with of the sidebar so we need to use dynamic class name here so it will be like this and let's see when it is closed that time the icon is not showing and that is because we have this input field also present i don't want this input field to be present here so that means when it is not open that time it needs to be hidden okay so it is being hidden but again we are not seeing that and that is because of this padding these paddings are taking this space uh because of that the icon is getting reduced so let me change these things so when it is not open that time it will be px4 otherwise it will be px 2.5 and similar thing for this icon class names also when it is open that time we will have this margin right so now we can see the icon here but it is very little okay here i have made a mistake so when it is not open that means in this moment it will be px 2.5 and when it is open that time it will be px4 so now it is looking good right now after that let's create the menu items so here i will provide some padding at the top and i have created a menu array so these are the menu items which we are going to use so here let's use map function for this menus added and we will get all the item as meaning and also the index now after that i am going to use empty wrapper element and let's create the list element and for each list element we need to provide the key and that needs to be unique id and that we can get by this index and then we need to provide the menu title that we can get from here so here we can see all the items now let's add some classes here so first i will use text gray color the text size will be small and we'll use the flex and item center and i will use this column gap 16 pixel for the cursor of it i will use this pointer and let's use this padding now when we hover over an item that time i want to change the background color of it so that's how it's looking now let's provide a border radius to it and that i can provide by this rounded md and let's provide some margin top to it so now it's looking good now along with it i want to provide an icon and that icon will be dashboard and i am going to use this icon and it has a prefix of ri so that means it needs to be come from remix icon so now let's first import it so let's copy this one and paste it here now we can use it so here is the icon let's use some classes so now it's looking good for this menu title let's use text base the font will be font medium and i will use flex 1 now when we reduce the width of the sidebar that time it is looking like this and the titles are present here which i don't want so that i can do by providing this hidden when it is not open so now it's looking good okay and here also i can provide some duration and then here let's provide another thing which is if menu spacing is present so here if you see here we have this spacing true for these two menu items so if that is the case then we will provide margin top to it actually by default we are providing some merchant top to it but if the spacing is available then the margin top value will be increased to 36 pixel and by default it is having this 8 pixel value now save it and now let's work on the sub menu items so here we have the sub menu so first we have sub menu true and then we have sub menu items at a present right if we have sub menu present then we need to provide an down arrow here so it will be menu dot sub menu if the sub menu is present so that mean if it is true then we will provide the drop down icon and that icon will be from bootstrap icon and i will use this icon so here you can see the icon for the on click of it we need to provide a function but before that let me copy this one and it will be sub menu open and by default it will be false now if the sub menu is present then we want to display the sub menu items so now i need to create that and for that it will be menu sub menu so if sub menu is present then create an unordered list and here we will look for the sub menu items and map through each item of it so here we can see the sub menu titles and here also i will use this similar styling so i can copy paste it here and here i will use px5 so that's how it has provided some space at the left now let's use that set sub menu open function to open it and let's provide another condition here to display the sub menu so if the sub menu open is set to true then it will be visible now save it okay here it needs to be this ampersand sign so now let's see so when we are clicking here that time it is open when we are again clicking here that time it is gone right and here similarly we need to rotate the icon if the sub menu open is set to true that time we will rotate it now let's see so it has been rotated right now one other thing when it is open that time it is showing these sub menu items i don't want that and that i can do by pretty easily by providing open here that means when it is open and sub menu open is also set to true and we have sub menu items then only it will display these items so now save it so now you can see it is already gone but when we open it that time it is already there and also one other thing we can see that it is having a problem which is this thing so here also we need to provide open so it will also be present here only when it is open so now we don't have that and when it is closed that time also we don't have that right so now it is working perfectly fine now we need to provide the updated icons for each items and for that i have another updated array present for the menu and let me use that here so i'm going to replace this one with the updated menu array where i have specified the icons so for each item i have specified the icon and we need to import those icons as well which i have done previously so let me paste those things here so these are the icons which i'm using here okay and let's check those thing here if menu has icon then we will use the menu icon otherwise we will use this dashboard fill icon now save it so now it has been changed to its respective icons for these items right so now it's looking good and with this we are completed with our tutorial so now you can see it is working perfectly well so we have all the functionality present here so this is the tutorial guys i hope you have learned something new from this tutorial if you do so then hit the like button subscribe to my channel for more tutorials like this and let me know by commenting down below if you have any kind of suggestion for me then also let me know and don't forget to share this tutorial with your friends and colleagues and i will see you guys in my next tutorial in the meantime have a great day goodbye

Channel: Pradip Debnath

Views: 49,354

Keywords: tailwind css tutorial, tailwind css tutorial react, reactjs tailwind css tutorial, sidebar navigation menu, sidebar navigation menu in tailwind css, responsive navigation menu in react, tailwind css tutorial for beginners, tailwind css with react, tailwind css with react js, sidebar navigation menu using tailwind css, tailwind css menu design, create a navigation bar in react, create a navigation bar using tailwind css

Id: MszSqhEw__8

Length: 29min 13sec (1753 seconds)

Published: Tue May 10 2022