NextJS Nested Side Navigation Material UI Custom Drawer | Code Blog [5]

welcome to the continuation of our next js coding blog in this video we'll focus on the navigation with an emphasis on the side navigation we're going to customize the material ui draw component such that we can have nested sidebar navigation and routing so if we take a look at the screen here at the demonstration we can see that we have this nesting in here and we're currently in the learn section for node and i can go ahead i can click on the typescript section and they'll take me to the typescript tab now i'm currently on the introduction and if i click on basics and i click click on types and this just takes a little bit to load when we deploy the application should be all good but in development mode i think because we're using this syntax highlighting here and also the mdx component it needs to do a lot of work but essentially what i want to highlight here is that we're in the typescript section and we're in a section called types which is nested within this basic section and then it goes and it highlights basics and also highlights types here so let's go ahead and get started here we have our project so far and i just want to make some adjustments to the articles to the learn articles so let's just go ahead and click on learn and open up a couple of our mdx files here here we see the contents of what we're going to display so we have this metadata up here topic section and part and this shell suffice the introduction it doesn't have any subsections nested within it or anything like that but if we open up the typescript folder here we'll see that we also have an introduction here so same thing we've got a topic section and part so each of the sections will have an introduction but they'll also have some other articles and there's two different scenarios that can happen here either you can have a article or a section that has subsections or the section can be the topic in itself so just to demonstrate i'm going to create something here i'm going to call it the extra dot mdx and i'm just going to go ahead and copy some stuff over here i'll just copy that here and we'll just say you know this is some extra stuff extra stuff and you know it doesn't really matter what we have here just have this here so this is just it's similar to the introduction mdx file but i want to have a separate file or another file that is nested within a subsection so i'm just going to have a file here and what i'll call it is i'll call it types because we're in typescript section and once again i'll copy this contents over but what we'll do in this section here is we'll go ahead and we'll just add a subsection and of course you can you know create your own uh learn sections or you can just copy this from the github repository linked in the description below but let's say this subsection is the basics and it will just be the basic types of typescript and we'll just say here are some basic types so i can just go ahead and copy this here i suppose and now we have this extra section here so we want to be able to handle that and one thing i'll do is i'll just close these files up and i'll just start the server just so we can see where things are at so we can see here that we don't have the side navigation bar and we also don't have the learn navigation bar and we're just getting the article displayed here on the screen so right now we're in the learn section for typescript and we're looking at the introduction um one thing i just want to start off by doing is just adding the highlight i want it to be the secondary color rather than this blue color so i'll start with that so if i just open up the styles in the global styling here i can go ahead and i can just create a few things here so the first thing i want to do is just get the selection tag oh it's a pseudo selector for the selection event and what we'll do is we'll just give it the color and i've already pre-selected this this is a color from the theming section so you can open up that and choose your color so f73378 and i also just want to make the code a little bit bigger in the code snippet so i'm just going to target the code block and i'm just going to say i want the font size to be 20 pixels and i want to have a font weight of 700 so nice and bold so we're able to see it nicely and i might go ahead and just make the font size of everything a little bit bigger because i think it's a little smaller than 16 pixels so let's make that 18 pixels and now you can see that the selection is now that pink color and the fonts a little bit bigger and this is also bold so it's a little easier to see so what we'll work on next is we'll just create the simple learn bar just so we can navigate between our main topic so between typescript and node for example and then we'll work on the side navigation part so inside components let's create a new component and we'll call this the learn navigation component and then we can just use the rfc rface it's code snippet so we can generate our react component our arrow functional component and then we'll just rename it to learn navigation component so this is going to take a few things what we'll need here actually is just the topic so i believe with um we'll need to have a type here in models and we'll just call this the topic.ts this is where we'll have all of our topics so i'm just going to export type topic and right now we have typescript and node and of course when we add more topics we'll add them here there's not going to be a huge number probably five to ten or so so we can just come here and add that and then we can get the correct type safety that we want so what we have here as a prop is we're going to and actually we're going to use functional components so we can just go ahead and get the props here and then we'll just need to import the functional component type from react and this allows us to create our own prop so we have an interface here with the props and we just want the topic and we can use the lowercase method and then we can pass in topic so this is built into typescript where we just take the lowercase version of topic because we want to match the string from the url to the topic although the topic itself it doesn't necessarily you can have a capital letter here and here so we just need to get that type all right so with that we can destructure the topic and then just get that in there so what we'll do is we're going to display different colors for different themes so we can just go ahead and get the custom theme in anticipation to utilize that as we build it out and we'll do the same thing for the side navigation when we get to it so we'll go ahead and we'll import that and we can just do a control period and then we can import that from mui material and then i'll just do an alt down and space out the react components with the material ui components and of course my component or type so now we have the use theme let's go ahead and we'll create a couple of css styles here so we'll start off by having a menu item being active because we want to change the color when it's active so we just want to have a cursor here of pointer our background color or we can just say background and this is where we can use our custom theme so let me just do a comma here so we can access the custom theme we can access the palette and then we can get the primary and then we can go ahead and choose the light variation for when it's active to distinguish it from the background so then we'll have we'll give it a height of 48 pixels and we'll also give it a line height of 48 pixels next we'll have the menu item and this is just going to have a top padding top and bottom padding of zero and a side by side padding of eight pixels so there's some separation between the menu item text on the left and right on horizontal and then we can just target the hover state by typing ampersand colon hover and then we can just refer to the active menu item styling object that we just created here and of course we'll just need a comma after this property here so what we'll do is we'll use the app bar and i'm just going to copy some imports over so the imports that we'll have here i'll go through these we can copy the code we're going to have the link from next slash link we're going to have the app bar toolbar and typography and we've already got the use theme and topic here so with that we can come to our code and we can use that make use of that so rather than returning this div here i'm going to return an app bar and the app bar is going to contain a toolbar and the toolbar will contain the links so let's start off by creating the properties that we need firstly we want it to be fixed so we'll just say that this is fixed and then we can use the sx property to get the styling for this particular material ui at bar so the first thing we need to do here is we need to make sure that we don't have any problems with the indexing of things because when we have our side navigation bar we need it to be below the headers or the navigation bar parts at the top so what we're going to do here is we're just going to get the z index and this can take the theme as a sort of a arrow function here and then based on the theme we can get the z index property and we can do that of the draw like that again the draws the component that we'll be getting soon and then we can just plus one to that so then this will be on top of the draw or the side navigation bar and i think we need to do this for the header that we've created so let's just go ahead and open up the header component and for the header component we see that we have this box surrounding everything with flex grow then we've got the app bar and we can see here that we got this position here of static now that we're going to have two navigation bars on top of each other we want this to be fixed and once again we'll go ahead and we'll get this sx here and we can just copy this here so we can put the navigation of the header component in front of the soon to be coming side draw component so then we got our background color and then we also have our color here so we've got our links here so right now we have our icon um button uh just my name there then let's see so i believe that's all we need here in the header components let's just save that and close it up now if we go to our if we go to the page where the this is going to be rendered let's just go ahead and get the component in so we can start to see what we're working with so if i just close everything up i'll be able to easily navigate to the learn section uh that's where the articles are but in the pages in the learn section we can see that we've got this topic here and then we've got this dynamic page being rendered the topic and slug are both dynamically rendered so let's just take a look at our code right now we're just returning the mdx page itself so let's just go ahead and expand on this so for the learn page we want a second navigation bar that we're just working on here so let's just go ahead and use this component here and we'll place this right at the top so what we'll do is we'll just have a fragment here so we can have the one element or one pair an element and then we can have the learn navigation component and we can just go ahead and have a self-closing tag here and this will take a topic which would be a topic and of course we're going to need to adjust our imports here to be able to do that so when we come down to getting the static props we have our topic here and we have our slug and then we're looping through all of those and we're returning the [Music] paths and the four back then we want to go to get static props because actually we already have access to it we have the source or the mdx source being returned here but we just also want to return the topic which we have access to and also the slug so now that we're returning the topic and the slug we can come back up to the top here and we can say okay in addition to the source property we can access the topic and the slug properties and we're inferring the type of those with the infer get static props type type so that's all good so next what we want to do is continue working on our lower navigation component so here we have the topic here so let's just go ahead and import that if we can so i'll just go ahead and copy this import actually i'll just type it out so we're going to import the oh it was actually already in my buffer so that's all good import the navigation component and then we just need to go back three directories and we can reference that and now if we save that we can see where we're at so right now we can see that we've got this um singular navigation bar now we want to display things nicely here so let's just keep working on it so just below the learn navigation component i'm going to have another div here and inside this div this is uh actually this is where i'll have the side navigation component so we'll come back to this but right now we just want to fix the uh you know this let's continue to work on the navigation bar so right now we have the app bar in the position fixed and then we'll just adding some styling here so to fix the layout will just have a top property which is nested within the sx in the sx styling so we'll give it a top of 64 pixels that's how big the first navigation the main navigation or the header is the header component so then i'll have the i'll give it a background color and this is where we can access or use the custom theme so we have access to the custom theme and we can look at the palette here and we'll take the primary and we'll take the primary i will make it the dark and then we can also just have a color so the color of the text which will be also the custom theme inside the palette and here we'll use the primary contrast text that we have access to so let's just save that see where we're at and now we see that we've got these two navigation bars on top of each other so that's what we want so let's continue to work on this so let's make it a little bit smaller this secondary navigation component so on this toolbar here i'm going to give it a style and you need to use min height it's just in the documentation for the toolbar component and i'm going to set this to 48 pixels so we've got 64 pixels for the first one and then 48 pixels that's a nice uh proportion of 64 pixels roughly two-thirds so we got the height of the toolbar being a little bit smaller then inside here we're going to use the next link component so we're going to wrap the link component um around a typography component and the typography inside the typography will have some text here and actually we need to have the href for the link so let's just create that so this will just be going to slash learn the absolute path so from the home path to slash learn slash type script and we can point towards the introduction here and then we just need to add in the past hey ref attribute and then in the typography here here we're just going to we can just hard code this we'll just say type script we don't have to make this too fancy or anything because you know there's only going to be the five or six seven selected topics and we'll know those ahead of time if we're doing something where we needed to dynamically generate those then we could do that programmatically of course but here in our typography we'll just give it some styling here so basically if the topic that being passed in is of the type type script then what we'll do and remember it's going to be lowercase because it's coming from the url so in that case what we want to do is we just want to go ahead and take the styling from the menu item active because it means we're on the typescript page the url has typescript as the topic so we want to highlight that menu item it's going to be the active menu item and in addition to that we'll just give it a margin left of 216 pixels um and we'll see why that number in a moment basically um when i have the sidebar it's going to be 240 pixels on the left there and then it's just a little bit of rounding with some margin and padding and stuff like that just to line the text up next to the side navigation bar so that's the first case and then in the second instance it means it's not the type script so we can just go ahead and we can say we can just get rid of this object here we still want the margin left but we don't have the necessity to [Music] um get rid of this to highlight it from there so that's that there i think i can get rid of one of these extra brackets here so let's just go ahead and add a couple of more properties here so the styling here this is going to pertain to the menu item so the menu item just here each menu item is going to have a bit of padding to left and right and a hover state and then we can just give it a particular variant so we'll just give it the you know the h6 variant so we'll just go ahead and save that so now we can see that we've got typescript here and we can see that the text of it is black so let's go ahead and adjust that so let's change the color of the typescript text from black to white and what we'll do is we'll just head over into our styling into our theme actually in utils and we'll just go ahead and we'll change this contrast text to fffffff which is white and now if we take a look we see we got this white here and we're on the typescript page so it's highlighted for us so let's add another option just to check that things aren't highlighted when we're not on the correct slug so yeah let's go back to here we can shift alt down the typography here actually we'll need the link as well so let's do that and now here we want to have a extra option for the node section here and essentially if this is learn slash node such introduction it means the topic is node then we can more or less have the same thing here except in this instance only the first one needed the margin left here so we can just go and remove that and also remove that and i'll just evaluate to an empty object and then we have the menu item and then node so let's just make this uppercase to be consistent with the heading in the other one let's just go ahead and save that and now we can see when we hover over we get that and if we click on node it does take a little bit in development mode um but it does route to where we want it to go so we're going to the typescript slash introduction section don't worry about the syntax highlight not working although we can see that our custom highlighting is working if you refresh the page it should work um and of course when we render the in production we'll be having the html static assets so this should be all good it's just while we're generating this on the server in run time in development mode so okay so that pretty much is the navigation now i want to work on the side navigation so let's begin to work on that so to work on the side navigation draw component we're going to need some data that we're putting into that so we'll need to come up with a data structure that's going to represent our contents in the navigation all the routes that we can click on so what i'm going to do is inside utils i'm going to have another folder and this is going to be dedicated to the learn section and i'm going to create a file here i'm going to call this typescript dot ts and this is going to refer to the learn type script and menu so what i'll do is i'll export the typescript menu which is going to be of the type menu and we'll need to create that so let's create that now actually we'll just put it up here for now and then we'll eventually put it in its own file so basically a menu is going to be an array of menu items so let's create the menu item type so menu item is going to be a record where the string is going the key is going to be a string and the value is going to be an array of strings and then the type of the menu is going to be an array of menu items and i'll explain the types when we get some real value so here's our actual values we have our menu which is an array of objects so a record is sort of like an object and each object will have a key which is a string and a value which is an array of strings so we're going to have a key here and we're going to call it basics and then in the basic section we're going to have types and then we're also going to have something called syntax here these are just you know what i've decided the file names are going to be inside the basic section and then i want to have a section here called extra but there's going to be nothing in there and the idea is you're inside typescript and you know you might want to click on the type section within the subsection basics but you might not want to display a subsection you might just want extra to be a one-off so we'll just have this data structure here where the key is that you're that route and then an empty array just signals uh that there's no uh nested articles or snippets inside that section and then we can have some advanced stuff here just so we can visually you know appreciate the work that we'll do so we'll have generics here and classes here i don't know if classes actually is advanced or not but just for the sake of having some data here so now that we can see our types let's go ahead and put those into models here so we'll have a file in models and we'll just call it menu.ts and this is where we'll export these types that we've explained we'll just go ahead and save that and now we can go ahead and we can import this from our models here so we go back to directories in the models folder in the menu file so that's the typescript side navigation that we're going to have there so next i want to work on the node just so we have two so i'm going to have a new file here i'm just going to call this node.ts and i'm just going to copy this type script here so rather than typescript menu you could probably guess that we'll call this node menu it's going to be at the type menu so here what we'll have is we'll have so node has rest as a topic and then we'll just have some subtopics simple advanced and then we'll go ahead and we'll do the same thing with the same names and we'll do that on purpose so we don't get any clashes in our data or if we do we can handle that so i have my topic there for graphql then simple and advanced and i can just go ahead and save that and now i can go ahead and just um close those files but i might just keep them open just for now because we're just going to create a little helper function and we'll do this in here and i'm just going to have an underscore before just to signal that it's a helper function and i'm just going to call this menu lookup dot ts so menu lookup basically what we need to do is we're going to for any given topic we need to return the menu so we're going to get the topic from clicking on one of these topics here so we're going to have access to the name of the topic but then we want to go ahead and retrieve this data structure which represents the menu for that particular topic so what i'll do is i'll just export a constant variable here and i'll call it menu lookup lookup lookup equals um so it's going to be a function here it's going to be an arrow function so we're going to be able to take the topic so we have that so if we just click f12 we can have a look in there so we've got typescript and node [Music] and i can just alt back to this tab here that we're working on and basically it's going to either return the menu if the topic is valid otherwise it's just going to return nothing for us otherwise they'll just return null or nothing because it wasn't uh you know the topic wasn't passed in and matched a topic that's in this menu lookup function so the first thing i want to do here is i want to get the top get the topic and convert it into lowercase and that's just so we don't have any clashes um between you know lowercase and type case and all those other types that it could potentially be now of course we're going to need to import menu from our models and then basically what we'll do here we'll just say if the topic to lower case if that is equal to typescript what we'll do is we'll just go ahead and we'll return the type script menu here and i just realized this is the wrong imports menu is from models not from typescript and then this typescript menu here import typescript menu from typescript okay so i've just mixed up somehow so if that's that we'll get typescript and i think i just need an e there type script menu and then i'll just copy that because then we can say if it is node actually we could probably have else if then we'll just go ahead and we'll return the node menu and of course you need to build this up as you add more uh topics um and otherwise you'll just return null because the topic that you tried to look up isn't there now of course this shouldn't happen because we're going to be using the function ourselves but it's just to get the type safety uh there so that's essentially our menu lookup utility method so now we've got our data structures and our utility methods we can begin to work on the actual sidebar so i'm just going to close all these up close theme up we can even close header up now so we'll mainly just be working on the um and we can even close the learn navigation as well so we'll just be working on getting our side navigation bar here so let's go ahead and create a component for that and what we'll call it we'll call it side navigation dot component dot tsx once again i'm going to use the code snippet for the react arrow functional component with the default export and i'm just going to come to this dot here and make it a uppercase c so i just saved that there so what i'll do now is i'll just copy a bunch of imports over and again you can copy these from the github repo but just to go through them we'll have the link from next link we'll have use state use effect and the functional component type from react and then we're just going to have some of the material ui components we're going to have the box draw toolbar list list item list item text and then we're also going to have the keyboard up and down icons so we can open and expand and detract our sub menus and then we're going to have css baseline that just helps with the properties being propagated and then we have this use theme uh that will be our custom theme and then the menu and menu item that we just created for the types for so with that we can start by making our component a functional component and then we can just pass in some props here so we can go ahead and define our interface for props so what we're going to do is we're going to have the menu we're going to need that menu that we just created that data structure we just created we're also going to need the slug so the slug is the very end part of the url i don't know if that's completely accurate definition of slug but that's what i'm going with here just the last part so uh here it's introduction um so not including the topic if that's strictly true or not uh you know i don't know how accurate that is but let's just go with that for now and then i'm going to need the metadata so the metadata now now that we have changed the metadata a little bit uh it's not going to be the same as the blogs or the articles metadata so if we just open up the learn section here and just open up the types we can see that sometimes they have this subsection sometimes they don't and we're mainly interested in this part here uh remains to be seen if this part is needed i may end up removing that later on i'm just keeping it there now as a reminder in case there's you know more multiple parts um but they'll be seen as i start to build it out the content but basically we can see that the metadata uh is going to be a little bit different we're going to have sections and subsections and they're the two main distinguishing types there so if we come to models here let's just go ahead and create an interface so we'll distinguish this between the blog interface by calling it the learn metadata rather than metadata and now that i have two metadatas you know you could probably call the other one blog metadata or have a base metadata that you extend or something like that but for now i'm just going to have learn metadata this is going to be an interface typescript interface so i'll just go ahead and export an interface here and i'll just call it as the name of the file learn metadata which is going to have the section which is a string it's going to have the subsection which is a string and it's going to have a topic which is a string and i'm not including the um part here because i am not going to be using it but if i do i'll need to come back and change it and i'm just going to make this subsection optional so section relates to something like typescript subsection relates to something like advanced and then topic would be something like generics just as an example so now i have that i'm just going to close that file up and i can close this file up too and now i can give the metadata prop the metadata type that we just created or interface that we just created so now we can do the structuring or our props and i can just get the menu slug and metadata and once again in anticipation or using the custom theme i'm just going to have a variable here called custom theme and that's just going to use the theme so let's just go ahead and save just to make sure there's no errors and okay there's no errors but we haven't really made much progress visually so what we'll do is we'll have a function here and we'll just say i will call it fonts get initial menu this is going to be it's going to take the menu and we don't really need to pass the menu but i'm going to use the use effect hook and reference it so then when we change between the node and typescript tabs it's able to detect that and not show the same old menu even though when we statically render it um this shouldn't be an issue but just for development purposes it just visually looks nice if the ui updates so what we'll return here is the initial menu will just it's going to be the initial menu so we can just go ahead and map through that and then for each menu item which is of the type menu item we can go ahead and we can just return the object uh the menu item itself and then we'll also chuck on this property here will append this is open properly to false so by default everything will be closed and that makes sense and i spell that wrong i think i've got an extra initial menu yeah so by default we'll have the get initial menu it will be the menu with the is property flag to false which will be used to display the sub menu and also the highlighting or of which tab is open so then we can come here and we can have a little bit of state in this file here so i'm just going to go ahead and use the use state snippet here so what we'll have is we'll have the active menu we'll call it active menu and i'll just make this an a so use state initially it's going to have the initial menu and then i can just pass in menu and then basically if anything happens like you change the page like really just in development mode but you use the effect hook what we'll do is we can get rid of the clear clean up we can say if the menu were to change what we'll have here is we'll set the active menu and we'll set it to getting the initial menu so the idea being is if we open up the files here if you're on the typescript file you have this menu here and then let's say you click on the tab here you click on the node section then you'll get this next menu here and so the menu has changed so this property will have a bit changed so we can reset the state such that everything's closed and it will just be the uh particular section that we're on which will be highlighted and then if you expand it it will have further uh if it if it's possible to do so then we'll have the further nested highlighting there too and again this menu has been passed in here just so i can use this get initial menu in both places here and then when the menu changes we can detect that so that's why menu is passed in as a variable uh again this isn't completely necessary it's more for us in development mode but nevertheless we've already built that out now so what we'll have now is we'll have another helper function and it's this is going to pertain to the styling because when we show our um when we have our side navigation draw component there's always going to be an introduction so i'm going to hard code introduction but then i'm going to need to dynamically render the other elements including the submenu menu of those list items and then we'll need to apply styling to both so we're going to go ahead and have a function here that is going to get the menu item style and basically what we'll have here is we'll have two values so we'll call one value one and then we'll have the second as value two and they'll both be strings and then what this will do is it's going to return an object for us so this is just for styling purposes and we'll see the v1b2 as we use it but essentially we want the color to depend on these values so if the value one and i'll do two lowercase is equal to value 2 to lowercase then we'll have a ternary operator where if that evaluates to true we can go ahead and we can use the custom theme we can go into the palette we can take the primary color and then we can take the main primary color otherwise and i'll just copy this part here we'll just take the text and we'll take the primary text and additionally we'll just have the cursor being to pointer so you could probably guess by this part here that we're just mainly going to be testing the strings of two values and i'll just put a comma here we'll be testing the strings of two values so basically if the url or if a part of the url like a slug or topic or something like that is going to be equal to the particular item then we'll go ahead and we'll return that highlighting for that color and i've done this sort of generically because we're just going to apply this in a couple of situations as we'll see but the general idea is just to have you know a reusable functions such that we can display the highlighted uh the active uh particular page that you're on so i'm going to have a function here and i'm going to call this get introduction li or short for list item or something like that so it's not going to take anything and it's just going to generate html for us so what we'll do is we'll just go ahead and we'll go ahead and return some jsx so we can use the link component here which will have a href and i'm just going to build this up so i'm using the curly brackets and the backticks and this is going to go to slash learn slash metadata so let's just check yeah we got the metadata so that's the part at the top of the files here so here we've got section and here we've got subsection so essentially if the metadata um if the particular section so something like typescript and then we'll just make this to lowercase here oh i imported the wrong metadata i believe this should be learn metadata so that's an issue with the name of the interface stuff like that can happen but we're using typescript so we can catch stuff like that too so the metadata the section which is that type script we can see that there's this sort of title case here um if that is equal and we put that to lowercase essentially where we want to route to is whatever that section is so in the case that we click on typescript we can take the metadata which has the section typescript so i'll go to learn typescript and then by default what we'll do is we'll go to slash introduction so whenever you click on these routes here you'll just go to the introduction which is the very first part and sort of a special case and then of course we can just have our past href attribute here now inside here inside the link we're going to have a list item and a list item we're going to have a class name here of list item and we're also just going to give it a key of negative one and i give it a key of negative one because when we go loop through our data structure i believe it starts at zero so then we'll go 0 1 2 3 and i just don't have any duplicates of the keys so this first hard coded one for the introduction i'll just set that to -1 so we have this list item class so we need to apply that style or create that style so what i'll start by doing is in our return here i'll have a fragment just so i have one parent selector and then below this div here i can have a style tag here and inside the style tag i can have the object which i'll have some backticks here and then what we can have is we can just say we can set the list item we can set the hover state and we can set the background color and i've just selected this based on my stylings but the rgba will be 9 211 173 and 0.08 and this is when you hover over the list item you could imagine that it changes the background color so it's slightly emphasized of course we need to get the um build the actual draw component but we're building it out so we have our list item with the class name list item a key of negative one now nested in the list item we're going to use the list item text component and this can just be one of those self-closing tags so i'll just do that and then i'll set the text to introduction and i'll give it a style equal to the get menu item style here where i pass in the introduction text here so if i look at this function i think by default i'm going to set this equal to the slug so this last part here so in this case it's going to be introduction and so i don't need to pass a second argument in here because by default it's going to look at the url slug and then i want to compare it to introduction now it's just hard coded for this special introduction case so if that introduction matches this introduction so i'm on this particular exact page then i will get the menu item styling and that basically means that these two values are equal to one another so i'll have the teal highlighted text otherwise you just return the standard primary text color which is just the white so that's that so now that we have our get introduction li let's start to build out our draw component and make use of that so just here this div this is just going to be a box so we can wrap our box our drawer with the box so i'll just give this some basic styling i'll just give it the display equal to flex just so everything's nicely uh displayed and then we just tack on this um c ss ace line and that just ensures everything works basically um with the draw component and then we'll go and create our draw and the starting points for this is on the material ui documentation for the draw component itself but i've sort of adjusted it a little bit so we'll have the draw here the draw component and the particular variant we'll have here is we'll have permanent because it's possible to toggle the draw component you know hide it and stuff like that but in our case we want it fixed to the left hand side of our page and we'll just set that to permanent and then we'll just give it some styling here and we'll give it the width and we'll set this equal to the uh let's see here draw width we're going to reuse this width so if we just come to the top of our page here just above our props here we'll just have a variable here we'll just call it draw width and we'll just set that equal to 40. uh okay so complaining about the type which is really strange okay there we go so the draw width will be the draw width and of course we're going to come back to do the responsiveness of this at a later video uh it should be halfway there because we're using material ui and you know we've sort of kept in mind a little bit but we'll come back in a little proper uh responsive design video so we've got our draw width on our draw so we'll add some more styling we'll just add the flex shrink property and we'll have that to zero and then we'll just have this uh this just comes from the documentation so i'll just copy this in and say the flick shrink mui draw paper because the draw it has a particular class on it that's been there by uh mui on the component itself um where we can set the width and the box sizing to border box so that just come from a documentation just to make everything look nice now inside the draw component we're going to have a toolbar component so we'll just say toolbar and then what we'll do is we'll have a box i believe that toolbar there's just um it's in the documentation so just did that and then the toolbar so it remains to be seen if this toolbar is needed or not i'm just copied it from the documentation could be that we don't need it but they have it in their draw component this needs to [Music] we don't need this so i'll just leave it there for now um and then below the toolbar we have a box and i'll just say box now the box it has some styling on it has an overflow of auto margin top of 48 pixels and then in the box we can go ahead and we can start by having the so we're in the draw component so we're creating the draw here of the sci component and then in that we want to get this introduction ally so let's just get that and then we'll just wrap it like this yeah let's just save that see where we're at we've done a little bit so let's just refresh now right now we don't have any list items so we actually need to reference it for it to show up so let's just come to the actual page itself and we'll just say where we have the mdx here we'll have a separate component or a separate section and we'll just have a div here and we'll have some styling on this div and we'll set this equal to display lex and then we'll have our side navigation component so our side navigation component i believe that auto imported it for us yep and we'll be at one of these self closing tags where the menu so we've worked on the props i believe where you've got the menu slug and metadata and we have [Music] this is where we can use our menu lookup function so just below here we can have our menu and we can call the menu lookup function and we can just pass in the topic and we can just say as menu we know it's going to be on the menu type so let's just go ahead and get that in from our models okay cool so now we have our menu lookup we're able to get the menu based on the topic and we have access to the topic so now we have access to the menu and then we also have the slug so we can just say let the slug equal the slug and we can also get the metadata this is just from the source so we can just say the source dot scope and recall that earlier we set that up so we have this source here and the source has this scope here with the metadata and just need to be in that format so we could serialize the mdx so now that we've passed in that let's just go ahead and save it and we can see that we've got this here we've got this introduction and it's selected so what i want to work on now is just work on the nested part of it the more interesting part of it and that will pretty much be all of the content in this video so let's just go ahead and continue to work on the side navigation component and actually one more adjustment i'll make here actually we'll come back on a separate video this is getting quite long to doing the responsiveness of things so we can come to our code and we're returning this draw component and we're getting the introduction ally of course you could refactor a few things we'll probably come to refactoring in a separate video as well but here we want to have a list so we want another list and let's just close that up so inside of our list we want to go we loop through our active menu so recall that we've set the active menu when we get it initially and then if we make any changes or basically if we click on anything and open it up we want to have that state stored so that's why we reference the activated menu rather than the menu itself uh let's see active menu and then for the active menu what we'll do is we'll just map through it and for each menu item and this is not a menu item because it also has the is open property on it so we'll just set this to any for now and we'll probably come back and refactor that we also want the index so we can put the unique key on the list item so we get that and what we'll do is we'll say we'll let and we'll use some array d structuring here so basically what we'll do is we can call object dot entries on the menu item and if we just open up our menu just so we can see what we're dealing with here we're going to have an array of these objects and there's also going to be a secondary property so there's going to be is open you know equal to true or something like that but we add that in and then it could be that there's a there's a key well there's always a key to denote the topic but there also could be the actual uh you know the topics themselves so what we can do this object entries is going to return uh you know an array of arrays essentially where each array refers to a particular menu item and the menu item contains in the first element it's going to contain the key here so basics and the second key is going to take type syntax so we can just use some array d structuring here so we can go ahead and we'll call that key the label and then we'll refer to the uh second properties of it and we'll refer to the second uh element or the first the so we'll refer to that as the label and then we'll also have the sub menu here so we're just using array d structuring and then we're also going to have a radius structuring for the next element so we can just say get the is open key we won't actually use this but we just need to do this the structuring here so we can get the value of is open and with that we should have the label the sub menu and the state of whether or not it's open so we want to we want to give a have a link here but the href is going to depend on the length of the items so if it's just going to say extra for example there's nothing in there so we want it to go to the key alternatively we want to go to say slash types so then we'll since there are array elements we want to go to that particular element rather than the key so what we'll have here is we'll just need to build up that href so let's just say we'll have a constant variable here we'll just call it href essentially we take this sub menu and right now we just need to cast it to a string array and if the length of that is greater than zero essentially what we want is we want to go to the absolute path um well slash localhost 3000 slash learn or whatever our url is slash learn slash and then we want to go to metadata here we want to go to the metadata section to lowercase and we want to go to a particular uh the particular slug that we have access to otherwise and we can just go ahead and copy this down otherwise i just want to go to metadata dot section to lowercase uh slash the label because the label will be what we want so just to go through that again we have our particular data structure which represents our typescript menu if there's nothing in the s if there's no sub if there's no elements in the array or there's no subtopics we just want to go to the extra otherwise in the case of types we don't want to go to basics at all we just want basics to be a placeholder for the section we want to go to type so we want to actually go there so this first value is known as the label well i've denoted it as the label so if the sub menu has a length of zero we'll use that otherwise we'll actually just go to the slug that we've got from the page so now that we have the href we can make use of that href so what i'll do is i'll have another section here so this is happening this is all happening within the map so i have a constant variable i'll just call this [Music] section two and i'm calling it section two for two reasons the first is that it's the second section after the introduction but also um i don't want any uh duplication i've got the uh section in the metadata learn metadata type and just to sort of distinguish between the two so we'll see the same thing for subsection so of course you could call the variable whatever you wish to call it but i'm just going to return some jsx here so i'm just going to return the link and i'm just going to close the link tag because i'm going to wrap it around and list item so i'm just going to copy this here actually just as a starting point so the href is just going to be the href that we've built up and we're going to have pass href attribute and then we're just going to set the key equal to the index and then on the list item we're going to have this class name here oh i don't know what happened on the list item we're going to have the class name of list item now we're not going to have the key here we got the key on the link on the parent of the the first element that we're returning so we're going to have an on click method here and this is just going to be equal we don't really concern ourselves with the input here but what we'll do on click is we'll just have a variable for the active menu we'll just call it am and we'll just go ahead and restructure or use the spread operator to get all the contents of active menu but have it separate to the actual active menu state and essentially we have a if condition here so if you click on it and you know if the [Music] active menu if the index of the active menu and we'll just need to pass this as any that's why i got the brackets if we take the label and the length is greater than zero what we'll do ah what's wrong here ah this needs to be here so if that's true we just need to change that particular index and we'll set it equal to am where we take everything from am for the index but then for that particular index we take the is open attribute and we set it to not is open and then we can go ahead and we can use our active menu to change the state to the active menu so just to go over that we have our active menu which is similar to this menu here but with the is open boolean property as well nested in each of these objects we click on a particular item if the item so if we're in the case where there's this has a length greater than zero so basics and advanced in this case then we want to set the state of that to is open but if it isn't we just want to ignore it because there's nothing to open so it can't be true so if if we do open we just change the state of our application um and then in list item just below this on click we can have a secondary action and this is where we can say we can loop through our object values and i'm just got these brackets here to cast it so we take the menu item and that should be uh menu item so we're only when we get the object values we're just getting you know things like that and if there's another one here that'll be the second one so we're only really interested in the first element in the in the array like of the values so this array here will be the first so what we'll do is we'll just we're only we're only concerning ourselves with that and we'll just cast it to a string array and basically if that length is greater than zero we can go ahead and we can return some jsx so we'll just have a fragment here and what we'll say is we'll just say the menu item if that is open we'll return the keyboard arrow up icon and we'll give this a styling where the cursor is equal to the pointer cursor and we'll also give it a color of primary otherwise it's not open um so what we'll do is we'll return the same sort of thing but for the keyboard arrow down icon and we'll just save that let's refresh oh and we need to return that jsx as well so i might as well just work on this last section get the subsection of everything and then we'll be able to see everything so we've got the list item text where we get the introduction get the menu styles there um actually you know i copied that from the introduction section so i need to modify this basically we do want to get that style get menu item style but rather than passing the introduction here we just want to pass in the metadata and if there is a subsection we want to pass in that so that's just saying if this exists i will pass that in otherwise we'll go ahead and we'll just pass the topic in so we can just say otherwise metadata dot topic and then we can just go ahead and pass the label in as the second argument and this menu item so i'll just checks those values and if they're equal then we'll set some highlighting here so this isn't going to be introduction this is going to be dynamically rendered so this is going to be the slug and then that's all we really need there and then we'll have one more we'll have we'll need to take care of the subsections if we have them so just below this link here we'll have a cons sub section i'm just calling it subsection two um because of the fact that um you know i don't want to confuse with the subsection that's on the metadata learn metadata that is so we'll just take the sub menu as a string array and then we'll just go ahead and we'll just map through that now if there's nothing there then there won't be returning anything because there'll be nothing to map through but we can just go ahead and we can take the item it's a string and index of the type number and then we'll just go ahead and we'll return some jsx here and essentially let's see here the menu i think it's just complaining so i'm not returning anything so if i just return the menu item if that is open so i only want to display the subsection if the particular section is open so if that's open we'll go ahead and return the jsx so once again we'll just copy this more basic version of the link in the list item and then we'll modify it so we got this link here now we're going to need to give it a key so we'll give it a key um so we've got this section here so firstly we got the introduction section we'll give the key a negative one so i'll be unique and independent from this next section here where the uh key is just the index so you know 0 1 2 3 4. i want to uniquely identify the subsection as well so i'm just going to build something that's unique up so if i just take the label um so say basics and then have an underscore and then have this particular index that should be unique so just plus on an underscore here and then plus the index and if i look at the href it's just going to be learn metadata dot section and then slash whatever the particular item is that we're on so the item dot to lower case and then we just pass the href once again then we have the list item class name list item we no longer need this key here but we will need the list item text and the style we can once again get the menu item style and we can just pass in the item here now and we'll just for now we'll just have this uh syntax here where we have the this uh arrow here to denote the sub uh item you might come back and uh you know tweak some of these minor styling points when we come back to the responsive design video but essentially [Music] that's the main logic that we want there to return our sub menu so what have we got here we've got our getting the introduction we have our you know our labels or our this level in and section two we've called that and we've built up the jsx for section two we've rendered that introduction so we just need to render section two and the subsection so at the very end of all of this um just before the closing tag we can go ahead and we can return through the section 2 and the subsection 2 and we should be pretty close now so now we can see that we have our menu we can hover over different elements here so we're in the learn typescript slash introduction introduction um is there now i must have hard coded something to introduction so i need to go back through and change that so this list item text here in section two rather than returning the slug which is just always going to be introduction where on the introduction page this actually needs to be the [Music] label so let's do that and now we can look at our menu here we got introductions highlighted and we can click down on basics click it up click down on advanced click it up and if we go ahead and i've created an article for types so i'll just go ahead and click on types we can see that now this is highlighted we're on the types page and this is selected here and if i click on node we can see that it takes you to the introduction section now i don't have any articles for that but if i go back to the typescript section and once again i click on something like the types article we can see that the state's all working good it's returning the correct side navigation bar and it's also doing the highlighting for us if i just refresh the page we should be able to get the syntax highlighting here now do note that there's a couple things missing on this page we're going to revisit this page and tweak some of the minor details with the formatting and responsive design but just to recap what we've done today essentially we modified the particular code snippets such that the metadata has a section and subsection relating to it we created this secondary navigation bar where you can click on the particular section that we want to or the topic we want to learn about and then we've also came up with this side navigation this custom draw component here and to look into the details of that we just as a quick overview we essentially we got the menu that we've created we've got the menu data structure and we also got the slug from the url and the metadata from the mdx file and then with those props we're able to [Music] render various components so we rendered out the introduction as its own sort of route because whenever you click on one of these links you go to the introduction section and i'm going to have it set up such that each section has an introduction section so that got rendered and then we had links to those and then we have the actual draw component which contains that and it also dynamically renders the uh you know that menu which takes care of the state of you know whether things are open or not and it also detects which particular route or if a particular route matches one of these menu items and if so it will display the particular topic and subtopic uh and we'll highlight that so it's clear to the user which particular tab we're on so it's clear that we're on the typescript tab and we're in the basic section and then we're in the types and then also i should show and demonstrate the extra section okay so again a 404 here and it's kind of good that i was i showed that because we can see that we're going to slash extra here which indicates that it's going to the uppercase so if i if i just quickly come to this label here and i just say to lowercase and the slug should already be lowercase but now if i go here and let's just go back [Music] if i click on extra now now we're going to the lowercase version so that works so it's good that i went there to test things out um and then of course you know you have your sections and then you you're mapping through those and then each section may has a subsection and then you can list that out so thanks so much for watching this video in the next video we'll continue to work on our coding blog so please subscribe to my youtube channel and i'll see you in the next video cheers

Channel: Jon Peppinck

Views: 244

Keywords: nextjs, sidebar navigation, sidebar navigation menu, react sidebar navigation, drawer navigation, next.js, custom drawer navigation, material ui drawer navigation, material ui side navigation, side navigation html, side menu navigation, material ui navigation drawer, react navigation 5 custom drawer, react navigation v5 custom drawer, react navigation 5 drawer example, react navigation 5 drawer icon, react side navigation bar, custom drawer navigation react native, react, javascript

Id: _7pqVMPLIr4

Length: 98min 20sec (5900 seconds)

Published: Sun Nov 28 2021