Create a sidebar with submenu using React.JS

hello guys i hope you all are doing well in this video i'm going to show you how you can create this sidebar with multiple depth of sight menu inside it so what do i mean by that so if i were to click here as you can see the general setting have another sub menu inside it and this contact item here has another sub menu inside it so we have three depth of sub menu the same way this profile here have a sub menu inside it here the settings also have a sub menu inside it and inside the settings we have this building which once again have a sub menu inside it so we can have infinite depth of sub menu if you want it and everything here is data driven so here on the left side as you can see i have this sidebar dot json which is a decent array and our sidebar here all the items here are rendered according to this array so this array basically consists of object so each object as you can see have a title so title is basically just this text then optionally they can have icon so as you can see some items have icons some does not so the icon is optional property and then we have the path so path is basically where this link takes us so if i click here as you can see this goes to the report box so right now i haven't implemented routing but you can do it on your own that's not a big deal now all of our object can also have a children's array inside them if we have a children arrest that means our item or our link here will have a sub menu inside it as well so as you can see we have this home about contact and we have this home about contact here now the contact once again have a children property which is an array array of objects so again this has a sub menu inside it which is why this have this drop down icon and if we click on it we'll be able to see we have a sub bin inside that so this is very flexible so if we need to have another item all we have to do is add an object here so for example we can say title the title can be let's say test and again we can have an icon so icon can be whatever icon you want we can have a path like so save and as you can see another item was added so this is very flexible and here i'm using it as a sidebar but if you want it you could use it as accordion you can use it for your faq section whatever you want the concept or the technique will remain the same so you can just learn it from here and implement the logic in many ways so this this should be very helpful for you so i hope you're really excited so make sure to subscribe if you haven't already and let's get started okay so i'm going to minimize this window and i have this new window here where i have created a new app by running npx create react app so create dash react dash app and we i called it my app so you just have to type this npx create react app my app and hit enter and a folder called my app will be generated which will be our newly created react app so now we can cd into it so we can say cd my app and we can start our development server by running npm start as you can see our react app now is served on localhost colon 3000 and this is a basic react app that we get out of the box so let's start modifying the folder structure so here we have a lot of file that we don't need so let's start deleting them so i don't need the app.css so i'm going to delete it i don't need the test file so app.test.js i'm going to delete it also i don't need the logo.svg i don't need the report web title and we don't need the setup.test as well so now we only have three files left so let's start working on them so the app.js here we don't need the logo or app css we have deleted them and here for now let's just say hello like so and i like to delete the semicolons also you don't have to do it save and now in our index.js we can remove the report web vitals and these lines here and if i were to save it as you can see now we have this basic app okay now let's start building our project which will be this simple app here we don't have much content we'll mainly be focusing on the sidebar so let's go to our app here i don't want this app class instead i want a class of main inside that we are going to have a div with a class of sidebar so class name equals to sidebar for knowledge just say hello and we can have another div this one will have a class name of container so class name equals to container and again we can have some dummy text here so hello again okay now let's style them so let me close this one open up index.css we can delete all this here first let's target everything so as trick we are going to say margin zero so margin through zero and we're also going to say padding to zero and let's also say box sizing to border box so box sizing equals to border box and let's target our html and our body and both of them will have a height of 100 vh so 100 viewport height and then let's just target our body and the body will have a fun family so fun family of ariel you can use any font you want and i'm also going to say font size the 16 pixel which is the default font size and now let's target our main so the main will have a display of flicks so display flex so now both of our hello hello is side by side now let's target our sidebar the sidebar will have a width of 260 pixel and we can say flicks the shrink to zero so this one shrink so as you can see now this is taking 260 pixel of the width let's also add a background so we can say background color we are going to say rgb a and this will be 22 22 22 and the opacity will be one save and this is how this look like now i'm also going to say our main will have a height of 100 vh and our sidebar will have a height of 100 percent so 100 and overflow to auto so if we don't have enough height we can simply scroll so here if i were to open up every single item so this one this one we can open up this one this one as you can see now we can scroll through it so no item will be hidden okay let's go here our body let's say the color the color will be white so hashtag ffff like so and now we can see the text here but we can't see the text here but that's okay our main focus is here so just to make it look like this i'm going to copy the content of the right section here so let me open up the old file from here we can go to our app.js and simply copy this content here so ctrl c let's paste it to our new project which is this one let's go to our app component here we can paste it so ctrl v we again have this container class let's go here and here our text we can see them because the color is white so here we have it h1 with a class of title with this text then we have a paragraph text with the class of info and with some more text and finally we have a button with a class of btn and it says explore now and let's also copy the css to save our time i think this is our finished project and from here i'm going to copy the styles for our container so ctrl c minimize we'll go here and we can paste it let's say above our sidebar ctrl v and we have the error that is because as you can see if i scroll up and about here we're saying we're trying to access an image from our public folder but in our public folder we don't have that image yet so i'm going to drag and drop the image which is this image here and now everything is working and i'll leave the link to the finished code in the video description from where you can get the banner image and the css files so our container here has a flex group one so it can take the all the available width here actually we don't need this background color here now so we can save we're setting the padding to 2 em so we have a little bit of padding on top and the left right side and then we're setting the background image to our image which is this image here but the image is very light so if i were to remove this so let me just remove this control x control s as you can see the image is very white so our text is not that readable so that is the reason we are adding an overlay of radial gradients a radial gradient of rgba00 and 40 opacity and rgba 0 0 0 and 80 opacity so now we have this darker overlay here and then we're just simply saying the background size will be covered background position will be centered so the image will be centered i don't think we need the color to be white here since we already set our body to have a white color yeah when nothing changes so and then we're setting the display to flex and flex direction to columns so everything will be on top of another and then we're saying justify content to centers so everything will be on the center and not on the top we have also set the text align to center so the text is now center and then the title have a font size of 3 em the info which is this text here would have this this test font size of 1.1 em later spacing one pixel line height of 1.5 so there's a little bit of space between each line we have a margin top and bottom to 1.5 bm color is almost white but not completely white so as you can see about here not pure white okay then the button button have a margin 0 and left right is auto after that we have removed the border and outline we have set some padding on the top bottom and left right font size to 1 em and letter spacing of one pixel so each character have a little bit of space after that we have set a little bit of box shadow font weight to bold text transform to uppercase border radius to three pixel and we have set a background color and a color okay so this was basically just our setup so now we can work on our sidebar so let me go to app.js here i'm going to create a separate component for our sidebar so let me remove this code here so control x and in the source let's create a new file and let's put it inside a components folder so inside the components folder we are going to have a sidebar js which will be a react component and here we can say export default function we are going to call it sidebar here we are going to return some html so return we can just return again the sidebar with hello text for now let's go here and now we have to import our sidebar so we are going to say import sidebar from components forceless sidebar like so so now we can use our sidebar here so we can simply say sidebar and here is our sidebar again okay okay inside the sidebar we're going to have a item sidebar items so each of this here will be a item so in our components let's create a new file called sidebar item dot js we're again going to say export default function sidebar item and again we have to return some html so return let's have a div here so div let's just say hello world again save and let's use it in our sidebar component so here we are going to say import sidebar item from dot for slash sidebar since we are already in this four components folder and let's try to use it so here we are going to say sidebar item and if you go here as you can see it says hello world okay now let's try to make it look like a actual sidebar item so we're going to give this div a class so we're going to say class name equals to sidebar item inside that we are going to have another div this div will have a class name so class name of sidebar title okay inside it let's have a span tag so spam and here let's just say general so general you can see it says general okay i also want this icons here so for the icons we are going to use bootstrap icon we are not going to be using bootstrap we are only going to be using the icon so simply say bootstrap bootstrap icon cdn so bootstrap icon cdn and click on the cdnjs.com link and click on some files are hidden click to show all files so after that you can simply copy this one so bootstrap icons.min.css click on this icon here so copy link tag is copied now we can go to our public and index.html which is here after this link tag here we can paste our copy text so ctrl v so this is the link cdn link to bootstrap icons files save it and nothing have changed yet but now we can use the i text so i just like font awesome icons we can use the bootstrap icon by giving it a class name so class name the class name have to start with bi and the name of the icon for example bi dash list as you can see now we have this list icon okay we don't want the list icon we are the settings icon so let's again search for bootstrap icons so bootstrap icons and here this is the official link for bootstrap icons so here let's try to search for settings so for the name of settings icon will be gear fill like so ctrl c and you can paste it ctrl v save and here is our icon okay now we need to have a drop down icon here so as you can see in our finished project we have this drop down icon here so we have to do that so here and let's again go to our bootstrap icons here let's search for down so if you scroll down as you can see we have shape run down this is the icon we want let me copy this ctrl c again we can have i tag class name class name equals to bi dash shape run down save it and we have this down icon here also okay let's style our sidebar title let's copy this plus here so sidebar item so ctrl c let's go to our index.css and scroll all the way down let me close the sidebar let's target our sidebar item so our sidebar item will have a padding of 1 em save it and this is how this looks like it will also have a font size of 1.2 am i think 1.2 em we don't need the color that text decoration we don't need it either the display will be blocked save it this is how this look like and we're also going to say when we hover on it so we're going to say dot sidebar item colon hover the background color will be a white color so transparent white color so two five five two five five two five five and the opacity can be 0.1 so if you hover on it we get this white background and let's see yeah should be pretty close to what we have now let's target our sidebar title so dot sidebar dash title the sidebar title will have a display of flex and we're also going to say justify content justify content to space between the space between like so okay now we want this icon here to have a little bit of white space on the right side so we're going to say let me just copy this ctrl c so inside the sidebar title we have a span tag inside that we have a i now you could have set margin right but instead i am going to give it a width fixed width that way it does not matter if some icons are different shape will have even amount of white space so first we are going to say display of inline block after that we can say width to something like 2 em and here it is and i think 2 am is too much let's say 1.5 am and this is much closer to what we had in our finished project and it looks like we have more white space on top and bottom than our previous so here sidebar item the top and bottom padding can be let's say 0.75 em we don't have to make it absolutely perfect this is good enough okay now when we hover on this icon our cursor should become pointers so let's go our sidebar item this will also have a class of toggle button so inside the sidebar title we have this toggle button so let's go to our css file let me just copy this ctrl c ctrl v and dot toggle button we're going to say cursor to pointer so when we hover on them our card's cursor becomes pointer okay now as you can see our item can also have some content inside it so for that i'm going to create another div and this div will have a class name so class name of sidebar content so sidebar dash content just say hello here and here is our content let's go to our sidebar let's go to css and let's see our sidebar here is our sidebar and for the font size i'm going to cut it from here so ctrl x and paste it here so only the title here will have bigger font size yeah okay now let's target our sidebar content so dot sidebar content the sidebar content will have some adding on the top side so we're going to say pt for padding top of 0.25 em so just a little bit of padding on the top side let's see and i think this should be good enough okay and our icon here should also be pointing above when our content is visible so what we can do is let me just copy this so ctrl c and paste it ctrl v so we can say transform so transform equals to rotate rotate to oops rotate to let's say 180 degree so now it is facing on the top side and here we can also say transition so transition equals to transform 2.3 seconds say and i also want to give a transition to our sidebar item so ctrl v and the transition with your background so background okay let me just copy this here so ctrl c paste it and the duration can be let's say 0.15 second so just a little bit of transition now of course by default our arrow should not be pointing above so what we are going to do is we are going to say dot sidebar dot open so when our sidebar has a class of open only that case the toggle button should be facing on the top side otherwise it will be facing on the on the downside and we are going to do something similar here so by default our sidebar content will have a height so height of zero so we we should not be able to see it and we're also going to say overflow to hidden so hide anything over so so now we can see the content but we're going to say when our sidebar has a class of open so dot sidebar dot open and open dot sidebar content and the height will be auto so let's go to our sidebar so here if we had a class of open okay here in our css it should be sidebar item not just sidebar so let me just select both of them and say sidebar item so save as you can see now it is facing above and the content is visible if you were to remove this so by toggling the open class we should be able to open and close our items so we are going to create a state here so here we are going to say import use state from react and let's define a state so here we are going to say const open so open set open by default it will be used it and we can say false and here instead of simply saying sidebar items so let me cut it we are going to conditionally adding class so here we are going to check if our open is set to true if our open is set to true in that case the class name will be sidebar item and open otherwise the class name will simply be sidebar item no open class save so as you can see we don't have the open class so if you were to set it to true by default as you can see now it is opened okay let's go back here and this icon here will have a click event listener so here we're going to say on click when it is click we're going to run this function what this will do is for the set open function so set open and set it to opposite of what open was previously so exclamation mark open save it so now if you were to click on it as you can see we can open and close our sidebar item okay now of course we don't want to just have one sidebar item we want to have a json object and we want to look through it so again i'm going to open up my sidebar let's go to our finished project which is this one and let's let's simply just copy this code here so control c minimize it and in our source folder i'm going to create a new file so new file i'm going to create a new folder called data inside that we're going to say sidebar dot json like so and we can paste what we copied which is simply a json object and again i'm going to leave the link to the finished project in the video description so you should be able to just copy paste it okay so now in our sidebar component so here let's import that data so here we're going to say import let's just call it items so items from and this will be dot dot forward slash data forward slash sidebar dot json now we want to look through all our items and for each of them we're going to render one sidebar item here so let me cut it so ctrl x and here we can say items dot map for each of the items we are going to get a item and here we are saying sidebar for the key let's use index so we are going to say index so now we also want to get our index along with the items so we can wrap it inside parenthesis went item and our index so for each of them we're rendering a sidebar and the key can be the index save it as you can see now we have so many items okay so for each object in our json array we're rendering one sidebar item so of course not item should be the same so in our sidebar we'll also receive a prop called item let me close this so now in our sitebird.js we can also pass the prop so we're going to say item equals to item let's go to our sidebar item.js here instead of saying general we can say item the title as you can see now we have different icons now one problem here is as you can see some have sub menus some don't so we are going to conditionally return two types of markups so instead of this so i'm going to control forward slash to commit it out and i'm going to say if item so if item.children's so if our item has array inside it that means it it has a sub menu in that case we can return this so let me just copy this so ctrl x ctrl v let me just fix the indentation tab and then control forward slash to uncomment it save let's go here click on refresh okay it looks like we have some error that is because we have to return something even if the condition is false so we're going to say else if this is not the case in that case we can return sidebar item and here we're only going to have a title and the text here so save so you can see this is working now okay let's see here what is the problem here why are we not getting the toggle like in here okay we have spelled it wrong it should be children c h i l d r e and s so children's okay so now as you can see some of our items have this icon some don't okay now the icon should also be conditionally rendered so instead of simply having a icon here we are going to first check if our item has icons so we we're going to say if item dot icon only in that case we are going to have a itex so i the class name will be item dot icon so each of our i can now have this separate icons let's do the same in our else block so let me just copy this ctrl c you can paste it here ctrl v okay now the items that don't have a sub menu inside that should be styled differently so here i'm not going to have this div here so let me just delete this div let me do this div here and fix the indentation like so and here instead of using the div we're going to use the a tag and the href so we're going to say href will be and then we are going to use data binding here we can say item dot path or simply a hashtag so as you can see now they are styled differently and if i go to our data.json or sidebar.json as you can see we have a path property some objects have a path some don't so if they don't it will be simply a hashtag so let's style it so let's say let's tell it a bit differently also so the sidebar item will also be class of plain here if it does not have a sub menu so let me just copy this ctrl c let's go to our css file and we can paste it here ctrl v let's say dot sidebar dot plane so sidebar with the class of plane again it will have a color of white so hashtag fff let's go here and i don't think we need the span here either so we can delete it so like so save actually let's just separately separately style our item here so let's go to a css let's target this ctrl c paste it ctrl v and then tag it the i tag this will also have a width up to em and the display will be inline block so display inline dash block save and now we have this styles applied also actually it was 1.5 i think so 1.5 bm let's try to make it 1.7 since our font size here is smaller we need more widths so about 1.7 is good enough okay by default we don't want any underline so we're going to say underline we're going to say text decoration so take this decoration to none but when we hover on them we do want to underline so let me just copy this paste it we're going to say colon hover in that case we're going to set text decoration to underline and we can also say cursor to pointer actually cursor should be pointed by default let's see yeah our cursor is by default pointer and we have this underline okay now we don't want just the hello and our all the sub menus should be rendered so let's see how we can do that and that this one will be very very easy so here we're simply going to have to say item the children's dot map so for each of our children we are going to have a child and index and we are again going to recursively use our sidebar so we are recursively using the sidebar item inside sidebar item component and we are passing the child as a prop save it and click on refresh as you can see we already have our sidebar working but one thing you'll notice is let me refresh if i click here as you can see the inner sub menu is also open by default so we don't want that so let's go here let's go to our sub menu when our sub menu item has a class of open the inner toggle button should not have this file only the immediate one so here we simply have to use this character here so the greater than sign and we can do it here also save so and now it should be working so as you can see only this sub menu is open this one is not if but if we click on it this one is also open if we click here we can open this one if we click here we can open this one we can open the sub menu we can open the submenu inside the sub menu and so everything is working actually let's go to css let's go to our item so sidebar item here we are simply going to support a radius so border radius of 3 pixel let's say 5 pixel and yeah now it is very similar to what we had in our finished project so this should be all for this video and i hope you have really enjoyed it and learned something new if so don't forget to leave a like and subscribe and if you have any video suggestion make sure to leave it in the comment section i'll try my best to cover it otherwise i'll see you next time

Channel: Angle Brace

Views: 38,948

Keywords: react, react js, react.js, sidebar, menu, submenu, dropdown, react js sidebar, how to create a sidebar with react js, how to create a sidebar with dropdown menu

Id: sOhLV-lfgjs

Length: 28min 4sec (1684 seconds)

Published: Tue Mar 08 2022