ReactJS Sidebar Navigation Tutorial Using React Router and Hooks

hey friends welcome to webscript.info my name is rizwan khan and today we are going to build a menu system more like a dashboard system okay so for that i have created a post two days ago and i have asked all of you like uh vote for this so i have started this poll and asking everyone like uh what everyone wants so most of the people voted for react.js right and so we are gonna going to do this menu system in react.js and here is a demo you can see so this is the demo and this is a react project or react tutorial you can think of it we are using react router also to work this menu system right here we have sub menus as well right we have this design we can go to this we can collapse this nicely good animation and working fine okay cool we can select this one it will pop up and we have options we have search menu we have icon this search is not like uh working it's just a user interface but you can do a lot of stuff with that so this is uh you can think of it like beginning of a dashboard right beginning of a dashboard and this is what a dashboard actually needs to control different section of the application right you can go and create a dashboard component you can go create uh components like courses videos you can show over here just like this you can see the menus are also a change because of react router and here we have videos and then click on it will be claps and then design like this so this is what we are going to build with react.js so this is a react project okay we can start now okay so here is our terminal and we can create a new react project completely from scratch by using npx command npx create react app and now give your project name so i will say react dashboard and it is not a complete that dashboard but you can think of it as like almost half of the dashboard you have the control system you can navigate to the different section of your uh project this is what we need in this is actually this is the only thing needed in a dashboard rest of just your content and that is not going to be same for every project or every dashboard application so every time you have to come up with your own content and most of them i also don't like existing uh content with tables and all those stuffs so i prefer to create my own right so here we'll say in big script and then dashboard so it is going to initial initialize our project and very soon it will be completed then we can start our project so as you can see the installation of our react project is completed or so completely normal really i have 12 gb ram and my laptop is still taking so much time i don't know why uh okay fine let's continue so here is our project folder let's do that and this is react dashboard right let's hit enter and open this in our vs code that's kind of editor of everyone these days so this is our project and this is our welcome go back so here we have source folder and here we have our root component app.js and everything is going to start from here only right so i'm going to run my project so we'll use let me kill something so here we can start our project so we'll say npm start so this is our project uh we can edit our app.js file right let's go and remove everything that's all so i don't want this thing this header component and anything over here so let's simply remove that and save it and you're gonna see something plain over here now i don't need this logo svg right let's remove this as well i'm interested in this app.cs file because this is going to be our root css file for our site uh dashboard menu component okay and i also donate this svg file so let's remove this and let's remove everything from index.css not necessary let's go to the app.css and remove from here as well so we have we have removed everything from app css index css and we are clean now now here let's reload and we got some error index.js no such file or directory okay index.js no such file or directory oh did i deleted index.js oh mistake so here is our index.js file uh somehow i deleted that one okay fine instead of deleting svg uh file i have deleted my index.js file so let's remove this tying it okay fine so here reload and cool we are good to go so we don't need this too and here we are going to start our application and before that i also need some uh fonts and icons and logo as well so for fonts i'm gonna use fonts.google.com so here i'm looking for a font like uh open sense open sense condensed and normal so let's take this one princess and let's take everyone everything also like 300 regular 400 semi bold 600 bolt 700 and extra bold 800 i hope this is enough now it's time to copy our links okay let's copy and paste in our public folders so we'll go in next sorry where is our public folder yeah over here we have index.html file and here we have all the related stuffs so this is our index.html file and this is our root file for our application and i want to show over here react dashboard uh menu cool next we're gonna put over here the link of our fonts save not this one save this and let's go back to the app.js app.css now add add few things for the default shelling let's remove the existing margin padding also if you are going to use ul then we'll use padding 0 margin 0 if we are going to use li then we'll say less style that is going to be like 9. and now let's have a body so we'll say body and here we're gonna see background background and we'll put this color okay now let's see the color is there or not so yeah we have got a kind of like light gray color and let's add a font as well so we'll save font let's go and grab our phone from the open sense so this is our font let's copy this so it is going to be applied everywhere okay cool so let's put over here save this let's verify i will say hello world whatever oh let's go and check the your comment and the font is actually working okay so let's write our components okay the first thing we want to do is we want to create a menu section so that will say div and here this is going to be like something fixed on the left side we'll say class and then it is going to have like oh not over here just let's remove this sorry for the mistake and let's create a new uh component file right so we'll create a folder with the name components and inside this we are going to create a file that's like side menu dot js okay so this is our side menu component let's say rfc and side menu save this now let's import this one so here we're gonna say site menu and it's not coming i hate stuff i put side menu okay fine we have side menu from the components folder and it's over here working right now let's go to the side menu component and here we're going to do all the stuff so here we'll say we'll give it a class like name that is going to be site hyphen menu okay so we'll use our app.css file and we'll write over here like [Music] site iphone menu and we'll give it a position like fixed so this is going to be fixed in all the situations and the background color is upon black right and the width will say 300 pixel for the active mode and 300 pixel and height is going to be like 100 save this and you can see we have got this stuff now i want to place uh a logo a back button like uh to collapse this menu and this again toggle this menu actually then a search con search component and then menus right so let me show you the the expected whatever what we are trying to get over here so this thing so this is a menu and then this back so this is going to be toggle in other cases it is going to be in a minimized cases this is going to be outside of our menu system when our uh when we will see when we see the minimize version of our uh side menu then this is going to be outside okay so this is one form and this is another form let's do it so here we are going to say is that let's come over here and let's put a container over here to hold the logo and all those things with that we need actually the logo let's go uh so here's our project and i have got my assets within the src folder uh we are going to add our assets so this is our src folder go inside and paste the assets this is our assets folder inside this we have a logo folder and we have a logo icon and then we have just a user icon to show the user okay cool so you can see over here it's coming right let's minimize this and let's go to the app.js oh sorry not app component side menu inside this we are to say uh like top section right let's say div and the first is going to be like top section which is going to hold uh logo as well as the back button okay and inside this we are going to have one more container i will say class name equals to logo and here we are going to have an image instead this will say source and within the source we are going to say we need a logo right so we'll just put logo from our assets folder right and there is our assets folder logo and it's nothing but the web script dot png okay let's verify that logo web script dot png now let's put our logo over here so we'll say logo and all this is going to be like web script now let's see our output see yes this is coming and this logo size is around 512 pixel and this is a square with little space okay so this is transparent right uh this is a png image you know it right now we are going to fix this logo first so first thing we'll we'll add a padding for our side menu so we'll have some space around this as per this image you can see we have some spacing around around the menus right so we will create that space so let's go and let's go for the app.css and here we'll say box sizing that is going to be a border box and then padding from top and bottom 30 pixel left right 20 pixel cool now now we can add our logo so we'll say site menu dot logo and here what is this side menu and this is class logo that's it so logo here we're gonna specify some width and height so 40 pixel width height is going to be 40 pixel and overflow is going to be hidden okay and as you can see uh the logo is not visible because uh it's actually there but the width and height is very small and the logo is going out of that container and overflow is hidden okay so that's why it is not visible so we have to make the image size also like we have to change the image size we'll say logo and then image and here we'll say max hyphen width that is going to be 100 percent max hyphen max hyphen height that is going to be 100 save it and it's visible now but it is little a little broken from the town uh this is little cut over here as you can see i don't want that thing so i don't want oh that's with actually that it's actually height and now this is fine that wasn't css code mistake so this is fine and we got our logo now it's time to get a back button right to toggle the menu so we can close this and we can open this again so we need to have a back button for that we are going to use some icons from getbootstrap.com so we'll go to the getbootstrap.com we can have free icons lots of different versions of icons all of them available as free so just easily do crap and it looks better than i think font or some icons just try this sometime really cool so what i'm looking for i'm looking for a back button okay so just go first we need to get a cdn of this icon so just go really quick to the bottom of this screen and here you can see let's there is a cdn let's copy the cdn and let's come over here and public folder index.html and this is the link files so we'll just add it here okay so now we have our css icons as well okay so site menu and now we need to know the name of the icons so we're looking for a something back button you know right so let's type back and uh okay not here let's search for arrow and here i can get that so yes this one okay so this is our required one and this is the one so it is it is pointing to the left side right so pointing to the left side yeah let's copy this one okay copy this icon let's go over here and here we're gonna say uh just this isn't a logo right and here we're going to say div and let's paste the icon and give it a class as well say class name that is going to be back hyphen arrow or toggle menu that suits better toggle button toggle menu hyphen btn toggle menu begin okay this is not a beaten but it's fine to have this alright let's see the output and it's kind of not visible because the color is black right so let's copy this thing and give it a color so we'll say side menu dot you will see top hyphen section within the top section we have toggle menu button i'll get a color like uh 333 okay now it's visible cool okay so this is visible and let's go back to the icons again this is visible and also i need to add this top section because if you see if you follow the order uh go to your site menu file and you can see over this top section let's copy this and let's go to your app.series file and paste here as well okay because it it important to track the classes in which order it is there it is going to help in css animations okay so this is here and i want to change the icon size and say font size 20 pixel uh nicer right and i want this thing to be just go on the right side so i'm going to have uh like displaying line block so for the logo we'll say display inline block save and for this button as well display online block cool so this is in block level we can have all the block level properties over here so so here i have to organize this uh just over here right in this place and not just this when this side menu will be in the collapsed in the minimize version of it then this i this the same icon will be out of it okay the same icon will go outside so we can have a listener on this button on click of this we can minimize this like uh side menu and again on click of this we can toggle the uh we can toggle this side menu okay so let's go and work on it and display inline block so this logo is fine but uh i want to do something which which for for that case inline block is not required and we have top section right so i will give a top section i will say side menu dot top section position relative so i can have a position absolute over this icon and i can move freely within the top section container okay so here we're going to say toggle menu and let's say position that's going to be absolute okay and once position absolute will say uh top zero right as you can see this moved up and from the right it is going to be zero so this is now over here but it is not in just like parallel to each other i want this to be like vertically centered right so for that i can use transform property so we'll say uh top instead of you saying top zero i will simply simply say top 50 percent okay so it is here and just moved 50 and i will just pull it back by using transform so we'll say transform and then translate y direction minus 50 okay now see this is completely parallel to each other and this is how this is what i'm looking for not just this if i will click on this and this menu will toggle this button will go outside so we have to take care of that situation also so what we can do this is zero right and just do some maths over here the padding is 20 pixels right the icon font size i have given 20 pixel so at least 40 pixel is required uh we have to shift this uh but this icon up to the 40 pixel from the right side so it will be over here right in this white space let's try it and we'll do over here right say 40 pixel and it is actually negative for a pixel so you see this is coming out and this is kind of not looking good so just to make it look good we'll add one more 10 pixel uh instead of 40 we'll say 50 pixel and this is nice so this is how we're going to handle our icon okay but initial initially it is going to be zero okay so this is going to inside now the next thing we need we need a search controller okay such such component just go to your site menu and here is our top section so we are done with the top section next we need to create a search menu so we'll say class and then name that is going to be like search hyphen controller search controller and there we're gonna have just an input with type that is like as usual text placeholder that is going to be search and this is like this completely bad ugly okay so we are gonna apply the css class over there copy go to the css file and here we say site menu then search and just piece your search controller and then we have an input okay and input with type you can say like text okay specific to that input and here we'll say border just to remove border i will say zero and this is not working actually so border is zero also remove the outline if you focus on that then you're gonna see something black so let's remove the outline will say none and let's give it a height like 35 pixel okay and let's give a background color to it we'll say hashtag 333 and like this and give it a border hyphen radius let's say 5 pixel also just make it our display i will say uh block okay so block saved and let's give it a margin like from top and bottom let's say 20 pixel and left right zero so this is like this and this needs to be like cover 100 width so we'll simply say width 100 okay so this is like this and we need to place an icon also over here so that this we need to place an icon like this you can see there is an icon over here so we'll place that icon also and let's go there and find the okay so our icon is actually the search icon we will find it in the go back and find the icon will say search icon let's there is a search icon let's copy this and let's go to the text editor here let's go to the side menu and let's face the icon over here okay now let's go and this icon is again not visible you have to give it a color so what can i say search controller with a color okay app.css and we'll say color and let's have a color and this is again not visible i will say six oh actually the search controller we have to add color within the search control this is side menu and dot search controller will say color and let's say white just to test this thing so as you can see the color is over here right we can apply our other css properties so to that because it's visible now now let's go and give it a wrap this icon within a div or somewhere right so we can have a parent level class we simply say [Music] and within this div let's wrap this stuff or you can also use a button so we'll see over here button and this one too but we have a button let's give it a class we'll say search hyphen button save search button now let's go to the css file and here we're gonna say site menu dot search controller dot search button and this is going to be like position you know absolute okay now this is in like absolute position it is not going to affect the other places let's have a position like relative and position absolute we need to get rid of the button default properties like we'll make the background transparent okay and also we'll make the border like zero okay now this is our search button and we need to give it some like uh size we need to increase the size you'll say right and let's choose the color let's say hashtag i will say 666 okay now it's time to give it us place it in the right place but before that the search is going uh just overlapping on each other and looking terrible so we have to uh make this space unavailable for so we can make use of uh that space for the search icon so what we can do let's go to the input and give it a box hyphen sizing will say ball box and then we'll say padding from top and bottom 0 from left right 30 or 40 pixels so 40 pixel and this 40 pixel let me tell you why 40 pixels the icon size is uh 40 width is 40 and all the icons you're going to come over here will have a same size of 40 pixel so when when we will toggle this menu then the icons will be like just aligned perfectly okay so that's the reason the 40 pixel is there and let's try and type something working fine also change the color of the search let's say okay a lot better okay and now it's time to align this icon the position absolute will say top 50 and the same transform property will be used to make it vertically center say translate y negative 50 okay now it is centered and now it's time to give some uh space from the left side as we know this is 40 pixel uh let's give it uh something like uh 20 pixel it's too much so this is search button right let's give it a width and height so it will be easy to handle as i told you the the size is going to be for the pixel height is 40 pixel and this is the search button right the position is absolute perfect and top uh left is also going to be like 50 okay with and height oh that's not the thing oh this is width and height is 40 pixel uh translate negative 15 negative 50 percent and something wrong actually uh why is that happening it should work let's apply a background color to observe the uh how the ui is going there let's say and this is perfect in this position okay i got the problem so actually this top left transform is not the part of search button search button will be in its place only right so like this and instead of giving height to 40 let's give it 35 because the search input height is 35 pixel okay perfect and we are gonna it is already in the center we don't have to do anything so let's remove let's remove the background color okay now it's looking fine right now we need a divider as you can see over here we have a divider so we can add that divider also so let's add that so let's go and go to your site menu component and here's our div search control is going in so we'll see over here like [Music] plus name that is going to be divider and divider is not going to have anything so just class divider app.css and i will say divider width i will say 100 percent height is going to be one pixel and border radius that is going to be one pixel and for radius one pixel and background color background color will say hash 333 okay like this see the background clear yeah kind of like scene now let's work on the control when we'll click on this back button this is going in and this cutting button is going out okay so we'll work on that with the help of css let's go to the side menu and so here's the side one this is the active state of the site menu we'll create a additional class to observe that place we'll say uh inactive in case of by default is going to be active now in case of inactive we are going to have some special feature lab.css and let's go to the site menu and i will say side side menu dot in active and here we can see the width so now let's do some mass again and think about it so we have space around this logo is like 20 pixel okay so 20 from this side 20 from this side is a 40 and the logo itself is 40 so it is going to be 80 pixel right so we'll say simply 80 pixel this is going to be the minimum width and you can see this is the minimized version of our menu icons and this needs to go outside so we'll say side menu dot inactive and where is the toggle meaning here it here it is it says side menu dot top section dot toggle menu button and in case if there is a class like inactive if there is an active class then simply we know what we have written so here we have write property and we are going to give it right let's say minus 50 pixel and this is in the place now we don't want this search to come over here all right so this is unnecessary oh i got it why there is a space uh because we have given a padding right if you go sidemenu.js and just find out this is our input right under the search controller if you see the search controller class uh where is the input yes so here we have given boxes in waterbags and padding uh from top and bottom 0 from left right 40 pixel kind of uh not required we'll see padding from left only for excel right now this is that was unnecessary right even if you remove that class now inactive if you go to the side menu and let's remove this in active class save and you're going to see it's completely normal the width is 100 and that was not necessary you see right so this is fine and let's go and have a inaccurate class again and this is like this so now we have to add some transitions that is going to be cool uh maybe we'll make some transition that looks perfect okay so we'll add transitions side menu and let's go to the app.css file and where we need to add the transition on the width because there is a change in width right side menu we'll say uh transition [Music] not transform but instead we'll see transition and we're going to have transition on a width property so which is changing right so transition on width of 0.2 second and it will complete a transition name let's say azim okay now azin is a transition property and when we will when it will change then we will see the transition but before that we need to make this button uh workable right so we'll go and app.js file here sorry side menu and here we'll add some click okay so where is our button this is our button we'll add on click on click is equal to and we'll have some value like const and say inactive set inactive new state and that is going to do like false okay so inactive uh is false by default it is false on click of is it this is going to be true so here we'll say inactive and that is going to be like whatever it is we'll just take the opposite of that value so inactive so set inactive and then this is going to be false and it will true if true then will be false okay now let's see it's working or not so what we have to do we have to put a condition we have to do the the condition we have to add a condition over here like when we need to add this inactive class you simply cut it from now and let's replace this double quotes sorry i will say over here side menu and we'll add a condition where we'll see inactive if inactive is false okay so inactive inactive means minimize the state it is not active if it is true inactive is true then we'll add an inactive class ladder inactive class else will not add any inactive class okay now let's try this thing working or not see um let's see now let's go and inspect this stuff so there is side menu and if you click on this and it's not working why is that on click we are making set inactive uh whatever inactive the flu false the default false then class inactive will not be there if enough false then it will be true inactive is true then class inactive will be there just to verify that stuff and actually this is not working this is not working the position is absolute right so instead uh here we are trying in the wrong place it should be here okay now let's remove this alert now let's try this thing save and see it's working okay fine in both the cases it is there but when it is going when it is minimized then the icon should be changed right this this point should be right side so we'll come over here and let's replace our let's make it in one light online it'll be better save and there is instinct fine this is this is going to work as expected okay so this minimize is working fine now instead of using this is in we'll use some different transition but later we'll change that transition so here this is working fine just add some cursor pointer so it looks great i will go to the toggle menu button and say cursor pointer okay so it added and added the inactive class and because of an active class the behaviors of css got changed okay now it's time to change the icon so we'll go and go back we'll say arrow and we took this one now we want this one copy come over here app.js side menu and this needs to be changed okay so inactive means it is minimized version of the menu if minimized version of the menu then we'll show this icon else we will show this icon save okay now let's try this thing let's see the icon is getting changed or not yes it is changing completely this is pointing to the left side and this is pointing to the right side means you can collapse it now we are going to add menus over here within this sidebar so let's quickly start that part let's go to your side menu component and definitely we will i'm writing statically right now everything but we'll create a different component for menus also we'll use react router dom libraries also for the navigations so just stay here with me and i will do all those stuffs we'll say div and so let's go to the app.css file and this is not visible over here because the color is itself black so we'll override that color we'll say dot side menu dot main menu and then menu hyphen item when you have an item and here we'll say color that is going to be like kind of black time so here we have this item right and we'll add some will change some fonts and we'll try to update the font weight as well so here we'll say first also the text expression is going to be like and then by default text will have some decoration uh anchor tag this is in a menu item is a rank attack so it's important to remove the decryption next let's apply the font size 10 pixel and it's too small the 15 pixel and here it is the the one that's already there for the pixel let's apply the font weight also and before that let's convert this item to a block level element let's say display and i will say block okay now apply the font i can wait say 500 uh not nice 600 and nice so this 600 font weight is applied let's it's also we need to add a proper icon over here let's go and search for something similar and this is kind of lo for generally used for the dashboard items okay so let's copy and go over here side menu and in the dashboard here we'll create a block level element div and we'll paste our icon and here we'll say class name plus name is equals to going to like menu hyphen icon okay menu icon so we'll copy this menu icon go to the app.css file and see the output this is coming like this so this is a block level element we have to convert this to an inline element okay so go there and it will say menu item and inside the menu item it is where it is the location is menu item and then a menu icon okay menu item and then menu icon says site menu dot main menu dot menu item that menu icon and we'll say display inline block okay now it is perfect now we have to give us some width and height as i told you in the beginning we're going to give a for all the icons which is going to be come over here uh the same with the height so it will be in the same size even after the minimizing it so width 40 pixel and height 40 pixel okay and let's give a background color red so this looks like this now we need to increase the font size of this icon okay so we'll give it a font size also we are giving 20 pixel every time also needs to be aligned to like center what we can do we can use some line height property to make this icon in the center okay we'll see line height 40 pixel and we'll say text align so center because this in text line works with the inline elements absolutely fine and we have given the property over inline blocks so this is gonna uh this is going to work because in the in in inside elements will be like fine add this is so uh now let's remove this background color that's unnecessary and head is looking like this cool now there is a parent uh let's go to the side menu and this is the parent okay main menus append so here we'll give some man menu and css file and here we'll say assign menu dot main menu and we'll apply margin from top and bottom or five pixel from left right zero so some space uh that will make it different from our will not touch this uh divider okay that's why five pixel is there now let's go to the app.js file and create similar items so menus and let's copy this item okay now let's see the output so this is coming like this and this is right now the cursor it should be like cursor instead of this text item right so we'll go and add the cursor property in the menu item okay so we'll go app.css and where is the menu item here it is say cursor that is going to be pointer okay this is fine right now it's time to add some some like sub menus so we'll choose a content click on this content that will uh show some drop downs with transitions so let's add that as well so here we'll have dot css side menu and let's choose the middle one there is a content and this is the main menu all right menu item here we'll choose this is again not visible because of the black the color is black right now we'll choose menu sub menu and then we'll overwrite the css property so menu item and i will say side menu then main menu then sub menu sub menu and here we'll say the color is going to be hash three now it's visible so now we have to again do some maths over here so this is exactly starting from uh this this course is beginning from the after the 20 pixel padding right so i want a line in between these two icons so it will like part of the so this two will show as a part of this content right so first we have to draw a line over here and we have to calculate the parent uh the parent of this icon is like around 40 pixels we know so we'll give half of the parent that is 20 pixels from the left so sub menu and he'll say margin from left 20 pixel right and then we'll say border left or one excel solid 6x okay you can see there is a line right now uh just give some uh so the remaining space is 20 pixel right plus i want some extra space so what i can do say box happen sizing or box and padding from left uh 20 pixel is the minimum required but i want to look make this thing look good so i'll add 10 more pixels let's say instead of 20 and say 30 pixel okay now it's like close to each other i will have some change in icons and all those things so sub menu right and sub menu inside this we have an e tag let's copy this sub menu and then a tag inside this a tag here we'll say display block and uh margin from top and bottom five pixel from left right zero okay so some space is there right now also add a font size of 15 pixel that's fine also the weight of 600 okay cool so on click of this this two menu will uh pop up okay so this is our minimum architecture now it's time to add a footer also over here then after that we'll do all the logical part okay so let's go and quickly add a footer so let's go to the side menu again and where is our menus main menus are ending so it's ending over here so here we'll choose a div one more with a class name that is going to be like a side menu footer okay side menu footer and this is going to be fixed in the bottom so copy css and here we say side menu folder and i will say a width that is going to be like 100 percent height 100 pixel that some height is not required just to see how it is looking background we can change the background color if you want to change more closer if you see this design the background of this search menu search and this selected option is kind of like uh more dark compared to this one but this looks fine also let's go and you know let's make the position that is like fixed and from bottom it's going to be like zero and from left it's going to be zero okay so this is like this and which is hundred percent totally unexpected my stat with this hundred percent okay so it should take the width of this one right side menu okay let's see oh that's i think not the position fixed is not required okay cool so absolute is fine now it is fixed in the bottom and we have options so we can place the user icons and names and all those stuff over here let's go and let's place it so first we need a place for the user icon so we'll say img src let us need a user icon right so we'll import an icon over here say import user from assets for slash uh what is that so it's so assets for slash user dot jpg then let's add that with the fault user so this is totally unexpected now let's give it some class and style it will say avatar okay let's copy this let's go to the app.css file and here we say side menu footer dot that's not overplayed so uh here we'll see what is that class of that okay we'll give it here with like with that's going to like 40 pixel height is going to be 40 pixel and overflow is going to be hidden so there it is okay now it's time to style the image let's copy this stuff and paste over here let's say img max with 100 so this looks perfect right this this lady is coming over here now let's circular make it circle we'll say border radius that is 50 oh sorry save it and this is fine now it's time to give some padding to this so for that we'll apply the same padding what we have we'll say padding from top and bottom uh you can think of it like a 30 pixel from left right okay and also give it a box sizing product box and also the height is not required let's remove this stuff this is fine now 30 pixel is too much actually so 20 is i guess enough from all sides okay now it's time to place the name over here and the email address okay so let's go to the side menu and here is our after so it's i'm like taking so much time to creating this stuff but i guess it is worth you will learn a lot of things and you learn how to arrange css and kind of very important in terms of interview perspective if you're going for an interview uh you you may get a chance to develop anything any kind of stuff with css okay so we'll say class name that is your user info let's copy this thing let's go to the app.css and site manufacturer of the size filter and then we'll say user info and here we have to write some stuff so here we'll say uh h5 let's say this one next is and here we'll say uh email address this one gmail.com right so we got the email address now we need to move this to the left side so we'll say user info copy save and here is our user info will say display online block right also apply the display inline block to the avatar line block perfect it's time to give it some some space from the left side so we'll say margin from top and bottom 0 from left right 10 pixel also let's apply the color now it's going to be white okay now it's time to increase this size so let's copy this stuff and h4 that's h4 i guess let's see side menu and that's h5 h5 and here we'll say font size that is going to be like but it's too much okay perfect looking nice you can change the email address size over here or you can do a lot of design stuff and here i'll say font size so that is going to be less than the name so we'll say 12 excel i think too small but looks kind of fine we'll say 40 pixel much better now if you try to minimize this side menu you're going to see the text is just moving down just because because if there is a shrink in width the change in width and because of less space it is coming down i want this thing to be stay in their own position or whatever the width uh whatever the change in width it doesn't matter so we have to apply a position absolute to this text element so it will be in this position forever let's go and try to apply okay so let's go to the side menu and find those allies and here are these things so this is the atac that's this is the anchor tag right let's wrap this thing within the span okay so now it is in span right that's not not the much change but we have some tags so we can manipulate that okay let's go and try to manipulate that so it's under the menu item let's go to the app.css and side menu where is the menu item here is the menu item okay so we'll try over here side menu dot main menu dot menu item and then we have a span okay um let's see i'm following the correct one menu item and then we have a span okay cool so here we'll see position absolute right and because of absolute position it is just going in the different direction what we have to do uh we have to give it a like first display and we'll say block not like that say inline block and this is menu icon right we'll also set the line height line height will say 40 pixel okay so as in their own position right because the line height is something the height of the icon is 4d if you give line 40 then it will be center of that 40 pixel okay so kind of solving our problem but uh if we minimize this still you see there is it is in the position but this is not necessary to see right so we are going to hide this stuff okay and we also want to show the animation right we don't want to use like display now and block because animation doesn't work on that display property so here we'll say span uh that is fine and we'll say opacity that is going to be like one and we'll apply a transition transition on the opacity uh opacity and it is going to happen in point two seconds and transition will be like time function as in side menu dot in active and then same menu dot menu item and then spam and here we're gonna say opacity is going to be like zero okay and let's reload this so kind of like you can see it's working but the courses and videos are not the part of it so we'll work on that over sure so here kind of we have solved the position but thing is uh still it is there the the problem is if you hover this then you can see there you can see the hand symbol the cursor is there so we have to make the visibility or with height we have to we have to just crush this element okay by applying width and height all those stuff over here say width 0 and height 0 overflow hidden okay let's try this and now it's fine there is no hover icon because with that height is zero and this content doesn't exist so as of now everything looks fine we have this course and videos we have to fix this but before that here we have a small ui issues that can be fixed quickly so let's fix this one and then we'll work on this menu we'll create a different menu component and there we will work on this videos and collapsible menus okay so here is our side menu fitter and as i told you this is user info uh we're going to give it a css over here so user info let's just like we have worked on our menu we're gonna do the same stuff over here position absolute and this is in just correct place but it needs to be hidden so we'll use opacity to hide this stuff and transition doesn't work with display so we'll use opacity so we'll say opacity and there we say okay opacity is going to be one and then transition will apply the transition over the opacity and it is gonna complete in point two second and a is in so here we'll say uh side menu uh foresight menu footer will use site hyphen menu with a class in active inactive and then side menu footer dot user input and here we're going to say opacity is going to be one with zero height zero overflow header okay this is a kind of trick okay let's see uh reload and this is appearing over here but it this will be disappeared while i will try to toggle this stuff and it will take it will be a little uh slow uh not very slow because it's just 0.2 second right yeah so looks fine so this is working well now we are going to work on this menu items okay we'll create a different component for that so component side menu and here we'll create a new component that is going to like menu item dot js right and let's create the component and here we'll say menu item when you save let's go to your site menu component and now the menu items are this one li is our menu item so we'll bring we'll start from the bigger one li okay because that's the only thing right now let's let's start that's the same for all of them like copy and let's go to the menu item and here we'll replace this save it so here we have allies and inside we have menu item now we can replace this stuff very easily but we might have a sub menus as well that's why i was copying that one so let's take this one because this supports everything here we have sub menus also it's better to don't take the risk okay let's replace this one save and here we need to give a name uh so and within the allies content and here and say props let's let's extract the details so menu name that's one thing props so that is going to be equal to props so here we'll place menu name and uh these are the sub menus if there are sub menus we'll say some menus so that is a legendary sub menus and here we'll add that so we'll say sub menus if exist and sub menus dot length greater than zero then we'll render this component okay otherwise null and this is again a list so i'm hoping for some menus i will say some menus dot map and he'll say menu comma uh index and here let's say li okay let's place over here and this is unnecessary now save this will provide a key over here and say index to avoid the key warning and here we'll say menu name right save this thing so menu dot name okay hopefully this is gonna work now let's go and try in the side menu so let's remove this thing we'll say menu item now let's import this menu item because auto importing is not working import menu item inside the menu item will pass name of the menu item so name is uh content sorry it's content and then we'll have sub menus that is going to be an array so here we'll say name that is going to be like courses and name videos so hopefully uh we got stuff as it is just as i so here let's create the object outside same menus equals to menu items this is going to be so this is a name dashboard and it will navigate to the forward slash content and then it has sub menus courses and videos and then it has design to designs now we can iterate through this stuff so before doing iteration i will simply comment this because i don't want to broke it break it so this is how ul looks fine i'm sure i have menus so i don't have to check the length will say menu items so here we say menu items if it is not there then it will take an empty array sub manage the safety now let's try this thing and looks like it's fine working as expected as expected okay so our menu items are working cool now what we have to do we have to go to the app.js sorry menu item and we have to handle the sub menus and click of this content this will be uh visible and on again i'll click on this then this will be hidden so let's try that here we'll have some menu and we'll write uh we'll do it with the help of a class but first we'll write a const we'll say uh the property like expand and then set expand here we'll say use state and the default will be false okay and here we'll place that so let's copy this and let's remove this and we'll say expand oh sorry that's not the thing i want so here uh sub menu and then we'll check if the expand is true if expand is true then we'll add one more class that's active otherwise it is going to be empty class okay so by default the expand is false right now it should not be visible let's reload and looks like it is not working no it's working just go to the menu item oh yeah uh so this is actually working if you go and inspect this thing you can see there is a class active but we haven't written any css code for that so yeah that is false the default value is false so you will not see any active class actually so we'll we'll have to make we have to click on this item actually let's say on click on click on click of it will make that thing to true i will make the expand uh true we'll say set expand and whatever the current value that is going to be the opposite of that okay now let's try that you can see the menu as working click again disable enable disable so based on this will add a css class okay so that is submenu okay let's go to your css file and try to find where you have written submenu css code so there's a sub menu css code let's copy this and paste over here and we'll write active and by default let's have a max height that is going to be like zero so as you can see uh the max had zero but this is completely improper so we have to hide if height is zero so here we're gonna say oh where it is yeah max height is zero right and we'll say overflow hidden cool now here we'll say transition and we'll apply transition on max height i will complete two seconds uh in 0.2 seconds and on in case of active we'll make the max height again 200 pixel not more than that okay otherwise it will i'm going to have a scroll and this is working as expected right so our menus are working now we have to take care of another thing uh that is we have to give our icons as well right oh i missed that thing okay fine let's go to the side menu and here we are going to add a icon plus name icon class name that is going to be for the dashboard it is this one copy and let's paste over here and for the sub menus will say icon plus name and for the content right content is going to be uh what is it newspaper or something what's that don't remember but this one is like pen here i'm gonna say for slash and uh icon and last name this is this one okay so only the missing one is this one let's copy it for now [Applause] okay try that so let's go to the menu item and here is the class that we need to use and here we're going to say class name right so we'll say icon class name copy and he'll say and something wrong okay we need to pass that as well so here we'll say class okay looks fine uh click over there and this is fine click again this toggle is working as expected right now we have to work on few special cases like if i'm minimizing this thing so if i on click of this this first this needs to be expand first right but this is not expanding right and this is totally on accepted thing why i'm expanding it if i'm if i can't see it so on click of this i have to first expand then select the items okay so we have to keep that thing in mind so he'll here we'll attach non collect function on click that's nothing but li i'm trying to click on li because as you can see the parent is li so here we'll write that and here we'll check if if inactive means if it is in inactive mode if inactive is true then we'll make the inactive force set inactive false okay and will execute in the menu item so here we'll say on click simply say props start on click here we'll say pop stop on click let's try this thing minimize click yes so it's working fine right and if i'm clicking on this this is again uh this should be false right this should not be visible so when this is the states there are couple of scenarios we need to handle minimize this and this is wrong so we have to remove the active class if i am minimizing it right so let's go and go to your side menu component and track your inactive class within the use effect we'll say use effect have a callback and we are looking for inactive change inactive right and let's go inside the body of the function if inactive if inactive is like true if inactive is true then we shouldn't show this right so we'll have to make all whatever the sub menus are there if there are more sub menus everything needs to be hidden so i have to remove active class from all of them i mean i have to remove this active class from everywhere right if it is in the minimize state so for that i will do like a document i will take help the browser api uh dom elements document dot query selector quiz selector and we'll say actually all and the class is sub hyphen menu right so here it is classes sub menu go over here classes sub menu so this is going to give us an array we can iterate through that same for h and we can have every element like this say el dot plus list dot remove and we'll remove the active class okay now let's try that okay fine fine now let's close this and this is hidden now we are going to install react router tom library so if we click on this dashboard then we will load the dashboard component if you click on this content then we will load the content component like if we click on this courses then we'll load the courses component same goes for the videos and design as well so we'll install uh this library to make it work quickly let's install it as i'm using yarn for my package manager tool so i will do simply do in my project root folder yarn add react router hyphen tom and let's hit enter let it install okay so installation of our react router dom library is done now we can start using it so let's quickly go and your project and you can see package.json file and here we have react router dom so let's import few components so let's go and do this thing as we first we need to import uh let's go to the reactor down so actually the reactor dom is has got updated a lot we have to follow the instruction from the documentations so here we have installed it next part is just having some routers and all those things so we'll simply copy this and let's copy import statement and paste in your project folder so you will paste over here okay i'm importing browser router switch route and link i guess link is not required over here but route is required okay let's save and let's go and start using it where is so we'll wrap the whole thing uh within the router okay so instead of here uh this is a side menu component our router will go in the root component so here and here we can see actually the wrong place we have imported it side menu and let's copy it from here or actually cut it from here save let's go to the app.js file and paste over here and let's wrap your router we'll say router let's close this and let's have a side menu inside that okay okay so this is our side menu and inside the side menu we have we have the links and then we have a switch okay so we'll place the switch first uh here we'll say switch and inside the switch we'll use route and if you see the syntax of latest track router dom it is like a component and there in inside we have a children component that is nothing but your page your about page users page nodes similarly we will some components will create some components so here we'll have root route and then we'll create some component like const and we'll say dashboard okay so here we have five components one for dashboard that is going to be your page then content courses is the your sub component videos again your sub component and then finally we have design okay so let's import these things for we need to have a property like path uh in when when we when we will be in the like home page so that is just nothing but forward slash and in this case we'll load our dashboard component okay and let's copy this item and here we'll say content and uh things like so just to make a difference content personal videos and here is like content for slash courses okay so this is our route now let's try this thing is working or not let's go to your uh page and here this is a home page let's reload this and there is dashboard actually i'm guessing there's a dashboard but because of this fixed item i cannot see it okay that's css property uh making it invisible so here yeah as i give as i told you like we have a dashboard over here but it's not visible so yes we have to create a container to hold all of our pages okay so within this we'll simply add a container tiff and we'll say class name that is going to be like container and inside the container we will have switch okay now let's give some style to the container okay so on the global level and here we're going to say container let's have a like margin from left just calculate the um like uh width of our side menu is around 300 pixel so margin left 300 pixel would work fine okay let's see yes as i told you this is working fine now you can have internal padding and all those things on the page level so this is working fine right now but not just this if i will click over here then it should go in right and on click of this it will have some transition right so i need to know when this side menu is going in and when it is coming out okay so i will create a function for that let's go to the app.js file and here is our site menu i don't know when it is going in and when it is going out i will simply have a function will say on claps or you can give a better name if you know like what should what should be the functionality so on claps we'll simply uh get some information from our side menu component okay so i will pull i will try to pull the state inactive state in this uh function so here we'll say inactive and just log this value console dot and we'll say inactive now we have to execute this in on claps function okay let's copy this and let's go to your side menu component and where is our use effect so here it is changing right inactive whenever there is a change in inactive i will simply get those value so i will say props dot on collapse hopefully the spelling is correct uh on claps copy and let's go over here paste and here we'll pass the inactive value okay inactive we got inactive now here we have inactive now let's see it's coming on the console or not let's go inspect and console yes so we are getting that value so inactive is false means this is not an inactive state if you click on this and you can see the inactive is true every time you'll get this value we can create a similar state over here let's say const in active set inactive okay cool you state the default we know it's false right default will always be false save and we'll set this inactive state over here we'll say set inactive that is whatever the value we're getting from the uncollapse we'll just paste over here so inactive will be set and now i can get the value okay so here in the container i will simply have some transition or something like that in active or like this okay so if container.inactive if it is inactive then the margin left will be decreased right so let's go to the app.css and here we'll say container dot in active and here we'll say margin hyphen left that is nothing but 80 pixel okay let's go over here and check this thing out okay and this is fine so this is 80 pixels actually you can see this is visible this is working fine so i just need to change and add some transition and uh i have to add some functionality so here we go after chase and we will display this only when there is when it is true right so we'll simply take this thing cut let's remove this and add a back text paste over here here we'll say taller and here we'll check inactive so if it is inactive is true then we'll simply say the class inactive right or else the class is going to be empty try this okay so this is working fine and this is so quick the transition is taking point two second to complete but this this has no transition that's why it is taking that's quickly here you just see there is no change okay so we'll do that uh just add a transition and let it complete in 0.2 seconds we'll go to the app.css and here we'll add the transition transition on margin hyphen left it will complete in 0.2 second as usual he's in okay now let's try this thing and see yes so this is now working fine the dashboard we are getting okay so we can have some padding in the on the component itself so you can go and check this thing for now we'll add simple uh padding over here side menu and after chase and here we have our contents so you can add padding over these contents but to avoid all adding multiple times i will simply have a padding over the container class okay this is not the this is temporary right but just to make this dashboard uh side menu make it make it work app.css and here we'll say padding from top and bottom from everywhere actually to 50 pixel let's try the things okay working as expected cool so fine nicely done now we have to add some style in case of like on click dashboard or whatever it is so we have to do that thing okay uh let's go to the app.js and here is just dashboard right the default is dashboard now let's try some other thing we'll say content and content is not coming oh it is not coming just because we have to give a property like exact over here okay now let's try that so you can see the content is coming over here and i'm not going to explain that why exactly exactly is required maybe some other video i will create completely about regular rom but yeah you have to do something similar that content is working right now let's say for slash courses uh the spelling is wrong courses and it is not working uh content videos again it is not working i think uh for the content also we uh content is there right courses videos yes so we you have to place exact there as well and let's try courses and here it is courses so this is working fine now i have to do i'm just reloading everything but instead of reloading i unclick of this will load those components okay so let's go and let's find out where we can place your in our side menu right so let's go to the side menu and here we have links to do this stuff right let's go the menu item now let's import the link component say import and we'll import a component like nav link from react hyphen router dom and here we'll paste nav link paste okay so we have got nav link let's replace this thing okay let's let's remove this a will say now link and let's copy this place here also here okay this nav link requires a property that's a two and without this property your you will get some error some serious error so here we have to provide that and let's get the two property from the props so as we are already passing two in the menu item as a property to the component so we'll get the two over here now this will solve our this problem but here also we need to provide a 2 set 2 and then here we'll say menu dot 2 save now let's check we have added a 2 property in the sub menus or not so let's go to the app dot side menu file and here we have sub menus and i guess i have not added so here uh this is an object and let's add a property to and here we'll say for slash so this is the root is content and then this is the sub uh menu so we'll say courses next is the videos so here we'll add a two and then we'll have lab content for slash videos let's save this now we have two property over here and let's go back to the menu item so this is i guess this is working fine and here we have got the proper response as well let's click on this content we have got courses videos and this is hyperlinked text is blue uh that's fine we'll fix that with the css and things are working fine let's try the menus dashboard is working content is working and courses is working videos and design is also working no refreshing everything is quickly changing now let's fix this css code as well as uh when we are using nav link uh so whatever the page will be active will be in the current uh let's say let's select this inspect this item and just so this is our nav link and it is rendering as an anchor tag and it has a property area current uh area current and i haven't added this one this is from the nav link itself and also you can see uh there is uh like a class menu item active is added so this is uh this is dashboard and this is fine this is our active class let's go down and something wrong okay uh maybe the problem is dashboard and here in the nav link is fine after chase exact is there side menus uh we have to provide our exact property in the link as well we'll say exact that is going to be like true okay exact true in others we don't need but in the name also we need a content exact that is kind of like true let's have this true exact true and let's try to add that exact over here as well so exact and here we'll say as like true okay oh not that we'll say here menu item dot exact i will show you what i'm doing let's go to the menu item and here is we have a nav link and here we'll say exact right so we'll say exactly let's add over here as well save this and yes now it is working so if you see uh if i'm clicking on dashboard i'm getting an active class over here in the menu item right if i'm clicking on the content uh so this is dashboard is no more my current page but now the content is my current page and you can see that we are getting an active class in the content with the menu item okay so this is from the nav link and we have added exact properties so it is like kind of tracking the things what is going on and everywhere right so let's close this let's open this one too now let's see uh click on this dashboard and it has an active class now click on this design now this has an active plus so this is our currently selected menu right we can with the help of this we can apply the css code as well so this is uh with menu item class let's go and add the css code so here is our menu item class right let's copy and find the css code of this stuff go there app.css and here's our menu item and we'll add the same stuff let's copy this and paste over here with if there is in class active then we'll change the background color let's add a background color like hash 6 6x okay so this is the background color and it's kind of like working right so we need to apply some styling as well so you see design right dashboard let's supply the border radius and clear all those things so where is that okay menu item okay here it is now let's have a border radius that is going to like five pixel and then when selected then color will be white um looking nice right you can have a different color based on your taste okay now it's time to add this css property over this courses looking very terrible okay let's go within this menu item we have sub menus right let's find this thing app.css and here we'll find that main sub menu right so when sub menu also we need to check that like there is active class or not because we have added nav link we need to make it sure so here we have uh courses yes the active class is there and videos that the active plus removed from here but now active class is here this is working fine so it's just sub menu and dot sub menu anchor tag a with class active i have to say like that so sub menu where is that here so we'll say site menu with main menu then sub menu inside the sub menu we have an anchor tag and here if there is a class active then we'll apply uh is there the background is let's apply the background color first background and i will say hash 666 let's see it's working or not so yes looks like it is working and you can select here there let's make it a display line block so it will work fine okay some menu why i'm missing again again where is that so menu a tag right let's apply the display and we'll say block and let's uh remove that text type and decoration that is none okay now working and not just here okay so instead of here let's remove it from here and add it here so it will apply in both places text decoration none and let's take this thing because let's put it in a correct order here it is text decoration none also apply the color so the default color is 333 and looking nice then active when it is active then we'll have this uh you can give some uh padding to this first we'll do box sizing border box and then apply padding from top and bottom uh five pixel from left right zero right and let's let's uh remove this apply five pixel from all sides and then we'll say border hyphen radius will say five pixel okay now color also we'll choose color is let's say white okay now let's try this thing is working or not let's reload content selected video courses and videos so looks working fine but uh there is some problem with the padding we have to do that this is this padding we have given a why stat i'm missing it i mean yes so this padding needs to go box sizing border box and pouring padding needs to go in here okay save fine looks nice and somehow we lost the content and then this here selected okay we'll figure out later so there is working nicely right let's try to minimize this stuff and there it is content design working nicely

Channel: Rizwan Khan

Views: 15,246

Rating: 4.9262295 out of 5

Keywords: reactjs projects, react sidebar, react sidebar menu, react sidebar menu tutorial, reactjs tutorial, react sidebar toggle, react side navbar, react hooks, react tutorial, react tutorial for beginners, react website, sidebar menu, sidebar navigation menu, sidebar menu html css, react sidebar hoo, react sidebar with router, sidebar reactjs, react side menu, reactjs tutorial for beginners, learn reactjs

Id: 99hJdy-mj5I

Length: 104min 17sec (6257 seconds)

Published: Mon Jun 14 2021