Let's create a Responsive Sidebar component in React.js using Tailwind CSS. So in this video, we are going to create this Sidebar component that is look like a Twitter Sidebar. If you will see there, Twitter Sidebar, all these options like Home, Explore, Notifications and Messages and there is a logo. So in my Sidebar, I have put a logo in that place and there is a Home, Explore, Notifications, Messages. And we have also applied a hover effect and we have also applied a extra feature that is not in the Twitter. That is when we click on that button, so this will close the sidebar and when we click again on that, so this will open the sidebar. So this will act as a toggle button. And for example, if I will click on that Home page, so you can see that our Home icon is filled and Home text is bold. And we are on the Home page. Suppose if I will go to the Profile page, so you can see that our Profile icon is also changed to the Fill and this text is in the bold and we are on the Profile page. So in this video, we will also learn how to create a layout and inside that layout, how we can put our Sidebar component. And we have also applied a Dark Mode in that, suppose if I will convert my system theme into a Dark Mode and so you will see there. On the Dark Mode, this will look like that. So let's again convert this into a Light Mode and let's get started. So first of all, go to the place where you want to create your Sidebar component. So in that case, I want to create my Sidebar component in that location. So I will create a new component and here I will name this Sidebar and YT. And after that, I will go to that folder and on the location bar, I will open a CMD here. And after that, I will go to my browser and search for npx create next app latest. And after that, we need to go to the API reference, create next app. After that, we need to copy that command npx create next app at the right latest. And again, we need to go to our terminal and paste our command like that. And after that, we need to put a dot. Because we have already created a folder, so this will not again create a folder inside that. This will extract all the files there. So that's why we are adding a dot there. And after that, press enter. And after that, press Y and enter. So this is asking me, would you like to use TypeScript? So yes, we will also use our TypeScript in this build. So I will say yes. For ESLint, yes. For the Tailwind CSS, yes. And would you like to use source directory? So yes, we will also use a source directory. So I will just press enter, enter all the default options. Now our next JS project is successfully installed. Now let's open our project in VS Code. So for that, I will write code dot. So that will open a VS Code on that location. Now we will open a terminal here and run our project. So I will go to my terminal and write here npm run dev. So my port 3000 is already occupied. So this will open my project in localhost port 3001. So let's copy this and go to our browser and paste it like that. So currently if you will see there, by default, we are getting all the default styling from next JS. So for now we will remove all the default styling by the next JS and after that we will create our sidebar component. So for that we will go to our page file and remove all the code from there. And for now we will just print hello there. After that we will also go to our global dot CSS file and remove all the default styles from there. And we will save. And after that if you will see there, we are just getting a hello. So first of all we will create a layout. Inside that we will create a sidebar component. So now we will go to our layout and firstly we will configure our layout according to our sidebar and main page. So we will go to our layout like that and here we will create another dev there and we will take this children inside that dev. There will be our sidebar component. So for now I will just write here dev and inside that dev there is a sidebar and this is our children. So we will also wrap up our children like that and after that we need to make this side by side. So we will give this flex. And if I will save my code, so you can see that we are getting a sidebar and hello side by side. So what is going on there? So if you will see there, we are currently on the layout and in our pages file we have written a hello. So what is going on there? So all the pages will act as a children and here our sidebar will always be fixed on that left hand side. So if you are confused there, don't worry I will create a sidebar comment then you will get everything. So for that on the source folder we will create a folder components and on that component we will create a component right bar.tsx and after that we will write ts rfc. So this will create a sample component like that and we will name this component as a sidebar and if we will see our final output, so you can see that we are getting a border on our right hand side. So for that firstly we will make our sidebar will be a minimum height of screen and max height will be also a screen and if there is more data, so we will make it overflow y auto and what we will do? We will give this width fit on the md screen, we will get a padding right of 8. For example if you will see there currently we are on the md screen. We have applied a padding right 8 on our right hand side. So padding 8 means 32 pixels of padding and after that we will write padding right 3. On the normal mobile screens we will get of padding 3 and padding top will be 2 and this will be a flex and this will be a flex column and gap will be 3 and main thing that is border. Border right will be 1 pixel like that and padding left will be 50 pixels. One thing that we have forgot, we have created our sidebar component but we are not importing it. So again we need to go to our layout that is inside the app folder and after that we have to import our sidebar component there like that. So when I will save my code, you can see that we got our sidebar component there. So currently what we have applied, so let's make it side by side and see. So we have applied a minimum height of screen and max height will be also a screen. So screen means 100uh and after that we have also applied if in that case we got more data. So this will be overflow so we will get a scroll on y axis that's why we have applied a overflow y auto and for now we are using a width fit so that's why we are getting this width and after that on the MD screen we are applying a padding right of 8 and on the normal screens padding right will be 3 and after that we are giving a padding top of 2 and flex and flex column. So flex column will be allowing all our items like in the form of stacks and after that we are giving this a border right of 1 pixel and padding left of 50 pixel. So you can see that we are getting a padding left of 50 pixel and we are getting our hello from our page file. So if we will go to our page file so you can see that we are getting a hello from there. So for now we will write a home page there like that. Now firstly let's create a cn utility function that we will use in this project many times. I have also created a video on that cn topic but here I will again explain you what is a cn function if you want to know in details so I will give that video link in my description so you can refer from there. So for now in our source folder we will create a lib folder and inside that we will create a utils.ts and inside that we will create our cn function. So firstly we need to export our cn function. So we will write export function that will be a cn and after that we will return this. So for the cn function we need our two packages. So first one is a tailwind merge. So we need to go to their npm website and copy the installation npm code from there and come to your terminal and install our tailwind merge. And the second package is clsx. So for that again we will go to their website and copy the npm code from there and paste it like that. So this will install the clsx. So clsx is used for conditional classes and tailwind merge is used to resolve the merge conflicts in the tailwind classes. So to create a cn function firstly we will import tw merge from tailwind merge and after that we will import clsx there and inside that we will pass these inputs. So we will copy this input from there that we are getting in our selection from here. And we also need to pass our input from there and we also need to pass our type of that input. So we will get that type from there. I am copying the type from there and I will just paste it there. And we will import this type. I am just pressing a control space so I am getting a selection and after that I will just click on that. So we have imported our class value type from clsx. Now our cn function is completed. So let's again come to our sidebar component. So we will wrap up all of our code in that cn function like that because we need a conditional classes. So I will explain you why we need a cn function there. And here we have imported our cn function from lib folder and utils file. So first of all if you will see the output so firstly we are using a logo. So from there we will get this logo. So for that we need to go to the react icons. So like that I will go to the react icons and search for twitter. So you can see that we got the icon from there. So I will just click on that so this will copy this name. So first of all we need to create a logo. So I will just comment there this is the logo and I will paste this name like that and convert this into a component. But before that we need to install that react icons. So for that I will go to their homepage and copy this installation code and come to my terminal and paste my npm command like that. So now we have installed our react icons. Now we need to import this icon. So how we can import this icon. So firstly we will write import and curly bracket inside that we will paste that name and after that from react icons and we need to use fa. And you can see that we are getting an error. So I will just press control space. So we need to use fa6. So now our error is gone and we got our twitter icon. Now we have to increase this logo size. So for that we will use a class name there and inside that class name we will write text 5 excel like that. So you can see that we got our logo size increased and for now we will remove that sidebar text. And in most of the cases our logo will work as a homepage. So what we will do we will use a link tag there. So whenever the user will click on that logo, so this will redirect us to our homepage. So for that we will use next-years link tag. So we will write it like that and we will import it from next link. And after that we will wrap up our logo with link tag like that. And here we will use href and we will pass a slash. So slash means this is the homepage. So if you will see there on the bottom left hand side there. So when I will hover over that this is showing me localhost 3001. So this is currently this is the homepage. And if you will see there we are also getting a hover effect there. So for that what I have done I have created another component for the hover effect. So firstly let's create that component. So for that we will create a hover component there. So we will name this function and after that hover container. Inside that we have two props. Firstly we need to destructure and again we need to write children like that. And the second prop will be a class name. So this will be like that. And what we will do we will just copy this and after that we will create the type for these props. So I will just put colon there and paste our destructured props there and after that we will create a type. So for this we will use a react dot react So for this we will use a react dot react node and for the class name this will be a string type and our class name will be optional. So that's why we are writing this and there is a spelling mistake. So our types is completed. Now we will return our div and inside that div there is a children and after that we will write class names. So class name will be there, padding three. So this will be the all around padding. Let's also use a hover container there. So we can see every CSS in action whenever I will apply and save my code. So you can see that we have just applied this and with the help of padding three we got padding all around there. And after that we will apply a transition all and after that we will apply a rounded full and cursor pointer and on hover the bg will be gray 200 and width will be width. So when I will save my code so you can see that when I am hovering over that. So we are getting effect like this. So you can see that this is also like that and we have to also apply for a dark mode. So for the dark we will write it like there dark and after that hover bg will be a zinc 900. So here if I will convert this string to a dark mode and when we will see. So we haven't applied for all other pages so that's why this is not converting and only this is converting. So let's also apply a dark mode for all the pages. So for that we will go to our layout page and inside our layout here we will write on the dark mode text will be white and on the dark mode bg will be black. So now you can see that our icon is also changed into the white because we are using a react icons and in the react icons we can change the icons color with the help of using simple text property and our dark mode is also working perfectly fine. Now let's again come to our sidebar component and here on the hover we need to also add other CSS like I will explain you what is the use of that but we need to apply this it now. So there's a group property. So for that we will write group and after that on the dark mode this will be a bg zinc 900. So this will be a group hover and if this will be in the dark mode so we need to change the bg to be a zinc 900 like that and on the normal group hover we need to make it bg gray 200 like that. So we have just applied the same background color on the dark mode and the light mode but we have just added an additional property that is group hover. I will explain you in the further component that we are using the group property. So again let's convert this into a light mode and see our output. Now what we will do we will create this component. If you will see there currently our text is not showing only icon is showing because in this sidebar I have applied like if this will be in the mobile or tablet screen so our text will be hidden but if I will zoom out so you can see that we got our toggle button and also our text. So we will see how we can apply this. Now we will create this sidebar item component. So for that we will create another function there and after that we will name this side nav item and after that we will write a return and there will be a div and inside that div we have an icon and we have a label. So we will firstly write comment it there like icon and label and firstly we will style our parent div so this will be a flex and gap will be a two and this will be items center, cursor, pointer and after that we will style our icon. So for the icon we will again create another div inside that icon. For now we will use that icon and for now let's remove this class name from there and here we will use a class name 35 pixel that is a max width and height of 35 pixel and the text will be a 3xl and when you will see there we are not importing this sidebar item anywhere so I will just copy this and come to my sidebar component. This is my sidebar component and I need to paste it there like that. So now you can see that we got our sidebar item there and if you will see there we are also getting a hover effect there. So what we will do we will just copy that component and wrap up our sidebar item with that component like that. So these are the items, side nav items like that and if you will see there we are also getting a hover effect this one and we will change this icon later I will show you how we can do that easily and now we need to add a label. So for the label we will create another paragraph tag and inside that paragraph tag for example let's take it as a home for now and here we will add a class name and inside that class name we have a text excel and this will be a hidden by default and md this will be a block. So if I will make it normal zoom so you can see that this is hidden but if I will come to the md screen so this will show me this like that and we need to also add a transition all property and after that we will create this button. So with the help of this button we can easily close our sidebar component like this and after that I will show you how we can easily create all these items and easily change these icons with the help of array and objects. So let's create this button. To get this icon we will go to react icons and search here arrow left. So if you will see there so we got this arrow left icon like that. So I will just click on that icon and come to my sidebar component here we will create our toggle button. So I will just comment there toggle button and after that I will just paste it like that and after that we need to import our icon. So I will just paste import it like that and now we need to make this import it from rie. So whatever the name in front of that we need to try it or write it there and in some cases we will not get with the help of that starting name you can try it by press control space so we will get session. So in that case that is the fa6 like that and if I will save my code and come to there so you can see that we got our icon there. Now let's style our icon. So for that we will use a class name there and inside that class name this will be a text gray 400 and we need to add transition all property and this will be a text for excel like that and if you will see there we are also getting this hover container there also. So what we will use we will just copy this container and wrap up our arrow left with that container like that. So now we got our hover effect also there. Now we need to use a use state like when the user will click on that button so this will collapse and again when the user will click on that button so this will open and if you will see there so in that case we are getting this icon on the right hand side but when this is closed so we are getting our icon on the start or in the center. So let's firstly create a user state so that we can easily toggle our side menu. So for that we will create a user state snippet so for that we will create a user state snippet like that and after that we will name this is sidebar open and this one will be set sidebar open. Now we need to also import our user state so we will import our user state from react like that and by default this will be open so we will make this true like that and after that if you will see there this icon is also changed. So when this is closed so this arrow icon will be on the right hand side and when this is open so this arrow icon is on the left hand side. So for that we need to use a conditional classes that is rotate so we will cut these classes and now we will use our cn function there and now we will put comma there and we need to use condition like if sidebar is open so we need to rotate if sidebar is closed so this will be of all so that's why we are using a not operator there and after that we need to use a class name that is rotate 180. So when the user will click on that button so we need to use the on click and on that on click we need to use arrow function and inside that arrow function we need to use a set sidebar open and when the user will click on that button so we need to toggle our sidebar component so for that we will use a not operator there so what this will do whatever the before value that sidebar contain so this will make it opposite for example currently this sidebar is open so this will make it as a false so this will be a closed so when I will save my code and come to there so we are getting a error so error is you are importing component that needs use state it's only works in client component so we need to convert our component into a client component so for that we will use a use client there like that and now our error is gone so if you will see there now our this toggle button is working if I will click on that button so we are getting this rotate effect like that now what we need to do we need to create a props for our side nav item so for that I will come there in the top of our sidebar component and here I will create an interface and inside that interface we will name this like side nav item type and inside that if you will see there we have an icon so we will use the icon property like that and inside the icon we have a normal icon so and after that we have a fill icon so and this will be the type of react dot react node and this also will be the react dot react node like that so if you will see there on our left hand side we are getting an icon so if you will see the communities so we are getting the icon there this is not filled but when I will click on that page so now our icon is changed and now we are getting a filled icon so that's why we are using a two icon there first one is icon second one is a fill icon and also let's correct this name that is icon and after that we have a label so this will be like that and label will be the string type and after that we have a href and href will be also the string type so href means the link or the address for example if you will see on my left hand side bottom there so on the hover we are getting the pages so on the href we need to pass the page on which page we want to redirect so that's it for the sidebar nav item component now we will pass our type there like that and we will name this as a props and after that we need to replace this Twitter with our props.icon.icon I will explain you how we can conditionally render a fill icon and a normal icon so for now let's just use a icon and in the place of home we will use a label so for that we need to use props.table like that and now here we will use a link tag so that we can easily pass a href from there so we will pass our href like props. href like that so we are getting an error so because we haven't passed our props so for that we will pass our props from there for like icon we will pass and now we will pass other props like href and label so label will be for example home now we are still getting an error so one thing I forgot like we need to pass only one of these so for now we will make it as optional and now when I will save my code so my error is gone but we are getting an error there so we are getting error because there we need to pass our these two icons like that so for now what we will do we will create another object there and inside that we will pass our fill icon like that and after that we need to also pass a normal icon so when I will press control space so I will get a suggestion and after that like that so for now I am just passing both fill and normal icon this Twitter icon further I will show you how we can change this icon easily so now what we need to do so when we click on that button so this text should be hide and the sidebar width should be decreased so let's see how we can do that so here we will destructure all of our props and add additional and add additional prop that is is sidebar open so we will create is sidebar prop so I will just copy this from here and paste it there and I will give this type to be boolean like that and after that there is a spelling mistake there now this is correct now we need to destructure everything like that so I am just pressing control space and enter like this now we need to also change this name this is a spelling mistake so this will be a href so this will be the href and I need to also correct it there that is like that and after that we need to correct it also there and if you will see there this is saying that one props is missing so this prop was missing now in that place we need to pass this variable that the state that we have created so we will pass that state in that component and from that component we will get it there and here we need to also characterize spelling so this will be the href and here we need to pass icon dot icon and this will be the question mark so it means maybe sometimes we will get undefined so that's why we have put it a question mark there and in the place of props dot level we need to just write level like that and here what we will do we will copy this condition is sidebar open and write it like that with the end operator and if the sidebar open is true then this paragraph will show and when I will save my code and click on that button so you can see that now our sidebar toggle is perfectly working fine so what is going on there when the user will click on that button so we are setting it opposite value if this is true so we are setting it is so we are setting it as a false and if it is false so we are setting it as a true after that we are passing that condition in that component side nav item and from there and after that we are just conditionally sending it to there like that now let's also update our main container where we use some conditional classes so we will also use their is sidebar open and if this will be open so we need to give this a width of on MD screen mainly this will be a width of 300 pixel like that so this will be the width on MD like that so if you will see there we are getting a width of 300 pixels like that and when I will click on that button so this is going to a normal width like that now that's come our main part we will create our data for our sidebar component like we will create an array and inside that array we will store a logo and label for that particular page for example for example in the case of that home page we will store a home page icon and home label like that we will store a search icon and explore label so let's see how we can do that so for that we will create an array and we will name this array will be a sidebar items and this will be the type of this side nav type and we are and we are creating an array so we will use a square bracket like that and after that we will press equal to and inside that we will create our objects so if I will put curly bracket and put control space so you can see that I'm getting all the possible solutions that we need to add in this data so firstly we need to put a href on the href for example we are creating for home so for home href will be a normal slash and after that we have a label so label will be a home and after that we have an icon so icon and inside that icon we have a normal icon and after that we have a fill icon so in the place of icon and fill icon we will add our icon so for that we will go to react icons and search for home and if you will see there see this logo so we will search for this logo so I already know the what is the name of that logo so I will just directly search for that so you can see that I got that logo so I will just copy that name and paste it there like that and convert this into a component and likewise I will again copy the name for the fill and paste in that place and convert this into a component like that and now we need to import these icons so for that I will write here icons and now we will import our icons so what we will do we will use import keyword and curly bracket inside that we will write that name and after that go like that and we need to also import a go home fill so for that we will write it like that so you need to find your icons from react icons or you can also use any SVG icons that you like you just need to convert these icons into a react components and after that you need to put in that place if you don't know how to convert your normal SVG icons into a react components I have already created a video on that topic I will give that video link on my description so you can refer from there now come to our project and now what we will do we will map over that data so how we can do that so if you will see there I will collapse everything so this is our logo and this is our side nav items and this is our toggle button so I will also collapse this our toggle button and here we need to map our sidebar items so for that we will write curly bracket and sidebar items dot map and inside that map and after that we will use arrow function and after that we will wrap up our sidebar item like that and here we need to pass a key and here we will use a data so for the data I am just giving it D and for the index I am just writing a I so in the place of key we will write I so first parameter will contain data and second parameter will contain index so index will be like whenever the data will map so first index will be a zero and second index will be a one and like that one two three four five six so the key should be a unique so that's why I have passed a index there now in the place of these icons and everything you need to pass this data so what we will do we will pass D dot icon like that and sidebar is already and sidebar is already filled now we will pass a href so D dot href and in the place of label we will use D dot label like that and you can see that when I will save my code so we got our home icon and label now let's again come to our side nav item now we have to update some additional things there so I will explain you what need to add now what we need to do we need to check if the user is on the home page so this should be an interactive state and the icon should be filled so how we can do that so for that we will use use path hook and we will import that use path hook from next navigation so I will show you how we can do that so we will just simply write use path like that and I will press just enter so now our use path is imported so we will copy this use path and come to our side nav item component and inside that icon we will create a variable called path name and path name equals to use path name and function and after that we will again create another variable like is active is active page so this will be equals to my path name and equals to equals to href so if the path name and href will be equal so this condition will true so in our path name this will for now this will store a slash slash means this current page for example if I am on the any other page so this will store that page and on the href we are getting that href from our data so for example in our data this is the slash so currently we are currently we have only one data so that's why we are we will just get only slash so if this will condition match so what we will do we will show a fill icon so how we can do that so we will copy this is page active and if this is active so we will use a conditional operator so we will show a fill icon icon dot fill icon like that otherwise we will show a icon dot icon like that and when I will save my code so you can see that we got a fill icon there and we need to also add a text bold there so for that we will use a cn function there and here we will use a curly bracket and pass all of our default classes and after that we need to conditionally pass if this page is active then we need to make this text bold so I will just copy that and here I will paste and use an end operator and pass the class font bold like that and now you can see that we are getting a font bold there now let's also add our data for like search and explore and here we have to also add one class name that is padding right uh four so when I will save so see there we are getting a padding there if I will remove the padding four and when I will hover so we are not getting the padding when I am hovering over that so that's why I have added a padding four on the right side now let's add a second data for our search so I will just copy the first data and put comma there and the second data there and here this is the explore page so I will just write explore and on the place of home I will write it explore and here we need to use a search icon so again we will go to the react icons and find that icon I have already found my icon there so if you want to change icon according to you you can find it from there easily so for now I will just copy that name and replace with this one like that and now I need a bold icon so I will search for fi search and I will copy this icon from there and replace it with now I need to also import it these icons so how we can do that I will just copy this above code and replace it with this fi search now we need to also put fi there and now we have to also import a ci search icon so we will just replace it with this one and put a ci there now if I will save my code and come to that page so if I will click on the explore page so we haven't created our explore page so that's why we are getting this page is not found but our sidebar is on the active state so if you want to create a explore page so we just need to go to the app folder and here we need to create a folder of that name that we want to create a page so in that case we want to create a explore page so I will just try to explore like that and inside that after that we need to write a page.tsx so this is mandatory to write a page.tsx if you write any other name or any keyword so this will not work so after that we need to use a tslfc normally like that and here I will write explore page and after that copy this and paste it also and save it so now you can see that we have also got our explore page there now let's come to our layout and give some padding there so this will not like look like this so I will just write here padding it and when I will save so you can see that currently we are on the explore page and if I will click on the home page so we are on the home page and now our sidebar collapsing is also working and like this so I will just make it fast and like that I will create data for all these now we have imported all of our icon and label there with the help of react icons and inside that if we want to change anything we just need to change into that data so I will just collapse this and almost our sidebar component is completed but one thing is left if you will see there so when I will close that there is no animation we are getting so for that we will use auto animate so for that I will go to my browser and search for auto animate for mic and here is the website so firstly we need to install this npm package so I will just copy it command from there and come to my terminal and paste it like that so this will install my auto animation package and after that we need to import that package so for that I will copy it from there and paste it like that now I will again copy this const animation parent use animation use auto animate hook from there and come to my side nav item component and inside that I will paste it like that now what I need to do I need to copy that parent animation variable from there and check where our condition is changing or we can say that ui is changing so in that case if you will see there we have put it is sidebar open so with the help of this we are hiding our text so what we will do we need to find our parent component of this so in that case link is a parent component so here we will use ref and inside that ref this is a ref means reference and inside that reference we will pass a animation parent like that and if I will save my code and come to there so you can see that we got a animation like that and if you will see the final output so our toggle button is on the right hand side when this sidebar is opening so let's also fix this one so for that we need to go to our sidebar component and inside that sidebar component this is our toggle button component so here we will create another section and inside that section we will use a class name and inside that class name we will write this flex and width will be a full and normally justify will be and justify and so now you will see that we got our icon on the right hand side but if you will see there when this is closed so this is not coming in the center so for that we will use our conditional class and make it into the start when this is closed so for that we will use a cn function there and inside that we will paste our default classes and if the sidebar is open means when this will closed so we need to add our additional class name that is justify start and when I will save my code and we will close this now we are getting this in a proper alignment and see there when I will click on that home page so we are on the home page if I will click on the profile page so we are on the profile page but profile page is not created so that's why we are getting this error page not found and if I will convert my computer theme to a dark mode so this will also convert into a dark mode and this is perfectly working fine so with the help of this you can easily create a this responsive sidebar component and there you have it your very own responsive sidebar component made up with React.js and Taven CSS if you enjoyed this video don't forget to like share and subscribe for more contents like this until then I will see you in next one
