React Sidebar with Dropdown Menu Tutorial - Create Sub Navigation

yo what is up everyone so today i want to show you how i made this simple sidebar with react and style component so this one's similar to the one i made beforehand except this time we're going to use stock components and as well we have little sub menus although you can call this like a drop down whatever you want to call it and you can see here we have a drop down and then also we have here and then also i added just so you can see when you click on a link or a sub menu it will showcase a different url so again you can go ahead and get fancy with this customize this and then also just regular tabs like this and then we got it like that so i couldn't find any tutorials or at least videos showing this so i figured i just make my own and again feel free to refactor this customize it make it better let me know things i can add to it and aside from that let me show you how i made this sidebar alright so here i am on my terminal so go ahead and open up your terminal and navigate into your folder where you plan on creating this or if you already have a project feel free to go in there and i'm just going to go ahead and make this from scratch so i'm going to do mpx space and then say create dash react app and then i'll just call this one react sidebar let's just call this sub and i'll just put like version two and then your name is whatever you want to but i already made a regular cyber force i'll just call this like the second version and i'm gonna press enter and once that finished loading then i will see you once it is completed all right so i'm gonna go ahead and navigate into here so i'm gonna do cd let's do react sidebar sub v2 and i have vs code so i already have this setup where i can just type in code dot and it auto opens for me if you don't then go ahead and just open up your code editor with the project and right now we have these files over here so let me just exit off this let me just rearrange my screen really quick and then i can just bring this over here so we can put this yeah let me just move this way over here and also i forgot to show i don't know if i showed in the beginning but you can like open and close this too by the way and now let's go ahead and let's go make sure everything's here and i'm just going to keep the files for now let's just do you can do command j and opens up your terminal and i have yarn installed if you don't just do um usually npm but i'm going to say yarn start and i have yarn so let me see if i can add this line really quick so if you have this air it's going to make you create this fob you don't have this error then you don't have to worry about this if i just do dot env paste this i can run your start again so again if you don't have yarns do npm start here and then let's do already have this loaded technically so let me just press y so it just loads up on another screen and it looks like i loaded on my new drag is over here so as that's loading we should see a little react icon and so we can go to app.js and let's just get rid of everything here and let's just put h1 i'm just going to type in yo and see if everything is showing okay so everything's working fine in terms of logo this line we can get rid of this and we can just delete the uh load svg or if you need it keep it but i don't need it for this make sure we save the app.js so we don't have the air anymore and then let's go ahead and start adding in our code so first thing again you can reorganize this however you want to let me just make a new folder in src i'll just call this components and then we can just do this is your new file here and let's just create and let's do a let's see side i'm just gonna call it sidebar dot js you can name this whatever and now let's pretty much create our data file too so let's just name this well the way i'm doing it for this tutorial i'm just gonna say sidebar data.js then i'm gonna have a sub menu so this is essentially another component always the way i separated it so that whenever i click on like the drop down arrows it'll essentially showcase this so i'll just call this one like sub menu dot js so in the actual regular sidebar so first off go here to extension little logo and make sure you have es7 these react snippets extension installed because we're gonna do some shortcuts so what i'm gonna do once you have that installed you can do rafce and just press tab and it automatically creates our pretty much our template and for here we could we can change this to like a normal function but yeah this is fine which works too and for now let's just put inside of this div let's just do let's just say sidebar just to make sure everything's working and then we can go to our app.js and let me just delete all of this let's just unplug fragments for right now just to like have filler but let's just do uh let's pass in the sidebar and cool thing is if you press enter it'll auto import it so you can see it from the top so again if that didn't work do all control space and i'll bring it back up again and just press enter and now just close that and we'll save it here and we got the sidebar working awesome so that's cool we got that working so one thing too i want to install is uh so since we're using regular react you could just click this plus sign and add it there or if you didn't want to do that you could also do control c to essentially stop your current application and then we can just do uh i have yarn so if you don't have yarn you say npm installed i'm gonna say yarn add and i want to do styled dash components then also i want to install react dash icons and then also i want to install react router dom and i think that should be all we need for now let me just press enter and go to package.json so right now this is what yours should look like unless there's some new updates but for the most part it should be not it shouldn't include what we just installed unless in the future they added manually but uh now you can see we got react icons here because it finished it up we got regretter dom and we got stock components so now i can just do yarn start again or npm start we don't have yarn and right now we can just press y so run so this refreshes here and we can let me just drag this over so you can see it so it's like everything's good and then if i put like one here just to test it and then i'll just yeah i can see you can see that it shows the one so it looks like everything's working fine so now we need to actually create data so let's just actually let's just do that now so let's just go to sidebar data and again if you have your own data file and you do it like separately like you're on json or whatever then you can um just skip this but uh in case you're just following on from scratch let's just do i'm going to do imr little snippet just press tab import react so i'm also going to be using react icons so if you never used it before pretty much think of it as a way to import a lot of different icon designs without having to manually download it or add like a custom cdn or link in topic like your html page and whatnot so here cool trick is you can just say import star as and then you would name this so i'm gonna call this one fa icons from and then i'm gonna say react dash icon slash f a so in case you've never seen it let me just bring up the little page real quick so here just google to react icons is like the first link and pretty much you can install it like this if you didn't uh do it already but here you like type in uh i don't know we just put like bars and you can see we have all these different icons and these are all from different uh places so you can see all these different icons you can check like like font awesome is pretty popular and you know go through whatever icons you want and then you also search it like this and then essentially the first two letters is always going to be what you put the end so react slash icon slash whatever the um two letters are here so i am gi and then i just called this import star as fa that icons because then that way i don't have to manually when i import like a custom icon i don't have to rewrite it and import it by itself so here i'm just going to do uh let's do shift command or alt down arrow actually there no shift all down arrow bad and then just do this three times and then we can change this one as um so we can do a eye icons and then we're going to say from a i and then we got let's do io icons io and let's do let's just say ri from our eye so again if you add like your own image files or svgs then you obviously have to do it that way but this is just the way i'm doing it and let's just say let's do export cons sidebar data equals to an array and then inside the array i'm going to pass in an object and then here let me actually put this on a separate line so it's easy to read let's just call this you can call this name title so this is just essentially like home about or whatever you want to call your labels so let's say title or view now this is if you follow the previous sidebar video like a way back i made it's almost identical except this time we have like a a sub nav menu or sub data so here path i just want that to be slash overview icon and again i'm just naming i'm just making up these names you want to call this um taco's name and tacos but uh icon makes more sense and for this one i'm just passing ai icons.ai fill home slash so again if you're like what in the world is that essentially if i type in ai fill right now looks like it's lagging but ideally this is what an icon name is and once that that loads up we'll see yeah so here and you can't really see it but uh essentially it's just a home logo so you can see like hey i feel i can't book yeah i feel whatever this one's i feel home so like this one so i'm literally adding this and then i put since i import it as ai icons like this at the top i have to put down the front of it and then put a dot if you didn't do it then i'd have to manually import it at the top like individually and it just takes so much space if you have a bunch of icons and then here i just called this you can rename this but i just did it for like tutorial sake which i can't close so essentially if the uh you click here like if it's essentially it's it's closed right now and then it opens it so that's just like how i named it but uh here just passing ri icons dot ri this will be arrow down s fill closing tag i'm gonna do shift all that arrow again and then just say time we can just say opened and this will just be uh cri arrow up s fill so now this is almost identical give or take these two little icons closing open i added from the previous sidebar bit but this one i added here now just call this one sub nav name this whatever makes sense to you and then i can do array and then object and then ideally here you just pass it into essentially our sub menu items so i'm just going to say let's just try to copy this line here and just paste it in and then we can just call this one like um this could be like sub but i'll just name it something like users you can name the path you know overview users and then here we can just change this to like uh let's see i've got here to be io icons dot io ios paper and then in a sub nav after the first object then if you want to add additional drop down menu items essentially you just copy this and paste and then we can just call this one like um say like revenue here you can say whatever you name yours and then we'll just keep that for now again you can change it but uh just to save time and then here essentially this is like our first little menu so like if i go back here this is overview which is right here then our sub menu or sub nav has these two so this is the way i set it up feel free to let me know better ways or easier ways to do this but um here let's just go after this next object we can pretty much just copy and paste this almost so i'm going to try to copy this and just paste it and then we can just change this to whatever you want to name it so we can say like reports and then we'll just do like uh slash reports and just for the tutorial say i'm just gonna save time and just not refill or i wouldn't update the um icons i'll just go back and do it at the end but in terms of like the titles i'll just do it just so you can see it so this can call this one like uh reports that name reports twice it doesn't really matter i think yeah i tend to say that it doesn't matter but uh here we're gonna say reports here and then we can just say here like uh see slash report slash reports one and then pretty much we can just copy this let's just paste this here so replace this one and this one can be like reports two and this can change this to reports two and i can just copy and paste it again i could just call it the force three here the point obviously you name these whatever you're trying to do and then if you didn't want any uh sub menus you just do a normal just straight up you know title let's just say products and then your path which is products and then icon would just be whatever so icon would just say let's just do f8 icon slash or dot fa carte plus slash and then you just copy and paste that until you uh complete it so i'm just gonna go ahead and just i'm gonna straight up copy in my original data just to save some time but for the most part it's the same concept so let me just copy it in mine and basically i stopped here but i just added another one same exact thing just call it team then just add another messages one except it has a sub menu and then just the last one support so you can see here just to show you like you can mix and match it doesn't have to be like back to back to there but here data file pretty much done nothing too fancy and let's just let me go here and now let's go ahead and actually start adding in some code so first thing is on the let's get rid of all these cool trick go to open editors here you can just click this x it closes everything so i'm just going to sidebar and then i want to do is let's go ahead and import styled from style components and then for here here i also want to import a link so i'm going to say imports link from react router dom and then we have some icons too so let's just do uh just copy this from the the data just save time so i'm going back to my sidebar data copy these two lines here just paste that there and then pretty much we can just save this right now and if you never use style components it's basically css and javascript combined and it's sort of like we're in kind of like sas where you can like nest things and then uh instead of having to write like colon hover you can just straight up do it within the own uh curly braces or essentially these are backticks but uh this one's fairly simple and you can create like a custom uh elements file for this but i'm just gonna do everything inside the default here sidebar today is just to make it easy so what i want to do first is create a nav so from and do let's just say cons now and you can say let's see let's do evil style.div so you say style dot whatever you want it to be you want to be a nav a div a link h1 p tag and then you do double back ticks here and then you just paste in pretty much the style so here we can just say like background let's do what's the one five one seven let's see let's set the height i should do 80 pixels and also let me let me say this really quick and then let me show you it live so i'll just do let me just put a fragment here and then i want to just say let's do snap and then auto or has the uh the closing tag let's just put uh just put like nav for now because then we can't see anything but here you can see it's black or not almost black pretty much background whatever this hex code and then it's just 80 pixels tall so now we can so since this is just a logo like i'm just going to display flex it and center it but you can't see that yet let's just say display flex and justify content flex start inline items to be centered so next thing i want to do is create a uh an icon so here i'm just going to straight up put in between this now let's do just call this one nav icon and again you can name this whatever you want to you just call this icon menu whatever feel free to change it but i'm just going to say that icon and this is going to be a link too so i'm just going to say 2 is equal to just doesn't go anywhere and then inside of this i want to import a icon so let's just say fa icons dot fau bars and then we can just close it so now if i save this nav icon is going to run an error so now we got to do is actually import that and then it looks like uh looks like my icon didn't fa icons yeah so i'll figure this out in a second sometime i don't know why sometimes uh it was bugging out earlier but let me just do this let me do nav icon first let's say cons nav icon so you go to style and then for links you can't just do dot a tag because it's a react router link so what you do is you do a parenthesis and then you pass it in as a link like this and we'll do backticks two backticks here and then i can just say like um margin dash left to wrap let me just say really quick let me just make sure everything is working and saying here attention importer f8 bar is not exported from react icon f8 so i don't know why it's not showing it all of a sudden i have imported as fa icons from red.icon f a and then i have it straight up right here f a icons dot f8 bars so let me see if i can debug this really quick and see what's wrong oh i noticed the error the b is lower key so i'll just capitalize it little tiny syntax error but that should fix it so now let's do this and now what it's going to say is using a link outside of react router so what i'm actually gonna have to do is we're gonna have to actually add this into our app.js but then we're gonna have to wrap this with our router and sidebar essentially so let's do let's go out.js and then let's pretty much import this so let's do here let's go ahead and just say imports curly brace browser router as router and then i'm going to pass switch and also i'm going to have a route and it's just going to be from react router dom so in case you just started react router they have docs where you can see a bunch of this information but here let's go ahead and just pass this in so we can just straight up say wrap everything with a router so like this and then right now we're not creating any routes yet so tag that i could just save this and see if it uh see if it works so it looks like it's working fine so eventually we're gonna add the uh pages but um right now we don't need switching route yet but we'll just keep it there but looks like everything's working so let's just go ahead and style this really quick so for the nav icon the marginers did that and again this is just the way i styled it feel free to change it up but let's just set the font size to ram and if you have your own actual like icon then obviously you have to customize it yourself but let's do uh set a height i should do 80 pixels here let's set the display to flex justify content flex starts and align items to be centered so here is going to be like this and right now let's do uh let's actually have a sidebar so right now you can't really see what happened but when we actually open up the sidebar when we have like the x here this this is the code that fixes it because if it don't it's gonna like push everything up and there's you won't really tell but right now you can't really tell because it's just this icon but uh here let's just do uh let's create a sidebar nav or at least i'll call it that and then pretty much we can just say let's do const sidebar nav equal to stop dot nav back to backtick and set the background to hashtag 15171c let's pass this in so let's just do it right under the nav here and let's call this sidebar nav which should be lowercase and then we'll just save this for now what time we could do um let's pass sidebar wrap we're gonna create this in a second too and then also i'm gonna have my nav icon so i might as well just do it right now so let's do let's copy this here except the f8 bars is gonna be this one should be ai icons dot ai out line close and uh this looks like it looks like most of it's done we're going to end up passing in the sidebar data under here but right now i need to actually create this just say const sidebar wrap so the equal to style.div and set the width to 100 so this should be fine now and should be showing except now what i want to do is i want to put a width so let's do with 250 pixels save it here and tell you you can't really see it but once it's active then you'll you'll be able to notice it let's just set the height to 100 report height and technically there's nothing in here so what we can do is let's go ahead and let's actually add state because right now you can't really see anything so let me add state before i continue so that you actually see what we're actually editing so for state we're going to use use state and if you use used state before you already know but basically you say cons then the brackets say sidebar and then whatever you want to essentially the function would always be set and whatever you named the first value so we can just say set sidebar here and then i'm gonna set eagle to use state want to be false and now we can create a function called cons i'm gonna name this one show sidebar it's going to be set equal to an arrow function and then pretty much we're going to say set sidebar so essentially this is going to update the value and we're going to do exclamation and this is going to change it from the opposite so just true false and then we just gotta pass in you state above here so say like this curly brace and then what i want to do is pass this into the actual sidebar nav so right here so in order to do that how are we going to know that this is actually actually not not right now we're going to do that a second we're going to do on click first here so on the bars icon the handler menu you see should be on this so again that was the one reason to i forgot i was on the wrong tab i was wondering why is it not showing okay so okay you guys are probably going crazy so it looks like it is showing i was on the wrong tab but uh either way it's fine we're still we have state but at least now we know that everything is working fine here so what i want to actually do is for here let's just set an on click because we're already doing this and i just want to trigger that function so let's do curly braces here and we'll just say show sidebar and if i save it right now let's see if it doesn't really do anything yet because we haven't added the property inside the style component to actually do anything so let's actually do that first so right now let me go back to my sidebar nav so at least we know that the height everything is showing and let's just say i'm kind of say display flex so again these are just values once the actual sidebar data gets passed in you'll be able to see it but let's just do just my content center let's do position fixed save it for right now and then let's do top zero and then let's do a left so now if you never use stock components the cool thing is notice how also it moved at the top the cool thing is with this is that it you can pass in values inside of the actual styles instead of having to do it with like regular javascript manually so we can each do a dollar sign color brace parentheses curly brace so we're going to destructure this and then normally do like props dot whatever you name it but i'm just gonna do it structure so i'm gonna say sidebar what i call it here and there's gonna be an arrow and then parentheses and then you name whatever you just called so i'll call the sidebar and then we'll use trinary operators so question mark so if it's true i want the left value to be zero and then colon else i want it to be minus a hundred percent i've got the semicolon transition let's do 350 ms and z index just in case i want it to be like above everything you could put like 10. and then we can save this so right now we have an on click on the show sidebar so if i click it right now nothing's happening and the reason nothing's happening is because there's no value to tell like where's the sidebar right here so we have sidebar and i'm clicking it but it doesn't know what sidebar is because we didn't pass it anywhere so i wanted to be on the sidebar nav so i just passed inside bar like this so now if i click it it should show me the sidebar so just like that and then i click on this x it doesn't because i need to add it here so let me just click here and add it here and that's the most basic way i did it feel free to let me know alternative methods and now we got a little sidebar action so that was pretty simple now let's go ahead and actually pass in the data so how are we going to do this so in order passing the data first off we need to actually import the data so let's go up here and then just say import curly brace sidebar data from close dot slash sidebar data and then we can go here and now the thing is actually let's create the sub menu first so before we do this let me just say this for now make sure no errors and let's create the sub menu first because we're going to map through and then pass in the sub menu so here i'm on the sub menu now and this one's once we finish this will pretty much be set so let's just do import or imrs i am all right there and then let's do import link from let's do react writer where is it at where dom and then let's import styled from stock and points so here let's create the sub menu so we can just say const sub menu equals to arrow function i should have done the um the rfa snippet thing but we'll just may do for now and just say export default sub menu and here let's go ahead and return and i want to return the sidebar link which will create so let's just do let me just pass fragment really quick here put everything in between it so let's do sidebar link and then the sidebar link now this is essentially the the links now like the actual the data stuff that we added so what i want to do in order to actually get that so for instance this is going to be a link so in order to do links you say 2 you know the normal path but since we're passing this from data file we're going to say item dot path now you're wondering why am i saying item that's just what i'm calling it you want to call this chicken nuggets call it chicken nuggets but uh it doesn't really matter whatever your first words you name it dot the data tile right here the name you name the title so like uh not title i think you named it in the data file so you want to do item.title it will show overview item.path item.icon item guy etc and then let's do uh let's close this out and then let's say we'll now save this let's let's actually style this first let's do const side bar link equal to style with a link actually not yeah here and then back ticks and there's typical let's just say display flex for now let me save it and right now you can't see anything and it's basically invisible so we can do set a color just like real quick see if we can see it hashtag e1 e9fc and you can't see anything yet because we technically have it mapped through this so let's let's actually do this now so ideally we're gonna have all of our data so it's gonna be hard for me to showcase this since i don't have it mapped yet but let me see if i can figure out a good way to showcase this where you can actually see everything so let's let's do this let's uh let's make this and let's make sure this is a closing sidebar link let me just pass in the rest of the values so we can see like initial visual and then from there we can add the rest so one way we can do this i wrap these by with a div so i just did a straight up div nothing fancy with it and then do curly brace item dot icon and then inside of this div two i have a name called sidebar label you can call the title name but basically this shows the item.title so we have that there and now let's go ahead let me see if i can save this for right now and then we'll add the remaining uh files later so what now let's do and yeah it looks like i didn't make this candle so here so it's sub capital n menu and then save this here and then we need to add sidebar label so let's do cons sidebar label equal to styled and i think i made this one just straight up uh i think there's a span yeah so do style.span which is backticks i'm not gonna add any styling yet but uh i'll just say this for now because i want to map through this on the main sidebar you actually see what's happening so this isn't completed this is just like enough to show us something so let's go back to sidebar now and then once we add this all we have to do after just pretty much finish up the sub menu so under the nap icon here but above sidebar wrap i'm just going to do curly braces and then i'm going to say sidebar data so this is because i named it sidebar data you name this so whatever you want and then you'd say that name in the actual place you decide to map through this so you say dot map and there's the error function so double parenthesis error function curly brace in here again when you're wondering why did i call it item this is where i call it item you want to call this should you call it chicken but i said item so i'm gonna say items and then just set index when i pass in the key and then we're just gonna return and then we'll pass in the sub maze so sub menu which we were just editing earlier i pressed enter so i made sure it's imported if not imported above and then we got to pass in the item values through here as well as a key so we're going to get mad and we'll just upload it so if i say this now it should display the data visually so let's see item is not defined i don't see so let me make sure right now oh yeah i didn't i didn't pass it into do not pass this in the sub menu yeah yeah so sub menu doesn't know what that is so here we gotta destructure this and now i should be able to read it when i do this like that and i say what does that say sidebar that oh data what is what is that what is that that is supposed to be data and let's save it now should work also perfect now we basically displayed everything looks hideous but that's okay we're gonna we're gonna make it look good so right now let's do uh let's just finish styling so pretty much majority done is just this is this is left so let's actually do uh some styling here so let's go ahead and finish up the sidebar link so here let's just do what i put justify content space between let's do a line item center let's do padding 20 pixels list style let's just do none height let's say 60 pixels and then let's do uh let's see text decoration let's do down here color already the color font size to 18 pixels so this is like super slow for some reason but yeah it's working now and then we can do however so the way you do with style components you do and colon and then your values or hover so notice how i just nest it in here just like sass then we're going to say background hashtag two five two eight three one and i just put a border left now i didn't add the active like label where you click it is active but i can do that for like a future video but i try to do mainly the drop down for this one let's just say like 6 3 2 c4 and it's precursor pointer so we should be good here and i don't know why it's so slow but yeah it was like this and it's like massive why is it i think i need to add some more stuff but let's go to the uh sidebar let's see sorry about label it's just spanish just do margin dash left oh 16 pixels what happened here so there got some spacing and pretty much now we need to add the drop down so let's do uh i'm not sure why is it it's probably the pack i i i did that in a second but uh pretty much usually the drop down link so here cool thing too is you notice the arrows aren't showing so this is something i came up with and i got some help from stack two but pretty much we can go under here under this div and i wrap everything this essentially sidebar links right so these are like these boxes right here that i made these are essentially the sidebar links or i just call it that here i did another div and then inside this div i did like a multi ternary operator so i'm targeting the sub menu sub nav so i'm saying i am not sub nav because this is where the drop down actually comes in so now when you say item.this whatever you name yours and then i'm going to check if that is actually true and also if we clicked and essentially this is gonna show us that the seven app is even there because here this is just checking if it even has a sub because if it doesn't like down like way down here like supported just by itself you don't want to have an arrow on support like this doesn't make sense you only want it if there's a sub nav under it so this is saying i'm a subnet if that's true and there's a sub nav is clicked then i want to show item dot icon opened else then we have item dot sub let's do so colon sub nav if that's true and then we'll do another question mark and say item dot icon closed and then else if there's no there's no sub menu or drop down then i just want to show no so i save saving here this should showcase the actual icons saying sub nav so it should be let's see i don't know if i passed oh yeah so right now attending to get that state i forgot to do that so let's do let's stay really quick that way we can actually see what's happening so let's go here and let's just do const say sub now that's what i call it so that's what i meant by if it's true let's just say set sub nav here equal to use date of false and then your same function console sub nav here just basic set sub nav to the opposite subnet and i think i have to put state yeah so go up the top let's do use dates and then right now for the the link we gotta add a on click and essentially i want to check if uh item.sub nav is true then if that is true then i'll someone do show sub nav so that's basically checking if there's actually a sub nav then i want to trigger the function else don't want don't actually do anything and then we should if i say this it should work so let's see so now saying shows up now what did i miss type oh yes this should be show so now with a lowercase and if i click it here now notice how now the only ones with the arrow are the ones with actual sub menus now we haven't added the actual sub menus yet but the thing is here like there's no value if i wanted to call this like um put quotes first save it and then if i highlight this oh you see okay i just did it anyways so essentially it's saying these values don't hit any of this logic here so it doesn't run true for any of that so it's essentially it's returning that so i just put no so i feel like a better way of um doing the same thing feel free to comment below but uh this way it's just pretty basic and then now all we need to do is just map through our sub menu or sub navs and then we can display it so here under sidebar link so right now this is pretty much this now the rest of this part right here is this next little line it's a code that i added so i just do curly braces here so now i want to check if sub nav's true so essentially you clicked it and i know so we're going to say in and then we say i have a double and i'm not sub nav so now we're going to actually go and check if there's actually a sub nav data value we're going to map through it and i'm going to pass in item comma index and then we should do an arrow function here and then pretty much we can just return whatever design you want to do so here's call this one drop down link 2 is going to be to the item dot path so again should do one more time we're going to sub navs we're going to do item dot whatever you call this i'll call this path so now it's going to show this path and you want to call this one again call this taco you'd say taco.path so again that's what you do and there's a key let's put index and then here i want to have item.icon show and then also i have sidebar label this should be item.title so right now this needs to be styled so under let's just go under here say cost believe it called drop down link then you go to style and i think i put a link for this too so let's just say princesses link and it's backticks and then pretty much and let me go back to the original just to make sure here and then we can just say background what's the hashtag four one four seven five seven so technically now if i click these it shows it right now it looks ugly but um let's just style it really quick so let's just say height put 60 pixels padding left three rem display flex line items center text decoration none color hashtag f5 f555 and font size but in pixels and then i should put in colon hover background let me close my terminal background 6 32 ce4 and cursor pointer so save that there and that should yeah so now everything looks nice and clean and i don't know why my padding is like ridiculous for some reason so i must have mistyped something somewhere i guess i'm not sure why maybe it's this padding did this padding is causing the height like crazy yeah so looks like the padding looks fine maybe it's the font yeah i don't know why it's just so much bigger compared to this one but again that's just the styling so feel free to edit that but right now majority of the functionality looks like it's working completely fine and i think i want to do one last thing is change the icon so like on sidebar technically i could have just said color but also since uh you can also wrap this with like this thing called icon context that provider and then value double curly brace we can say color colon or of course hashtag f and that pretty much we can get the closing tag and just go under and then we have to import this to the top so let's just say say import oh actually it looks like it already yeah and probably got this from react icon i don't know why except we'll just save and see if it works so we save yeah so now it's important here i didn't have ad lib last time but looks like you just auto ended it and this pretty much allows us to if you have any icons within here that are react icons you can pretty much style them just essentially like the top level without having to go individually adding you know custom code but see how like that so again we'll just save it and for the most part majority of it is finished the only thing we're missing is the routes and then i'll figure out why the the height i don't think that really matters for this thing unless i'm am i zoomed in i don't know yeah i don't know why i'll check that in a second but let's go to app.js let's go here and first let's just go to src let's do a new folder let's call this one pages and here let's do a new file let's just call this one overview.js this one's pretty basic but we can just do like r8fce and then pretty much here just straight up say each one overview and i have these classes on here just so that it gets centered so let's say class name equals to let's just say home and i'll just save that and then pretty much we can go to the app.js so here we'll wrap these with a switch and then that's we'll actually pass in my route so let's say routes the path is equal to slash overview we have exact and then component so here i want the component to be the page display so the page is overview and if i do closing software closing tag we actually have to import this too so let's just say imports overview from dot slash pages slash over view so it should be good save it and technically by shrink it oh i know why it's not uh it doesn't look right because i had to add like a at custom stock but they tell you you can see the overview but here let's go to app.css that's really quick just come in and get rid of this and let's just straight up reset this so this is why it's not doing it so let's say box sizing border box margin zero padding zero and just put on font family i had lato but i mean it doesn't matter you can fix this later use whatever font you want to but i pretty much imported this so let me just save some time let me just copy this in here just short lines basically just added google font same thing we just typed and then here i just added technically you can just name this one thing but i just did it like this just display flex height this is really relevant because all this does is just centers it so i can see what page i'm on but if you want to do it feel free to copy this but all we need to do now is uh so for the most part i'm not gonna do all the pages like i did in the original version i'm just going to show you the reports one because this this is pretty uh self-explanatory they're just straight routes but like uh the sub routes something i i learned new that i want to show you how i did it and i just created a new page here so a new file just call this one reports.js and here we just say import react so imrc right and then we can just say export cons reports and these are arrow functions and i'm just exporting like this name exports and then we can do return div or we'll tell they're going to say dot reports makes the class for me and just call this reports so the way i did the uh like the sub links is that you copy this just paste it within if you wanted to make these like separate pages and they have like a bunch of content feel free but uh there's like a way i did it and i'll just say reports one and this would just say reports so 1080p slash reports one and then let's just yeah let's copy this because this makes more sense so do here and then here this can just be two so should be reports two ports two or this should be three and there should be three so i save this here let me go back to app i think i didn't add this let me say reports just so it gets the same styles and looks like what i have i have extra curly braces from copying yes this is basically the reports and then when i went to app.js the way i did it was i just straight up let me do command b to close this let's do uh should fall down let's do three times so one two three and how many how many reports that one two three so actually four let's do four so here the first path is going to be reports then the component is going to be [Music] reports and then we can import this we're going to say import curly brace this is a name we just say reports for the curly braces if you defaulted then you do you want to use code braces but let me say reports one and react doesn't like having more than one default export so like if i did uh go overview and try to do like the same thing go overview t or r if i save it it's gonna be like let's see yeah it doesn't like it it's like only one so that's why i didn't named for the reports if you know alternative way let me know but uh let's go here let's do reports two reports three it's going to be from the slash pages slash reports so now all you do is just change these so pretty much let's just go here say reports one let me copy this and then paste it again save reports two copy this then reports three let me say that first because i want it to show let me make sure works fine okay so now for the reports one i want to say report slash reports one we can copy this and then we have reports two then we have reports three so again make sure on the your data file that this is matches the link you put because if you did it's not gonna know what you clicked so technically if we go and then we click on reports it'll show now ideally if you have like a drop down you probably wouldn't want this to do but i just did it for this video so you don't have you could leave that link out if you didn't need it but here we can go to reports one reports two and reports three so again if you want to do like these down here you just copy so like i should do really quick on pages let's just go like um team.js and then you straight up again you copy the i'll just copy the overview paste it i'll do command d just call this team so you save this here and then i go back to the app.js i'll just straight up paste this in so i just say um here slash team team components import team from pages slash team should be team capitalized so now i click team and there you go so that was basically these don't work i didn't add anything but ideally you can see reports works again and then team and then notice that the the height sticks because i added the uh the reset and app.css right here so this is pretty much how i made this really basic simple sidebar with drop down so if you did enjoy this definitely like the video subscribe new to the channel let me know any comments on ways to make this better or if you have any ways to refactor the code feel free to send your own github link i'll definitely check it out and aside from that i'll see you in the next video

Channel: Brian Design

Views: 58,795

Rating: 4.9577093 out of 5

Keywords: react sidebar, react sidebar with dropdown, react dropdown menu, how to build a sidebar with react, how to make a sidebar with dropdown menu, react js, react sidebar hooks, react hooks, react sidebar with router, react projects, beginner react project, react dashboard, react sidebar dashboard, react js sidebar, dropdown menu react, react dropdown, react dropdown menu tutorial, react sidebar and navbar, react sidebar with sub menu, react sub menu, sub navigation, react

Id: mN3P_rv8ad4

Length: 55min 32sec (3332 seconds)

Published: Sun Nov 29 2020