Building a Responsive Sidebar and Navbar with React and Tailwind CSS

hello everyone in this video we will create a responsive sidebar and now bar using reactjs with Trent CSS so let's check it okay we will create something like this okay let's by default if you would like to just hide the sidebar so just press this button okay so it will hide the sidebar for us by pressing that button again it will show us okay and let's resize the um Chrome browser okay let's close it and for the small browser it will looks like this okay for the mobile and tablet okay looks like this the now bar okay but whenever we increase the size so it will show just the search bar and here we have the drop down for prop positing and sign out okay so it looks like this so it is what that we will build in this video let's get started so let's open Visual Studio code editor so I have opened an empty folder inside this Visual Studio code editor okay let's now install our react up first of all let's move to terminal by pressing control and back tick okay you will move to the um control panel and here we will write npm create vit at latest okay so we will create our reactjs up using vit so to proceed yes and here project name just I will light dot okay I will create up inside this folder and package name uh side now yes okay and we will use react and JavaScript and yeah our react app has created now let's move to the right okay npm install this code okay npm install so it will install the uh packages and inut dependencies for our react app let's wait for it the packages has been installed now let's install um npm install re react icons okay we will use these icons to um inside our app okay icons react icons let's press enter the icons has been installed now let's run our react app npm run do okay so it will run our react app so let's open this control and press this URL so it will open our react app so we didn't install the T CS because we would like to use T CS so to install the T CS we will come to the tail CSS official website and install tail CSS with W okay so now let's first of all after creating our react app we will install this okay npm install T CSS post CSS and auto prefixer copy this line of code and come here to the your act app and to the terminal let's close it and here I will paste that okay and P install these three dependency packages and let's press enter let's wait for it okay so after installing those now let's move what we will install next we will install we will just run this command okay let's copy this one and let's run it okay let's paste it and press enter so it will create a file inside our react app okay this uh t. config.js file that has been created now just come here down and in the t. conf.js we should have this okay so we should configure that and we should copy this area the content area copy this area and come here to the T kicjs and inside the content we should paste that okay should write like this so after that let's move what we should do next and come here to the index. Cs okay we will copy these three lines and we will paste it inside index. CS come here to the SRC and to the index. CSS okay and we will paste those three lines here inside index. CSS let's come ahead what we should do we should run okay npm run de okay to run our uh react app yeah let's run it so let's check our yeah this is our default act up now let's change okay let's remove the default code come here to the SRC folder and to the up. jsx and here we will remove all these um okay STP of code let's going remove this code so also let's remove this area okay so after removing that come here to the update CSS I will remove this code also and uh I will create three component now okay just come here and I will create a folder by the name of components so after that let's create first of all um sidebar. jsx R Ace react Arrow functional export component okay this command um if you would like to generate the code like this so for that you need to install an extension okay so let's check that okay come here we should install this extension okay1 act native let's create another component that would be nowar okay now bar. js6 and third one which is dashboard dashboard. jsx or AFC so after creating these three component now let's move to the up. jsx and inside up. jsx we will just write a div element and inside the div element we will import the sidebar and uh dashboard sidebar that has been imported and dashboard dashboard we don't have the yeah we have the dashboard component dashboard it is not been imported is the problem dashboard that has not been imported so let's make it dashboard from dashb the spelling is okay okay dashboard yeah that is okay so let's sa it now let's check it okay our app yeah we have sidebar and dashboard component now let let's add a class name here which is FX okay to make them in line yeah they are in one row so after adding that class what we should do next first of all we will Design sidebar okay so first of all let's add a class name here and the width of this sideb bar would be uh 64 pixel and um the background would be BG gray um 800 it would be ped okay and the screen height would be full so now let's remove this content and we will add a d element and inside that D element we will have H1 tag and inside that we will have ad main dashboard domain dashboard let's set a class name to H1 and the text size would be 2 XL to XL and text white and text uh font bolt okay font bolt let's come here down and here we will add a HR horizontal line and after that we will have UL okay underline um an order list and here we will add a list inside that we will have a tag and inside that a tag we will just display the first one which is home and above from this here we will display an icon but first of all I will add let's display the icon okay so to display the icon that I will just write here let's import the icon so to import the icon for that I will use react icons okay that we have installed at the start so the name of the first icon is far home okay so let's import it from import far home from react icons slf found awesome icons save it so here we will display this icon and let's add a class name to this this will the icon will be inline black okay inline block and width would be six height six and and margin right would be two okay from right side and also from the top margin type would be two okay this is it means minus two to the upside okay so this is the first um icon that we have displayed now let's add some classes to um uh Li also okay to the list class name the margin bottom of this list would be two and this would be round it and after that whenever we h on this on H it will just add Shadow and also H we will change the BG background color to below 500 and Ping On Up and bottom top and bottom that would be two um let's add some text a class name to this a tag also class name and PX and the right and left side the Ping would be three and also a class name to the UL class name to the unorder list okay this tag margin top would be three from the top side it will take three okay and text would be white for all um lists and font would be bold let's check it okay first of all how it looks like let's just come here to the Chrome browser okay this is our first one okay the first um link but we will add some text to the um some padding and margin to the top and bottom to admin dashboard okay so just come here and here we will add a class name class name and margin on top and bottom that would be two and margin bottom four so let's check it now so it looks like this okay and let's add a class name here PX okay Ping On right and left side that would be uh four and ping top and bottom that would be two let's check it now it looks like this okay so we have added our first link now let's add other links also so for I will just copy this list okay and I will paste it here paste again paste again and paste again now I will change just the icons okay I will just change the icons for these lists okay and the name so I have just changed the icons for them okay this was for home blogs reports inbox and setting let's check it now okay it looks like this okay now so now let's add our nowb bar okay at the top so to add the Nob bar first of all we will move to the dashboard let's open dashboard component inside the dashboard we will import instead of this dashboard our um um now bar okay so let's close that and here instead of that here I will import the now bar like this okay now bar that has been import it now we will Design our now bar so inside the now bar we have two parts let's create first of all two do elements uh the first one is for the left side of no bar the second one is for the right side okay first of all I will add a class name to the top um instead of do I will just change it to the now okay now tag and let's add class name now first of all let's change the BG background color gray at hander it okay so after changing the background now we will add padding on the right and left side four and padding on the top and bottom three and also Flex in one row and then the justify uh B okay now let's now here the first one is for the left side we have um an icon first of all we will display an icon the icon name is for bars okay we will import it from um react icons and the second one is and we will display for example e-commerce the name of of our website Ecommerce now let's add class name to this okay so to add class name uh first of all to the de Flex items Center and um text Excel okay the size of the text large add class name here and text white and after that margin end for cursor pointer and we will add class name to this span tag also which is text white and text font see me bold so this was for the left side okay now let's add code for our right side okay in the right side we have just a notification search and the profile icon but first of all let's add a class name here which is flex items Center and gap on X side would be five pixel okay and let's now add here first of all we will display um a search okay a search bar okay for that we will have a du element and inside this D element we will display first of all a span tag let's create that span and inside that span we will a button and this button is used uh to display us first of all we will just add an icon inside this button okay pass search this icon okay so after adding the icon now down from this span tag we will just display our input um which type is text and we will add now we will add class name to this Ste and this input build okay so let's first of all check it okay first of all let's come here it looks like this okay this is just input field we didn't added margin left okay so because it looks like this let's now I will design it okay so just come here to the dtive element I will add some classes to this new element this would be relative relative and uh MD and MD devices the width would be 65 of this input field this T element okay this D element inside this we have this input field Also let's add class name to this span tag class name and which is relative MD absolute absolute okay for medium devices absolute the display the position okay inser y zero and left zero and flex items Center paring left to and let's add class name to this button which is padding one okay of this button and focus outline none outline would be none whenever we focus on that text white and MD text black okay and medium devices the T text would be black so it is how it looks like now um just come here down and we will add classes now to the input field okay to this input field class name width would be full of this input field and paring X and right and left side would be four paring y one and paring left 12 round it Shadow and after that outline none and hidden it would be hidden but for MD per medium devices we will display it okay as block so how it looks like it looks like this right now okay and let's check it okay it looks like this but what I should you I will just add margin margin uh lift margin LIF would be 64 pixel I will add that okay 64 let's check it now okay it looks like this right now okay but I will just increase is the size of this to full okayy IM and LIF so to add width full for that come here to the dashboard and here we will add a class name width full let's save it let's check it now okay so it looks like this now let's add another icon so down from this here we will add notification icon okay just come here and here we will just have a do element sorry this is T and inside this T we will have an icon for Bild okay for Bild icon and that class name which is withth is six and height six and come here other class name which is text white save it let's check it now so this is the notification icon now let's add the icon for our profile okay so for that come here down so let's have a d element and inside this D element we will have a button inside this button we will have a user Circle okay this icon so down from this um icon uh we will just display now our drop down menu okay just display our drop down menu inside this T element we will have a UL tag and inside that we will have l i tag a tag tag and this the first one is profile with us okay and let's copy this one and the second one is the setting with us and the third one is the log out so now I will add classes to these elements okay first of all to the D element which is relative now to the button okay class add a class name to the button uh which is text white this will be white and and let's add now class name to this um icon so withd is six height six and margin top one so after that let's add now classes to this div element class name and Z 10 it means it would be at the top whenever we would like to display this drop down and by default this is hidden and um absolute make it absolute and top would be right now if you would like to display this drop down menu okay okay so for that we need to add focus group so I will add that later so let's first of all round it round [Music] it LG Shadow W 32 so uh if you would like to display this okay by default we can display this drop down okay so to display this for that we would like to add to this um just come down and T.C config.js okay to this file and here we will add variance and then we will add extend and after that we will just add display focus group so after adding the focus group now we will use this focus group to display that drop down just come here to the number now bar and control B it okay to this button okay to this button I will add a class name group okay group and down to this div element okay to display here I will add focus group group focus group Focus block save it let's check it okay see right now we have that drop down but I will just configure that okay to add some setting classes and top full and right zero save it and now let's display it see it looks like this okay right now we have that it looks like this I will add some more classes to that okay hidden absolute rounded LG background of this T would be BG white okay and a class name here that is um paring y would be two top and bottom text SM and text Gray 950 save it let's check it now press this see it looks like this we can add more classes okay to this a tag also but I will leave it like this so now the last thing is that we press this button this icon so we should hide the sidebar by pressing that back we will display the sidebar so for that just come here first of all we will come here to the upd GSX and we will add here um a CL State variable okay const um sidebar toggle comma site sit sidebar toggle is equal to use State okay we will use use state for that by default value is false with us so first of all we will F this two to the sidebar okay sidebar toggle is equal to Side Bar toggle and also we will pass both the sidebar toggle is equal to sidebar toggle and sit sidebar toggle sit sidebar toggle to the dashboard okay after passing them down let's just trct them inside the uh sidebar and dashboard so first all I will just close the internet come here to the sidebar and here we will distract that value we have side bar toal sidebar tole okay and come here to the dashboard here we will have sidebar tole and sit sidebar tole sidebar tokle sit sidebar token yeah that is okay so what we should do we where we press this icon in the now bar we should um change the value of this state variable sidebar to True okay by pressing that back we will make that false come here to the now bar after coming to the dashboard now we will pass um these to the uh now bar okay both of them we will pass now to the now bar okay to change the value of that so just come here to the up. GX copy these two State variables and paste them here so after passing them to the now bar now let's come here to the now bar and we will distract them here like this okay Side Bar tole set sidebar tole so now let's use them okay and let's come here to the power bar whenever we click on this icon okay let's add on click event on click so what we will do we will change that value of sidebar toggle so we will call sit sidebar toggle to change the value of sidebar tole State variable we will write like this not sidebar toggle so what it will do whenever we press this icon let's get down so when you press this icon click on this icon so it will change the value of state tole if that was a sidebar tole variable if that was true it will make it not to false if that was false it will make it to the True by by calling this function okay s Side bar tole it will change the value of this variable okay we have called this function this is function which is used to update this sidebar toggle so whenever we update that what we will do let's come here this margin lift okay I will remove this margin lift 64 from now bar I will come here to the dashboard and I will add that here so what I will what what I will do let's I will just add curly braces and backtick backtick and curly braces here I will add the variable okay I will write like this if sidebar tole if this was true so what we will do if this was true um so we will add nothing else we will add add margin left 64 if that was true so we will add this okay there sorry if we will add it here else nothing like this okay and also come here to the Side Bar and we will add that here also okay like this okay backtick let's add that variable here I will use that variable here if sidebar tole was true so what we should do it will be hidden if that was false so it would be display as black if the state variable was two we will hide the sidebar otherwise you will display as black so let's see it okay how it looks like just come here um sorry we should let's appreciate first of all yeah what we should do um if that was sorry I me just connect the charger so let's remove it from this and just come here to the dashboard and we will just cut it and we will paste it here state of that okay so let's save it now let's check it now okay just come here see it looks like this now let's press this icon see again see again okay looks like this now let's decrease the size looks like this okay so this is our sidebar and now bar that we have let's press this icon again extend it so it was all about this uh responsive sidebar and now bar okay I hope this video was helpful for you if you like this video so don't forget to subscribe our YouTube channel uh thanks for watching

Channel: Code With Yousaf

Views: 8,706

Keywords: responsive navbar, responsive navbar using tailwind css, react sidebar and navbar, responsive navbar tailwind, react tailwind css navbar, react sidebar with router, react sidebar navigation, react js tailwind css responsive sidebar, react sidebar, react sidebar with dropdown menu, react sidebar with dropdown menu tutorial, responsive navigation tailwind css, react tailwind css responsive navbar, react sidebar tutorial, tailwindcss responsive navbar, react and tailwind css

Id: k2QmYNMhXRg

Length: 28min 23sec (1703 seconds)

Published: Tue Feb 13 2024