How to create sidebar in React Js using Material UI (Part 1)

foreign [Music] application as you can see on the screen so this simple project has a navigation bar it has a burger icon and then there is some here can be the logo but I just put some text here and this is a login button and what exactly we are building in this project is how to build the sidebar in a react application so in this project we are going to mainly focus on learning how to build this kind of sidebar in the navigation bar when we click on the bunker icon you can see the sidebar opens from the left and it has a few options with the icons here so if I click on dashboard I go to the dashboard page if I click on reports then I see the reports page and if I click on analytics I see analytics page so you might have seen this kind of layout in many of the websites online so if you want to build this kind of layout and you want to learn how to do that stay tuned to this video till the end and we will build build this application from scratch one more thing I want to say here is that I'm also offering a one-to-one lessons on Fiverr and I'll leave a link in the description if anybody is interested you can reach out to me on fiverr.com thank you so much now let's start the video so here I have a fresh react application that's running on my localhost 3000 and on Port 3001 I have a sample project that we are going to use it as a reference and we are going to replicate this project from scratch into this application start with we will install all the required packages that we need to build this simple application we basically need two packages one of them is material UI and another is react out or not so let's uh install material UI first we will go to the website material UI website we will go to installation and here we have a commands that we need to install material UI into a react application I'm going to copy this command from here and let's open a new terminal into our fresh react application and let's paste this command here so this will install material UI into the application so in this project as you know we are also using a lot of high icons on the front end you can see on the sample project we are using some icons here so for that we also need a material UI icons so I'm going to scroll a bit so here we can see a command to install material UI icons I'm going to copy this go to visual studio code with this command here and it will install material UI icons into the project so we have installed material UI we need one more package that we need to install which is react router Dom so I will say npm install the ACT router dot now we have installed all the required packages into the react application so let's look at the original project and let's find out where we need to start building this project so looking at the original project I think we should start by by building this navigation bar at the top so let's go to visual studio code in the app.js let's remove all the default Port that we see here and just say hello world save it so this is how our react application looks like after removing all the default code from the react application let's go back to visual studio code and let's see how we can start building the navigation bar so to start building the navigation bar at the top let's create some folders into the source directory let's create a folder called components and inside the components let's create another folder called navbar inside nav bar let's create a file navbar dot Js and this is where we are going to write all the code for the navigation bar that we want to see at the top in this project I am using material UI to build the navigation bar on the top let's go to the browser and find this navigation bar I can go to the browser search for material UI app bar open the first link that we get on the top so here you can see we have a lot of samples for the navigation bar if you look at one of them we also have a source code for this navigation bar so I'm going to choose this navigation bar that I see on the top of this page I'll copy the source code from here go back to the visual studio code and let's copy that entire component here into navbar.js save it now we can go to app.js and import this component into app.js so let's import button app bar from components slash navbar slash snapbar and let's place this navigation bar in place of hello word here let's save it and let's go to the browser and look at how this application looks so here we can see our navigation bar looks exactly like the reference project that we are replicating but there is one minor change in our project news appears at the center of the page whereas in the original project Muse is on the left side of the page so to fix this we can go to app.css in Visual Studio code and let's remove this text align Center we can remove the CSS from here let's save it let's go back to the browser now so now we can see our app bar looks exactly similar to the original project now we have built the navigation bar which appears at the top of the page in the next step we have to build a sidebar when we click on the burger icon here we should be able to see the sidebar coming from the left let's go to the original project and see how it looks on the original project so here on the original project if I click on the Burger icon here we can see sidebar appears from the left and it has and it has a menu with the links to various pages of the website we need to have a same effect in our original react application where we click on the burger icon and sidebar appears from the left in this project I have used a material UI to build a sidebar so let's go back to let's go to browser let's search for material UI drawer drawer is a component which is used to build sidebars so we can search for it go to the link that appears at the top and here you can see there is a temporary drawer and we can see how it looks on this website so here if I click on the left the sidebar appears from the left if I click on right sidebar appears from right so we can build any kind of sidebar but right now we are trying to build sidebar that appears from the left there is also option to build a sidebar that appears from the top like this or from the bottom like this but I am going to choose a sidebar that appears from the left so here we have a source code for this and make sure you choose JavaScript here before popping this code and this is written in typescript but we want to copy a code that's written in JavaScript I am going to copy this component from here let's go back to visual studio code under the components let's create another folder sidebar and inside sidebar let's create a file called sidebar dot JS this is where I am going to copy the code that I have copied from the material UI website so let's paste the component here let's go to the top we can see this component is temporary drawer now let's go to app.js and import this component into app.js import temporary drawer from components slash it seems that we have created this component under the nav bar so I'm going to correct this I am going to cut this folder from here and paste it under the components so both the folders now appear under the components so I can import this again from components slash sidebar slash sidebar now let's save it and place this component under the button app bar now let's go back to the browser and see how it appears on the front end so on the front end we have seen uh it has appeared exactly as it shows on the material UI website so if I click on the left sidebar appears from the left if I click on right sidebar appears from the right and top and bottom because in this project we are only looking to have a sidebar that appears from the left we need to remove all these options from this project let's go back to visual studio code let's go to sidebar.js where all the code is written for the sidebar so here if we see and review this code we can see that it's returning a div component and inside this component they have four buttons Left Right top and bottom but in this project we are not looking to have a sidebar that appears from right top and bottom so I'm going to remove these three options here and just keep left and let's save it and go back to the browser and see how it looks on the front end we can see here on the front end that all other options are gone we just have one button to click on that is left so we have removed all the options we just have option to have a sidebar that appears from the left so now we have made lot of progress here we have a navigation bar at the top we also have a sidebar that appears from the left when we click on this button but if we look at the original project the sidebar should appear from the left then we click on the burger icon so in so in our react application we need to to move this logic from this button to Burger icon and we need to remove this button from here to remove this button from here let's go back to visual studio code so if we analyze the code that's written in sidebar.js we can see in the return that we need to remove this button we are trying to remove this button from the front end and move this on click logic from this button to a burger icon and this burger icon is inside the nav bar so inside the nav bar we have a burger icon here so we need to remove that button from here and move the on click logic to the Burger icon so in order to do that let's do one thing let's remove let's go to navbar.js and let's import temporary drawer into this component and let's place this temporary drawer after the app bar so we what we have done is we have made sidebar component as a child component to navbar we have imported it inside the navbar and placed it here in inside the navbar so if we save it and have a look on the front end we can see here that now the left button is appearing twice because one of the button is appearing from app.js and another is appearing from the nav bar because this button is placed inside the nav bar now so we need to remove one of this we will go to app.js and remove this button from there so let's go to app.js and let's remove the temporary drawer from here because we have already placed it inside the navbar component now let's save it and let's see how it looks on the front end now now we can see on the front end that duplication is gone and this button is appearing only once and this button is placed inside the navbar.js now so now what we need to do is we need to move the on click logic from this left button to the Burger icon the sidebar from the left should open when I click on the burger icon and I don't need this left button here so to do that let's go back to the code editor so if you remember we have this left button inside the sidebar.js so here we can go and see where is the left button so this is a button that we are trying to remove and our Burger icon is placed inside the navbar.js inside map bar.js we have this icon button so what we are trying to do is we are trying to move this on click logic from this button to the Burger icon which is inside labbar.js so to do that what we can do is we can simply cut this logic from here and place it there but we need to be careful because this logic is using some function called toggle drawer and this function is defined only in this file so if we are moving this logic from here we need to move this function as well token drawer function as well to navbar.js and if you are moving this function this function is using some variables like State and cell state so if we are moving this function we also need to move this variables to the navbar.js So This Is the End entire logic we need to change in order to move the click Logic the bug right so here you can see it is all inside the global drawer function we are passing some parameters and one of the parameter is Anchor so if you read this logic this anchor is nothing but this left because it's an array we are mapping over array and here is the anchor variable that's coming from this array so anchor is nothing but the left so now I am going to cut this logic from here and let's put it and let's move it to Burger icon because I move this logic to Burger icon so I also need to cut this first of all I can just replace this anchor with the EF because we saw here that anchor was nothing but left so because I cut this thing so I need to cut the noble door function and all the variables that are being used inside Google door function from here and keep all these functions here let's save it now what we can do is we can pass this three things that we moved from the sidebar or JS to this file as a props to that file so we don't land into any kind of Errors so let's pass stay as a prop set State also as a drop and then there is a function called toggle drawer let's pass it as a props and inside sidebar.js let's import these three things as our tops stay set stay and toggle draw save it now let's go to the front end and see what's happening there so on the front end luckily I don't have any errors if I click on left nothing happens if I click on the buzzer icon the sidebar appears from the left so we have successfully moved the on click logic from the left to Burger icon so no no it's easy to just remove this button we don't want to see this button here so let's go back to the code editor and this button is inside the sidebar dot JS and this is a button so we can simply just remove this button from here save it now you can see the button is gone and we have the navigation bar we have design cycle are in place so we have made lot of progress till now in the next step we need to what we need to do is we need to make all these options clickable and when I click on this it should go to that specific page for example if I click on inbox it should go to slash inbox and I should be able to see the inbox component here so to do that let's I think we should do it in another video so if you like this video and you want to see this complete project leave your comments in the comment section and like this video and I'll definitely make a second part of this video to complete this entire project and don't forget to like And subscribe to this channel if you want to see such videos thank you so much foreign [Music]

Channel: Mitter - Your Tech Mate

Views: 15,563

Keywords: react, reactjs, react js, material ui tutorial, material ui

Id: VDEl1j1sJgk

Length: 15min 12sec (912 seconds)

Published: Fri Jan 20 2023