Build a React Data Dashboard App | NextJS, TypeScript, MUI - 4.Admin Side Menu Component

what's up coders welcome to the fourth video in the series in this one we'll be creating an admin side menu component in this we'll be navigating to different parts of the site we'll have an animation for it to open and close we'll have authentication built into it so we'll have sign out options we'll have icons and all kinds of things that are important to an admin side menu component now to start with we're going to use the mui draw component as a base to build all of this on and with it comes accessibility animations icons all the building components that we're going to need to build this side menu component we've already built a placeholder for now but we're going to upgrade that and to do that we're going to also have to change the header the login component the dashboard and the first page index which hosts everything and including the app component as well so if all of that sounds interesting make sure to like And subscribe and go and follow me on the hashton on Twitter to keep informed of when the next video series or the next video in this series comes out but otherwise let's go start building [Music] foreign [Music] we're going to add two packages to the project which is SAS and prettier now SAS is to compile our styling and pritzia is just a personal preference to make sure that we've got everything uniformed and done nicely now I'm going to show you how to set those up as well but let's just quickly add those now so yarn add SAS and prettier and then we'll add them as Dev dependencies so that's all installed so whilst that's happening I'll just show you how to quickly set up prettier so go to um this is so in webstorm this is how you would do it in vs code I'm sure it's fairly simple as well so just go into settings type in prettier and then just make sure that on save that uh that you've got it set to that just need to make sure that we've got the right package so select that on save all actions on Save I also optimize Imports on save so if you want to set that up as well run code cleanup um so you can or you can't I'm gonna untick that one but essentially optimize Imports and run prettier are really good ones to have uh on everything so I'll just click OK on that you can also get different settings for protea and you can set your own config for pitia but we'll just use the default for now so essentially if you make a change so if I was to do this and then click save it should then automatically rearrange everything and make it cleaner and sorted out so that is prettier in SAS installed let's go check out the draw component in mui so the react draw component is this really cool component that mui has in the component Library and it just gives you an admin dashboard straight away you can have it slide in from any direction so you can use it for all kinds of apps it also has great accessibility so you can detect when you're not on it when you're not focused it announces everything the state when it's open and closed you just need to make sure you add translations for different languages but yeah it's got a lot of cool stuff already built in now we won't be using that version what we're going to be using is just further down here so if we go down here this is the kind of side menu we're looking to have the mini variant draw so we want it to open up but it also have a persistent view of a side menu so similar to Wordpress if you've ever used WordPress there's a version that you can minimize the menu and you can also maximize it so you then have the text and when it's minimized you just see the icons so this is the version we're going to use so if we go here essentially what we want to do is just go ahead and grab all this code and add it to the project so let's go ahead and grab all of these Imports first and then pop it in here uh grab some of these so it's using an app bar which is this now because we've already got our header we don't want to add the app bar so we won't do that just yet but we'll add everything else so we want our open and close mixin and our draw header so this is using styled components which which is actually installed on the project but we won't be using that and I'll show you how to convert that to CSS modules in a moment and we come down here put this into here go down here paste the draw uh part in which is here and then within the function we need to add some of these so we need to add some State and we need to handle some on-click handlers and then obviously we need to call the theme as well so whether it's dark or light So within here so let's just make sure these are all imported use theme okay draw width so we'll just import style components for now just so we can get this working we won't need that for now probably just grab the draw component here for now and then we'll just replace this let's make sure we've got draw width bring that back uh let's set that at the top so now I should have access to draw with mui draw saying it's missing that I'm not sure why it's saying that okie dokie right I should have that now it's not happy about something so I think what we'll do is we'll just take this and get rid of this uh opponent here and add our SX properties and just add these here so we'll just get rid of that one and in fact we'll sort this out as well so draw header is essentially just a div so we'll add that back as a div and it's got some styling uh here so we'll add a side menu component so we'll add a side menu module dot SAS so this adds this adds CSS modules to this component so we'll just go in here and we'll call it draw header and then we'll not add that we'll copy that and put this here there we go um just need to make sure these are correct right that should be fine for now uh we can delete that so we don't need style components anymore just make sure we're importing the draw component I think that's automatically done that for us right no more style components that all seems to be working fine we can get rid of style components and you can see how it's optimized our Imports massively so really it should be pulling from there so not sure why it's unhappy so use theme might not be the one let's get rid of that and then import that correctly so we want to bring this from material okay now that seems a lot happier now we need to make sure we've got these icons imported grab these icons and also grab the chevrons so that should be all our icons I think it's happy right let's go have a look let's go to localhost see if it's got any arrows I'd be surprised if it works straight away oh oh it's there so we've got it working um almost so we just need to sort this out but yeah you can see that we've got a draw component we just need to get it to open so let's go back here and see why it's not opening so this is the icon button an on-click handle draw close it's always handle draw close doing interesting so really what we want this to do is to toggle open and close so to do that all we need to do is just put a bang and then an open and it should just toggle in between that now so if we go back it should open and close and you can see it's got the animation already built in which is lovely we just need to make sure that this is styled a bit more centrally so we could probably delete this now we do not need that and we can probably rename this to handle draw toggle so do that so that just toggles on and let's check this out so I'm just using my keyboard so it's keyboard accessible so that's good and yeah that's good so right now none of these do anything and we probably have way more than we need but before that you can see that this whole draw component opens on top of everything it opens on top of the header and opens on top of uh the dashboard now I don't mind it opening on top of the dashboard too much but we can add a bit of padding and style it a bit differently to make it look better but for now the first thing we want to do is just move that a little bit further down below the header to make it look a bit better so let's do that now so to do that what we're going to do is we're going to style the paper component which which essentially what this is so if we inspect this we can see that the draw component is essentially the paper component so we can Target that with the paper style here the paper class name and we can do that within the SX property in the draw component so if we go here and we open this up within the draw component and we add that and save that uh we should just be targeting this now what we're doing here is we're adding a use media query uh Hook from Material UI so we'll just go and add that now now we've added that already beforehand somewhere else so we'll just add this here I will change this to 600 pixels because that's what we'll need so that should be sorted now and essentially what this is doing is targeting the paper component which is the the draw component and it's saying we want that to sit below a certain amount and it's different for desktop and mobile so we'll go have a look to see how that looks like so we'll refresh this so you probably just need to do a bit more to that so I need to make sure we anchor left uh what we'll also do is just move some of these Styles within to the mui draw component because that's essentially where all of this is happening so we'll get these and we'll move them down and we'll grab these as well and move it further down here too and then if we take a look we can see that it's now working so when we're targeting so when you're trying to make bespoke changes to mui components that's probably the route that you're going to need to go down to get real proper specificity on the inner components that make up the mui components because all mui components are compound components in that they're made up of lots of different smaller components so you're going to need to learn to interact with the components that live inside it a good way to do that is obviously just inspect it and see what components are made up of it you can tell by the class name so how we found the paper component right and we just need to make sure that this is responsive so let's check this on mobile so that works but yeah that seems pretty flush now the next issue is um obviously the dashboard but this mobile menu here we don't really need a mobile menu now that we've got this admin dashboard menu so let's actually get rid of it um and just straight up and delete it so let's go to the header component so let's go to the header component so we can see here that wherever pages is we don't want that so here for example we can probably get rid of this entire box component some more let's delete that too go have a look let's so we can now see that that's gone which is great but we have a problem here we just need to make sure that this is pushed to the right we can do that very easily here so we just add some margin left Auto to make that string and then that should be sorted and if we go to mobile no longer do we have a mobile menu but we do have our admin menu so that is the header pretty much sorted uh we still have our logger options and we'll add some other options here in the future such as profile and things um from Pages we're about to add here let's just make sure this is styled properly as well this icon button not being aligned is kind of annoying me right now so we ended the div earlier but we didn't actually add the class name draw header so we'll do that now and this is essentially the uh the button that has the Chevron on it misspelled that a little bit so let's add it as draw header and just rename it here because this is probably misspelled cool um let's change that to one Rim again there we go that's better so now that's all centered that's all nice so let's finish off this side menu and just get rid of some of this and tidy up and add some options so the first thing we want to do is get rid of this top bunch of icons go back here we'll go to side menu we'll go to inbox so right now it's using an array to map over all of this and produce these components currently we've got the trash and the spam below and we've got the starred and the the drafts and the the really nice ones above so what we'll do is we'll keep the trash ones and the spam below and delete all of this and let's have a look so there we go we've tidied up our list quite a bit and we're going to start to add our own list so we'll just go up here and we'll add some options now what I want to show you here is the menu root list is essentially what we're going to be adding for Our Roots so I'm going to have four roots here we're going to have the data page which is going to be where all the graphs and things are we're going to have the profile page of the user who's logged in and then we're going to have the settings page so this is to go in and change it in settings with the dashboard or anything like that and then we're going to have a final page which is going to be a signing out and we don't want to root for that so that will take us back to the home page where the login is in the future we could change that to login and then what that would do is in the URL browser it would redirect you to the login page but for now we'll just go to the home page and then we need to add translations for this because these are all lower case but in the menu we want them to be capitalized so meaning that the first letter of the word is capitalized and having this means that we can then tie this in to a translation system in the future so for example if you want to translate this to German this value here can then be changed out because it's separated from this you can do that so that's why we need these two here and the final one we want to iterate over because we're doing a map so we need to map over arrays the final array is the icons so we want to add a home icon to take us to the home page which is the data page we need a profile icon a settings icon and an exit icon for the sign out so now that we've got all these three here we just need to make sure that these four are imported so we'll just go grab these from mui icons so just so your way if you ever need to grab um icon components for mui just Google material icons and you should be able to go to this page and just get grab whatever you want so if you want a profile icon like we just grabbed you can do that and we grab person two if you want settings I just type in settings and grab the settings icon which I grabbed then simply import that and use the settings icon here to import and then you should get all of this in nicely obviously there are other options if you want to use your own SVG icon your own custom icon mui can cater for that so you can do a custom SVG icon wrapper and then just put in the SVG code into there but yeah there's plenty of options here we just need the four for now so we've got that here so you can see it's using the old icons so it's using um these here so we're going to switch that up and add our own so let's do that now um so the first thing we want to do is is get rid of this and this is actually going to be our our translations so we want menu list translations so this is then going to input our essential text so let's go let's go have a look so if I open this now you can see it says data profile settings and sign out so we've already got that mapped this but let's change the icons as well so currently in the demo it's got this really weird setup with the how it's doing the icons so basically it's it's checking the index and if it is a certain value it's just going to show one or the other which we don't want to do and that's just to alternate between the two icons so anyway we're going to write our own so what we're going to do is we're going to add our icons the menu list icons and we're going to use the index parameter here from the map to essentially just cycle over the the menu list icons and that will give us our icons so let's go see how the icons look now and there you go you can see our icons have now changed so we have our sign out icon we have our Cog icon and our profile icon and our home icon which shows the data we can change this in fact to be like a graph which might be better let's go grab a graph instead let's use the equalizer then so let's go grab that so up here um we'll get rid of the we'll probably keep the home icon in case we want to use it for a home page in the future we can get rid of these two now uh and we want to put the equalizer in the place of the home let's go have a look so there you go that's a lot nicer now so that's showing the data icon and you can see with mui it's got the nice pulse animations uh it's got keyboard accessibility so yeah it's pretty good the next thing we want to do is actually do stuff with these menu buttons for the admin panel for the admin side menu we actually want you to go to the data subroot and we want to go to The Profile Subaru in the settings Subaru so if you remember in the earlier episodes we actually set up the subroots so if we go to uh pages and we go to dashboard you can see we've got the data profile and settings subroute already set up now these are all ready to go they've got the roots ready we just need to point it to it so we need to go to list item button here and essentially just wrap this with our next link so next link is how we're going to transition from these pages so list item button is here so we're just going to go and complete our next link and with prettier it just arranges everything nicely so you don't have to even think about it so just go back up here and add our next link so next link will come from next um as a component so that should be imported and what we're doing is we're going to add some custom styling because uh it's going to be it's going to be styled in a certain way which we don't want um and then we also want to say that we want to go to the dashboard and that this is our menu root list so this is actually what we want to do and then it's going to say the index so this will point us to the right part of the array of the menu root list which would be data profile settings and then nothing just make sure we have the right Styles because we don't want to add the default styles I'll uncommon this now to show you what it would look like and why we need this so if we open this up now you can see that next auth is adding its own traditional styling we don't really want that so we'll just make sure we don't have any text decoration and then we just need to obviously change the color on that in a moment but in fact let's do that now let's change the color first so list item text here we've got this here so what we've done is we've essentially made sure that the color is pulling in from the theme always because if we just set this to White then it would always be white but we want it to be tied in with our themes that we've created earlier in the second episode and what this does is it pulls the primary color from the theme whatever you've set it to we currently haven't set uh set these so it's going to default to uh the the default colors in the dark theme and the mui theme that come with it pre-packaged so even if you haven't set it it's got four backs that will take care of it for you we also want to make sure that the opacity is correct so it's not all faded out so let's go take a look so if we open that now that's showing the correct color for the Dark theme we go to the light theme and then it switches out so it's all uniformed and matched and wider so if you click the data page now it should take us to the data page but the problem here now is that we don't actually have a side menu so we're going to have to reorganize how our dashboard works and some of our other core pages so let's go back and re-jig some of those so the first thing we want to do is we want to create our own layout component and then we'll create a new index.ts now you can have this layout folder outside of the components folder so here so it will sit alongside Pages that's one valid option for organizing this but because we probably only will have one layout component we're having it here but in the future if you want to scale this up and you want more layout components with nexjs then you would certainly move this out of here and keep it just in the root of the source folder but just a bit of advice for scaling there if you want to just make sure to move that out so just make sure we export it we've created our layout component here and I'll explain what it does we've essentially created our layout component with just some generic props the reason why it's generic props is because we're accessing or we want to access the child component so or the children component so we don't really want anything serious in terms of a specific prop we just want to use the children one which is native to react so we've left that like that just very simple we need to make sure that we have access to the next auth session to know what's going on because we only want the side menu to be visible if they're logged in so session checks here to see if they're logged in if they are logged in and they are in a valid session then the side menu will appear if not then it won't but it will always show the children of the layout here so for example it will show the login or the dashboard or whatever we've also got our main div here our main element which has which we're going to add some styling to so I'll create a layout module layout styling module and in there we'll add some base styling so we want to add some padding that leaves some room for the side menu so we want to have it so that when the drawer opens on the left you can see that big amount of space it takes for the text it actually accompanies that and then based on super ultra wide not super ultra wide but Ultra wide monitors or large monitors wide monitors it then reverts that and caps off the max width and then it just cents it with margin Auto so let's go back here um and let's go to Pages go to index so we also want to grab the header from here we don't want this to sit here anymore because we don't need it here I'll get rid of that go to layout um add a fragment because we've got two base level elements sitting side by side with each other so react wants us to do that we don't want it to say the page number for now I'm happy for it to say um say data dashboard actually that'll be fine so I'm pretty happy with the layout component like this I think that's enough to get going um we're just going to need to rearrange this now to include Cades for the fact that we've pulled out the side menu because we're not going to need that anymore because that'll be in the layout component so let's rearrange this so what we've done is we've wrapped our content in a main class and what we're doing is we're only showing the login and the dashboard based on the the logged in session the logged in status so if they're logged in they're going to show the dashboard if they're not logged in that's why the bangs there it does the opposite then it's going to do the inverse which is just show the login page for them to actually then log in or the login component so that's all set up now let's just go to the app page here and then just add the layout components we want to add that within here make sure we've imported it that is imported so now we've got the just the general page component now wrapped in the layout component let's go see how that looks so we can see now that there's a bit of spacing on the left hand side here so originally it was kind of in there so now if we open this up to a wider resolution it works a lot better and if we go down to mobile view it also sits within the layout a lot more nicely but if it opens up over that's absolutely fine we just have this issue with the padding top here so let's sort that out so what we want to do is just go to the header component so because it's only one property we want to add we don't really want to add its own class name for it in its own file it seems a bit Overkill so what we'll do instead is we'll add some margin bottom just here so we'll go margin bottom and we'll add about 40 pixels worth so if we go back here now we can see that that pushes the content way further down now so if we open that up I think that all sits a lot more nicely now and if we switch between views that also looks uh fairly well proportioned but we do have one more issue so let's assume we've got the drawers open and we want to see the text of whatever it is that we're looking at and we click on this it does take us to the page but you've probably noticed that the actual content is hidden so if we go back you can see that it's hidden you can't really see it so what we want the side menu to do is automatically close it down once we've clicked on an option so we can do that so we go to the list item button what we want to do is to be able to close that down so we go to on click and then what we simply want to do is say uh set open to false so let's open that now and if we click data it automatically closes it down so now what we want to do is actually handle the sign out option because if you know we click here nothing happens so we need to tie into next auth to actually use the sign out options now if you remember we have the sign out method we can use that comes from next off so we'll go up here and we'll create a new Handler essentially what it's doing is it's taking in the text value of the menu option because we want to check against uh whether it's the sign out option or not so if the text does say sign out or you know in future we'll use the translation key to check or some other identifier to check that this is available to sign up for now we'll just check to see that it's signed out and then it's going to use the sign up method from next off and if it isn't this then it's just not going to do anything what we really want it to do is set open false so save that and we'll go down here so we'll just replace this um and just make sure we pass text which is coming from the map so maybe we probably shouldn't put this there let's set that back to null go back down here and set open defaults so let's try it out so if we open this now and we click sign out this should take us to the home page and to the sign in so then click that again sign in and curious bytes now currently there is a weird bug if we go to a page let's not say it's a weird bug it's a use case if we then go to profile and then click sign out it takes us to the dashboard component and it hides the side menu now we're going to sort this out when we create our login component or we work on our login component to be a lot better and with that we'll sort out uh some protected routes so where you can view and where you can't view if you're signed in but we'll cover that in a future video so if we log back in again and we'll go to the home page by just clicking the logo that's all pretty much sorted uh one thing I do want to add is make sure that we've got a title on these icons so we can actually if we hover over it we can actually see what they are let's go here and go to the icons so we just want to make sure we've got a title and it's of text and Aria label for accessibility and set that to text as well so we kind of know what it is so then if we hover over now we can see that it says data profile settings and sign out which will all be translatable because we've added it as the translatable array so brilliant that is our admin side menu component now for now I think that's a really good place to finish on that we can obviously go ahead and improve this as time goes on we can move the sign up button further down we could add custom components Uh custom we could add custom icons you can add some color to it but for now it all works in both themes pretty well but for now you have a working and responsive admin side menu component and there we go so now we have our side menu components set up we have our layout component setup we have our header cleaned up and we have all kinds of other bits and Bobs sorted we also have an admin panel that follows us wherever we go it helps us get from page to page now gets from uh gets to our subroots and our dashboard which we weren't able to do before there's a lot more connected now through this one panel so it's a very important panel to a dashboard in general because you tend to not have the menus at the top and tend to focus on a side menu more but you can always have both so if you have been enjoying the journey so far building the data dashboard make sure to like And subscribe below where also you'll find the link to this repo with all this work and this code so you can check that out on GitHub but like I said like And subscribe and make sure to hit the Bell notification for when the next video in the series does come out and for any other future videos another series you might find interesting also make sure to follow me on the hashton on Twitter for any updates on when the next video or series are coming and just because I like to share my thoughts and insights into the industry and into any front-end technology that I'm working on there as well so with all that said and done thank you for watching I'll see you in the next video but until then I'm Harry and this has been curious by

Channel: Curious Byte

Views: 5,329

Keywords: Sidebar, sidebar menu html css, sidebar menu, sidebar in react js, side menu, sidebar, dashboard, admin template, admin side menu, admin sidebar, admin sidebar react, nextjs, mui, react admin dashboard, react admin, react sidebar navigation, react sidebar navigation menu tutorial, react sidebar menu

Id: sx4m-7SjsZA

Length: 35min 48sec (2148 seconds)

Published: Sat Mar 25 2023