Sidebar Menu Tutorial ReactJS – Beginner Navigation Tutorial

hello guys how’s it going i’m back here with another video and today i decided to make a tutorial where i’m going to teach you guys how to make a sidebar using react.js and i’m going to be modeling my sidebar to something similar to this you can see right here i’m not going to add this part over here or maybe we can but the idea actually is to just make a simple sidebar where you can hover around each of these items and you can see that each one of them leads to a different link and you can see there’s also icons on them they have like a cool effect when you hover over them and each one of them have titles like it’s this is the basic idea of how our sidebar is going to to be so you can see here i have a simple react application and let’s start working with it you can see i just opened up my application i created the react create react app command and i can just like erase some stuff that we’re not going to use for example i’m going to raise the test the index.css the logo and the setup tests down here i’m going to delete all of this because we’re not going to use them then i’m going to come here i’m going to remove the index.css from the index.js and this is probably it.

then i’m going to come here to myapp.js.js and i’m just going to delete everything including the logo at the top so let’s save this you can see that now there’s still errors meaning that um there’s some problem with the directory let me see what happened i’m gonna restart my react app so yarn start and i feel like it should be working now let’s see yeah now it’s working you can see we have an empty website which is definitely what we want but we want to start by building our sidebar on the side so in order to do that we’re going to come here to our app.js and i’m going to do it directly here but the thing is we’re actually going to create a different component when you’re working on a project you want to have a different component for for example if you want to build a navbar or if you want to build a sidebar then you probably want to have a folder called components which will include this and let’s click create a component called sidebar dot js and i’m going to use the es7 snippet command rfce to create our functional component called sidebar if you don’t have this i would recommend installing it if you or if you don’t want to install it you can just write out.

what i just created here and inside of here is where we’re actually going to be creating our sidebar but since we’re using a different component i need to import this component on our app.js so import sidebar from dot slash components slash sidebar now we have an instance of our component you can come here to the bottom and just call the sidebar and that should be fine you can see that for example if you came here to sidebar and i wrote whatever and i saved it it should appear it’s up here in the center because we currently have the css that already comes with a react tab so we’re going to delete all of this so let’s delete this because we’re going to be working on a different one and by the way i’m going to be using app.css for the sidebar as well so let me copy the import app.css we want to have access to it and you can see now it should be working so we actually need to click two two dots so it’s outside of the components folder and now we have a simple sidebar component which has an app.js.

which is being called inside of the app.js so we’re also going to initially you can see stuff are centered because if you go here to app.js it says text align center let’s not do this let’s delete this and let’s make this be equal to width of a hundred v w and height of a hundred v h this is just so that you guys can see this is basically setting the app component which is the like the whole screen equal to 100 of the screen and 100 of the width you can see that for example if i came here and set background color equal to blue uh it’s taking up like a whole screen it’s also taking up a bit because you can see when you start a react application there’s a bit of margin so we’re going to remove that margin by coming here and writing body and we’re going to say margin equals zero we’re also going to remove the padding because it might have some padding as well padding equals zero you can see that now it removes and everything is fine let’s remove the collar and inside of here we want to have the sidebar.

so let’s come here and give this a class name of sidebar and let me remove the text let’s edit the sidebar over here we want to grab the sidebar and say that the sidebar will be equal to we have a height of a hundred percent so it’s going to be a hundred percent of the of the height of our screen it’s going to be filling up everything and then we want to have a width of and in this case you want to set it whatever you want i’m going to make it like 300 pixels and let’s give it a background color so we kind of have an idea let’s make it aqua as well you can see that now we have a sidebar it’s a bit too big i’m gonna change that i’m gonna make 250 and you can see now it’s perfectly aligned in the left and it should be working i don’t want to grab this color i honestly liked the color that is over here.

so i’m just going to copy the color and in order to do this i have an extension called um a color picker you can just search color picker on your chrome website on your chrome store and you’ll find it i can just hover over here and grab the color it’s copied to my clipboard and i’ll come here and just say that the background color is equal to that color so you can see now we have that color over here but this is just creating the simple sidebar well how do we actually create the different parts of the sidebar so like the the different column the different rows that we want the different links that we want in our sidebar well.

we’re going to use a a file called sidebar data we’re going to create one called sideboard data and sidebar data you can call it whatever you want but i call it sidebar data because it will basically be a file which will be an array of objects which each object will contain three properties the properties will be the title the icon and the link to where you whenever you click on the ico on the on the row the link where it brings you to so for example if i click on this it brings me to a page called layouts so we want to put the link in that object why do we want to do this because we can then easily we don’t need to actually write out a different like write out a different tag and a different component for each of these rows we’re going to do that automatically using an array of objects.

if you’re not getting what i’m saying i’ll show you guys more in depth right now so basically we’re going to come here to our sidebar dot js and we can simply come here and import we can just say rfc e and you can see it says sideboard data but instead of we’re not going to use func the functional component we’re just going to export um everything directly so we can say export site export const sidebar data we’re going to export an array so we can come here and say equal to an array let me remove this right now because we’re not going to render anything it’s just going to be an array of objects so let’s create the first object and we can start passing the properties of each of the columns of the rows sorry so basically as i mentioned we want to have a title we want to have a a an icon and we also want to have um like a link right.

so i’m gonna for example for now i’ll just put a random title so like home then i also want to put a random icon and i’ll show you guys what i mean by icon let’s just create a tag call a component called icon and i will i also want to pass a link so let’s say for example i want to go to the home page so this is the basic idea right we’re going to have several of this things right here and each of them are going to have different values now we’re going to be working with the icon so you might be asking well what do you mean by icon so if we there’s something called a material icon and i’m going to come right here material icon uh material ui sorry and it is a really awesome library if we want to to install material ui you can see if we write here material ui ui and yarn for example i want to install it i can just click here on installation and you can copy both of this no only one of these actually if you’re using npm you can write npm install material ui core and if you don’t you can if you’re using yarn you can just write this one.

i’m gonna use this one and i’m gonna write yarn add but there’s also you also need to add the the icons and the icons part of it so you want to add yarn add material ui icons and we just installed both of the packages now this means that i can come here to material ui and i can get any of these icons and they have like thousands of them so they have like a thousand and 117 icons that you can get and use in your project so for example let’s imagine i want to get an icon for a home we can come here click on this and they already have the import statement since you already installed you can just grab this right here and let’s do that.

we’re going to grab this we’re going to come here to our thing over here we’re going to come to the top we’re going to import the home icon and on this icon right here i can just say home icon this is what i mean by icon and let’s now create more so we’re going to have more we’re going to have like i don’t know let’s make five five different rows actually let’s make six one of them is going to be home the other one is going to be i don’t know let’s see what they have here they have a la mail let’s say mail mailbox i don’t know what this website is going to be about but this is just like for presentation purposes now let’s find an icon for mail you can just write here mail you can see that appears this one right here let’s just copy and paste it over here now we can come here to the bottom and just say mail icon and i’m gonna fill out the other ones like with random stuff that i can think out of my mind and i’m gonna come back when i filled all of them and you can do it on your own as well you can create different columns if you want.

Leave a Comment