Build a RESPONSIVE SIDEBAR NAVIGATION with REACT.JS | React Projects | GeeksforGeeks

Key Takeaways

Geeks for geeks has a challenge for you the 390 challenge choose what you want to learn in 2024 and aim to complete at least 90% of the course in the next 90 days and if you do that you get back 90% of what you paid for the course we believe you can do that now all you got to do is commit to your success commit with geeks for geeks hello okay guys we are live so hello everyone I'm herel Jen and welcome back to Geeks for geeks and today we are going to build a responsive sidebar uh with it's uh like using react J and uh before that guys I wanted to tell you something that uh Geeks for geeks has recently bought you a challenge that's 90 days challenge uh this is basically 390 Challenge and uh inside this what you have to do is like if you purchase any course from Geeks for geeks within the month of January and you finish that specific course which you have purchased in the n 90 days uh next 90 days that means 90% of that course in the next 90 days then you get 90% of your purchase amount refunded okay so let me just uh take you to the website and there you would get a better overview okay just a second so yeah if you visit GS for geks you can see that yeah we have a lot of courses it's applicable to all courses but yes you have to uh if if you have purchased a course after the month of January then you won't be able to get this over you would get some other offer but for 390 challenge the course must be in the month of January purchase in the month of January and then you finish 90% of the course within the next 90 days that is around 3 months then you get 90% of your amount refunded so it's a very great motivation for those who are not able to finish uh courses just like me I purchased a DSA course and still I'm not able to finish that I bought it two years ago and yeah God knows why but yeah this is a very great motivation to get your amount refunded right so do participate in this and I hope you'll be able to get maximum out of these right so now let's continue now guys today what we going to do is we are going to build a react navigation like it's like using react just like we are not going to I'm not going to teach you react navigation like uh if I click on this button I'll go to homepage about page not that that's something specific to react here we are just going to build a very simple project so a lot of you might be building your websites or projects using react just and the main issue which you might feel is always like when you want to create a sidebar uh like it becomes very complicated okay so today I'm just going to make it very easy like you can see that if I click on left you can see I get the left side barar and right right side bar top side top bar actually and the Bottom bar so you can see that this is built using what so we obviously we are going to use mu UI for this material UI this is a popular uh UI library for reactjs and it makes your task very easy okay so it's like you can obviously build things from scratch and then you can just build a like sidebar that's also great but the problem with building that is uh like you don't get a lot of features okay so with mui which I have used and I'll teach you how you can use that not just for sidebar okay you can use a lot of features from mui I I I'll just show you how you can use muui and then later on you'll become a master of it okay so if you want to build awesome UI projects and you don't want to put in that much efforts in the front end so what you can do is you can follow my Approach and uh personally I'm not that in favor of using these tactics but uh since it saves a lot of times and we as developers are mostly focused on the logical part and I think the UI can be later on improved okay so it's like that so you can use libraries or whatever you want you can write code from scratch today what we're going to do is we're going to build the sidebar using the mui uh Library okay so first of all guys let's set up our react just application so let me just take you to the reactjs uh official website okay and uh you can see this is the official website of reactjs and nowadays uh the official website itself recommends us to uh use nextjs but today we are just going to use react CH although the same approach can be followed for next CH also I've just created a component out of this okay so if I click on this this is just a component so you can use it anywhere you can use it in react or nexj that's totally fine okay so yeah for react just right now I'm going to assume that you are using react J but if you are someone who uses next CH you can follow my same approach by just creating a naar component and here we'll be uh just importing things okay we'll be doing things now in the react official website if I go to learn react and you can see that if you don't know react this is a very good source to learn like if you followed some documentation this is a good documentation now in the installation part you can see that if if you want to use uh react you can see you don't need to install anything to play with react try editing you can use it here itself or if you want to use uh react locally so you can see for that uh uh I think it would yes here we have to click and you can see that when I go here you can see you would never see the create react app uh comment here okay the message here okay the command actually the command you can see that I have a command for creating next app and remix app and GSB or whatever ever you want you can do this you can use nextjs but what I'm going to do is I'm going to use plain react JS that means I'm going to use create react T but if you are someone who is using next stes they obviously use this command but the approach which I'm going to follow for creating this sidebar is exactly same for either either next CH or either for PL react CH either for whatever you use here okay that's totally same but yeah I'm going to use create react T command for building a simple reactj application which I think every beginner knows about this create react app command right and now some people might say in the comment that you are using some old stuff okay using Create react app command is old but I think it would be easy for all the beginners to understand that okay that's why I'm using Create react app and if you are someone who is using uh white or what we call it wheat okay and I I call it white okay and uh or else you using next year then you can follow the same approach okay so let's try to set up the application and guys one more thing uh if you want to get the source code for today's class uh what you can do is you can just visit my GitHub profile I'll just share you the source code so you just need to type github.com /v aj14 okay this is my GitHub profile uh you can just go to the repositories and here I would upload the source code for today's class also okay and if you if you want to follow me you can follow me here like building the GitHub base so that's why you can follow me here and you can check out my Instagram or LinkedIn right now let's continue and we'll set up the app application and what I'm going to do is I'm just going to uh create a folder here okay I'm just going to create a folder here I'm just going to say uh react sidebar live okay right and I'm just going to right click open with code I hope everyone uh has vs code in their computers installed but if you don't have vs code installed what you can do is um you can just go to your browsers and again I'm just going to show you V code just type this and you just need to download the setup from here download for Windows and then you need to install the setup and then guys after that you just need to check all the check boxes while you are installing the setup and then you can easily use vs code right that's it now let's continue and I'm just going to right click and open with code okay so open with code that is it would open vs code so you can see this is it now let's start with the uh terminal so I'm just going to use ter and one more thing guys I'm again going to repeat you can use the latest commands like create next app or whatever you use for white okay but what I'm going to do is I'm just going to use plain simple command that is create react app okay so comment section okay I know like nowadays it's called Old but it's like for beginners okay it's for beginners so you can easily adapt this if you're using something Advanced okay so create create react app and uh using npx again nodejs must be installed if you're using reactjs or nextjs nodejs is obviously required so create react app and here I'm just going to write my reactjs application's name so let's write something like my uh or or I'm just going to write uh sidebar website something like that just random name for the project okay so sidebar website and it would just take a few minutes to actually finish this process and then guys we can continue okay so yes let's wait for a few seconds uh guys if you have any doubts or uh if you feel some problems in react J or in M Stack or in general life you can mention that in the live chat or also you can mention that in the comment section I'll be reading all of your comments now okay right it's definitely taking some minutes so um like it it happens every time you don't need to worry it's not stuck it's just taking some time okay it happens right so guys you can see that not installing some dependencies and it's almost done so you can see this is a normal react just application uh your structure might be different in future but I hope everyone knows how to create components in react just so that's what we're going to do we are just going to create a component inside that component we're going to work okay so that everyone knows exact same thing okay so now I'm just going to create one folder so assuming that all your components would be here so components components right so components and guys after you create this component what you need to do is you just need to say suppose I'm going to create my navbar component so navbar dogs suppose uh my sidebar is actually connected to this or what you can do is uh you can create sidebar component whatever you want okay you can create components right in reacts so here I'm just going to type rafc this is a shortcut from where you get the shortcut you just need to install an extension in reactjs for uh in vs code you just need to go to extensions and you just need to type react and here you can see that uh we have es7 plus okay so you just need to install this one then you would get Snippets okay so if I again type this ra a fce and you'll get this okay so if I add this you can see that we have this uh component created automatically right so now what I'm going to do is suppose your hom page is obviously by default in suppose app.js okay app.js right so what you can say is suppose here I want to show my nav bar I'm just going to show my Navar component at the top so let's show this okay so Navar component now for this we need to run this right we need to test this okay so for that what we can do is first of all you can see that inside react sidebar live we have one project that is sidebar website so we need to first of all go inside this okay so CD Side Bar website right CD sidebar website and once you hit this you can see we are inside this project now to run this project what you do is uh usually this is a command npm start but if you're using uh nextjs the command is npm runev Okay I hope everyone knows but yeah for normal react just this just npm start okay so if I just open this there you would see okay I think I'm already running my other project so I'm just going to close it okay now uh I'll restart it okay so npm start and now guys what you would see is I have just opened my project what I need to do is you I just need to type Local Host 3,000 okay so you can see nabar is basically not defined okay just a second I need to check the problem here is nabar is not defined because I haven't imported so control and space so you can see that now it's imported okay so now let's see so you can at the top we have the nav bar we have the nav bar right so it's perfect right it's perfect and you can remove the style uh whatever style you want you can just apply the default Styles remove the Styles whatever you want I'm not talking about this I'm just talking about my normal naar component this is it and it would be shown now you can style it using your own things just Basics okay so now what I'm going to do is here we need to create a sidebar inside this component we need to create a sidebar for that what I'm going to use is I'm going to use muui material UI Okay so let's try to use this and uh I also would like to know that how many of you have actually used this material UI to design your things okay to build your UI okay so for that first of all what I'm going to do is I'm just going to type uh muui okay so if I type mui react okay if you type this you would get this okay so I've used it for a lot of things like I created popups models and uh this sidebar and buttons a lot of things can be easily made via this okay so it's a very popular Library please explore this and today you'll know how to use a very basic thing that is we are going to do things okay AR Paul hi hi AR Paul aritra Paul I'm sorry aritra Paul right okay so yeah here we have discovered the core libraries and then you can see we have a lot of libraries here they have different different uh benefits like different different uis but what I'm going to do is I'm just going to go here muui okay mui okay and you can see by the way these are a lot of things which you can easily make you can see these are very easy to make uh like uh if you are using mui okay they are really hard if you're building things from scratch but if you're using mui you can easily make these kind of UI you can see this button or uh these type of cards or like you can see yeah this switch you can see this switch okay and uh you can see we have this button and then some for notification so a lot of things are here you can see these Stars so very easily you can make these kind of stuff using mui okay that's why I nowadays use this a lot okay when I was a beginner I was like scratch just bring I'll just build everything from scratch that's great if you are a beginner but I would say that like when you reach some level and you don't want to waste some waste your time in this like you know that how things are built and you know the code and you know the HTML CSS everything so you can use these shortcuts these libraries to like save a lot of time okay so you can see that here we have get started and if I go down installation okay I'm just installing the muui not other other UI so you can see this is it so you get the First Command just need to follow this if you're using some other tool like if you're using next year then also you can follow the same steps okay so just copy this and now what I'm going to do is I'm just going to uh split this okay I'm just going to split this so you can see again my project is opened here and I'm just going to paste this okay I'm just going to paste it so now mui would be be installed in your reactjs project so that you can use it okay you can use it now what else you need to install is if I go down you don't need to do anything really you if you're using some kind of font you'll get a lot of fonts also in mui so it's very convenient and then if I go down you would be using icons okay so I'm just going to copy this for my icons and let's first actually okay I'm just going to copy this and I'm going to paste this because we're going to use some icons also we're going to show some icons also so if I just hit this okay yes just paste this and it's done okay I think that's it that's what we needed and now what I'm going to do is I'm going to search about like in my browsers generally in my browser I'm just going to search uh mui sidebar right I'm just going to search this as soon as you search this you would get this okay so you get a lot of options you get react drawer component so we actually call it drawer but uh general terms I just call it sidebar right so you can see this is it so it it will take you to this page now here you can see that if I click on left you can see that I get my sidebar okay so you can see that this looks really cool and we we going to use this okay we're going to use this now here you can see that if I just expand this code uh my Approach would be a little bit different than normal but yeah still I'm going to show you this okay so first of all I'm just going to copy all the Imports just copy all the Imports and I'm going to paste these Imports here that's it now one more thing uh here you can see that in JavaScript like in reactjs right now we are using JavaScript but if you're using typescript so you have to select this one okay so this would be helpful for both of them like generally people use typescript uh like nextjs uh actually has typescript so generally people use typescript inside nextjs so for those case if you're using nextjs you can copy this one but for uh reactjs if you're using normal JavaScript inside react JS you can go with this one okay so I'm going with this one because we are just using JavaScript right so I copied all the Imports and I've pasted them here and I don't think so there is any issue because you can see there is no issue here now that's fine now what we have to do is I'm just going to create a few States here okay and I'm going to paste these states here that's it okay so these are some states for top left bottom right if you just want the left one so you can remove all other states we'll see that okay and after that guys what you need to do is you need to just copy this function which would actually allow us to show like if you click the top one it would show the top bar if you click the left one it would show you the left bar bottom one it would show you the Bottom bar for that we have toggle draw function okay and then after this uh if I just uh copy this part okay I just copy this part and I would like to just paste it here okay so let's see and right now you can see list is not defined so we have to define the list also uh so I'm just going to copy this list also and I'm going to paste this later on I have to make some modifications also but right now you can see this is it okay so now you can see guys that this is actually done and now let's try to see this if it works properly yes so right now guys you can see at the top at the top you can see if I click on this you can see see the top bar at the bottom you can see we see the bottom bar if the left side you can see left we can see right one okay so this is totally up to you now here you can see that uh I suppose I only want the left one okay I only want the left one so what I can do is instead of this I'll just comment this out just comment this out okay I just want a button on clicking on that of that button I'm just going to do something okay so instead of this let's say we have a react do fragment okay this is uh a fragment and what we're going to do is uh we we are going to again import the anchor which we have already imported from mui right I'm sorry I'm sorry okay I'm sorry I'm sorry I'm sorry this this for something else okay just just write it as it is okay just a normal component and the key was something else okay I'm sorry so here you can see we have one button on clicking of this button a drawer is shown okay that's what I wanted okay so yes what we'll do is we'll just create a button so for that guys uh uh let's let's again go to this mui and here you can see we have some icons also if you want icons you can just you can just click this and you'll have a lot of icons for example uh I want uh nav icon for example left or right icon so uh or I I want hamburger okay I want hamburger that would be better so you can see hamburger so if I click on this okay if I click on this and copy you can see now it's copied and now inside this I would just say uh okay I'm sorry how I would just import this okay I would just import this hamburger menu icon okay yeah it's already there it's already there okay right react what is react fragment react fragment is just like a small division nothing else okay so yeah you can write it normally also but yeah since mui follows this that's why I'm writing okay so now inside this guys uh we want to wanted to create a button okay let's again go back and here we were using button so what which one we want to use we want to use menu icon okay we want to use menu icon I think I have uh okay I'm sorry minu icon just paste this we want to use this okay muu icon so I'll just come here now okay I'll just come here now and here itself I would just like to show my menu icon okay okay so for that uh I'm just going to say m e n u menu icon and uh you can just say uh right now if I just close this and that's it and now if I just show you you can see we have this icon now you can show this icon anywhere I didn't uh style this S Bar also I can style this okay just wait I'll style this also uh but right now you can see that this is fine okay this is fine now inside this if I want to click this if I click this I want something to happen okay if I click on this so I would just say that on click on click and I just want to say that if I click on this okay if I click on this I would like to provide the toggle bar function what value I want to uh show left okay I want to show suppose left one okay which one um what else we have okay I think yes yes we want to show the left one just left one okay that's why I'm doing this so just left one and I think this is it and then we are going to make it true okay we're going to make it true that means I want to show this left one right and what else I think that's it and after this I'm just going to show my drawer copy and paste it here right now let's try to see this and now in this case anchor is what left okay and here itself I'm just going to show left because I want to show the left drawer okay that's why okay you can just change this up to your choice okay so now let's see so if I click on this you can see I'm getting the left uh Side Bar okay now you can place this button anywhere that's totally up to you like uh this is also not important by the way if I just uh I think it would work if I just remove this if I click this it would still work okay so react fragment is just like a division which mui used that's why I use that okay that's totally up to you and also one more thing which you learned right now that is we can use any icon from mui you can see we just use an icon we just used an icon so you can use icons very easily from mui now this is up to you we just use the left side that means if I click on this I want to show left draw instead of this you wanted to show right draw you can use right here you can just use right here and right everywhere so it's totally up to you okay but yeah we are just showing left side if you want to show all you can just show all of them okay but yeah since this is for left side bar so just create left side bar and you can see we created this icon now what else can you do is uh if you want to suppose style this okay if you want to suppose style this uh suppose you have an AB I'm just going to give it class name of uh Nar right and suppose I want to style this okay so I'll just go to this never. CSS and I'm just going to say naar and suppose I'll just say that display as flex and I'm just going to give it some background color of suppose red for now so that we know that style is done okay and let's import the nabar CSS so import and uh do slash in the same folder we created the naar do CSS I think this must work let's see so you can see yes naar is styled you can see that I just gave it a red color but purposely okay perfect now let's come here and I'm just going to make it white again or red or whatever color you want okay it's not compulsory and let's give it some padding 10 pixel okay so you can see that's it and if I click on this you can see it's created okay so very easily we created a sidebar you can see that it's very easy to make now let's talk about these okay let's talk about this so you can see that you are getting some things here how can I just create my own uh like these text here okay for that what you need to do is again follow the same approach just try to understand this code this code is very easy which mui is provided but yeah it would take some time to understand this how to manipulate this okay so just watch me here you can see that this is your list which would be shown right this is your list which would be shown so here what you need to do is you can see right now they're just mapping it although like this is fine you can map it but since you have a lot of icons so for each icon I think this is difficult difficult okay so instead of mapping I'll be just showing things manually okay that means I'll be creating individual components cards okay so either you can follow this mapping approach in uh like whatever de they have shown here this is the mapping approach but what we're going to do is we're going to show things one by one okay so first of all if I just comment everything out what you would see is you can see that this is empty and we just have the divider which mui provides okay this is the divider right now what I'm going to do is I'm going to show items one by one so for that just write list item item okay list item and then you just need to say uh disable padding that means I don't want any padding mui has it okay so this is a property disabled padding now inside this I'm just going to say that list item button okay list item button inside this button we just going to create first of all the icon okay so list item icon right and in below this what I'm going to show is I'm just going to show list item text although you can just show a normal H1 tag and whatever you want instead of this that's totally fine but yeah this looks better okay so you can see here what we want to show is icon okay uh I'm sorry uh this is a self closing tag so let's let's just close this okay and I'm just going to say that we have primary what's the text which you want to show you just going to write that text suppose I want to show home now home and inside this I want to show home icon so for that let's search for home icon I'll just go here material icons I'm just going to search for home and also you can get a lot of options here whatever you want you can use options also I'm just going to use this filled one and I'm just going to copy this okay so you can see copy now let's paste it here and now we just going to copy this component and I'm just going to use it here okay and let's close this okay let's close this so now you would see see that we have home text as well as home icon okay if I give you one more example let's copy this first and uh by the way if you want something to happen on clicking of this item what you can do is you just I can just pass on click and then you can make it do whatever you want you can do react navigation whatever you want you can easily do this right I hope everyone knows the basics like on click navigation right but yes now similarly we are going to create about and I want about icons so if I go here suppose for example if I write about okay so you would see suppose this info is fine so I'm just going to copy this and uh paste it here right and let's paste this info icon right info icon so now you would see that we have about also okay so now the problem here is we have list okay I'm sorry uh it must be actually outside this okay so list item yes and again the same property that's it okay so now you would see that home about and similarly let's create one more that is contact you can see that that's how easy it became for us since we used mui okay so let's come here and I'm just going to use contact c o n t a c contact you can see whatever you want you can easily uh write okay so I'm just going to use this contact okay copy and again paste this icon copy this and I'm going to paste it here and write contact okay so now you would see that contact is also here okay so now one more thing what you can do is you can uh just write one more thing that suppose below you want to show inbox so you can get the inbox icon and like that so uh what I'm going to do is I'm just going to show inbox icon directly so I'm just going to copy this paste it here and let's say I X and this is what inbox icon that's it okay so now you can see we have inbox icon and like that so you can see that that's how easily I created it if you don't want this uh divider you can easily remove this by just commenting this out okay you can see now it's gone so you can see that's how it actually works right so I hope guys you understood this is how we can actually create this now one more thing if you want to just style this what you can do is let's go here and you can see they have actually given a few things here okay I think yeah you can explore these icons also if you want you can add a further style also if you want if if they have mentioned you will get further stylings also okay so this is it guys now I think the project is completed it's very simple project and if I click on this you get the sidebar and it's responsive if I just uh show you it in uh I'm sorry uh if I if I just click this you can see that it's very responsive okay so now you can see that yeah perfect now let's make it in iPhone so you can see in iPhone it would look something like this in uh pixel it would look so you can see that yeah it's responsive I just click on this directly you can see it's gone it's there it's gone okay so very responsive and very easy to make I hope you stod this video now guys I'm going to upload this source code to my GitHub profile so that you can directly access the source code and you don't need to worry again and again and this is just a uh small introduction to material UI okay it won't be only used for sidebar you can use it for a lot of things you can if you want to create your input element you can see for example uh uh like you can see if you want to build this is very complicated things so if I click on auto complete and you can see that if I write s so you can see I get some suggestion to create this generally by uh raw code it become it became very difficult but if you're using mui you can you just need to use these components and you you need to understand some Logics here and then you can easily do this so you can see that mui is really helpful if you want to create your checkbox you can easy build these kind of checkbox or uh if you want to build a radio group like this so you can easily build this okay and then you want to create buttons so you can easily create buttons like this outline text contain these kind of buttons okay so today we just used uh this mui for creating the side drawer or Side Bar we can call it and it did pretty well you can see it is pretty well very like it looks cool and yeah very easy to make right so now guys what we're going to do is let's upload this code to my giup repo and I'm just going to write sidebar uh react mui I'm just going to write mui so that you know that this is built using mui okay and let's just upload this so that you can get the source code so let's hit it and I'm just going to say get add dot okay so now the source code is completed now if you want to get the source code for today's session what you're going to do is you just need to visit my GitHub profile just type github.com /v aj14 this is the giup profile I'll just share this in the live chat and what you can do is you can just go to the repositories and in the depository you would find sidebar react mu if you don't find this you can just search this and also you can mark it as a star so that it's saved for your future projects you can easily use my code to create your sidebar okay and uh you can just visit inside this and you would get the SRC inside SRC we have the nabar component inside Nabb bar. JS we have everything right we have everything which we did today right so you would understand everything and you can use this source code now okay so that's it guys and and I hope you understood this video we created this simple project and it's really useful for those people who are trying to build this kind of sidebar and it obviously it becomes complicated when you try to build these things from scratch although for me it was very easy like I can just use position absolute and different kind of things to just show this on button click but anyways like this is also very good approach and looks cool right so that's it for today guys I hope you understood this video and I will see you in the next one with a better project next time okay we are going to build good projects next time so that's it for today I will see you in the next one till then have have a good day bye-bye