App Side Menu with Routes using Ant Design Menu and React Router DOM in ReactJS | Side Bar Tutorial

hello guys welcome back in this video we will explore the and design menu component with its navigation to different pages we will learn how to layout the page to add the headers footer the side menu and the page content and then we will see how we can navigate between different pages that can include the sub menus as well also we will see if user directly goes to a particular path we can render that content directory so let's get started i have an empty react.js project that is using and design and right now it's showing nothing so let's go ahead and import the menu component from and design and start using it so inside a div so we will be adding a menu so i have a separate video on how to use and design menu in react yes i will add its link in the description below so you can take a look okay so inside the menu we have to provide the items that we need to show that will be an array of objects and in each object we have to provide the label and few other things that we see okay so home and let's add few more items in the menu okay maybe the second is dashboard uh the third one could be maybe user list and then maybe we can say profile and then maybe at last we can say sign out here you go and now if we click on it nothing happens so let's add uh the content on the right side of that that so that when i click on any of these its corresponding uh content is shown right so for that we can add another maybe div and inside that we can say maybe content and add some styling on this div so that instead of this vertical alignment change this liner to the horizontal so let's add a style we can say displays flex and flex direction is row there you go the menu and the content is going to the right side okay so uh no even if i change anything here nothing is changing this side on the content side so let's add a small function or the small component to show the content ah to make it a little cleaner instead of adding everything here so here we will be showing the content and let's cut it from here and paste it here and return it okay so here what we need to do is we will be defining our routes so for that uh you need to install direct roto dome so that is npm install checked roto dome i have already installed it so we can directly use it so to use uh the director tom what you need to do is you need to encapsulate the main app component inside the browser router and cut it from here and place brother order outside of the tab let's close this one this one okay and here in the content of the div we can define the routes right so inside the roads we will be the defining road for each uh menu item accept sign out so we can say there is a road with the path of slash or the home and for that we need to show an element uh here we can return any element so we can make this type of functions all the components and we can render that here for the simplicity we will be sending only the div and we will be saying that home so let's copy it and paste it for four times one two three four yep and let's save it is our dashboard and this may be the user list and then this is a profile and for the home we will be showing the home and we can show dashboard and here we can see users list and here we can see the profile okay so save it uh because uh only uh this is right now we are on the home so as soon as i am changing to something else it is not changing because uh the only road that is matching is the home right so let's define uh different paths in the menu item so when we click on the menu items uh we will be routing to these right so let us add the icons as well inside this to liquid look good so we can say maybe home outlined and here we can add an icon of dashboard outlined and here we can add an icon of maybe it's a list so what is available in the list maybe unordered list yep outlined and in the profile maybe we can say user outlined and the sign out we can say powers of outlined right i have a separate video on how to use uh these and design icons these are from the android icons so i will add its link in the description below so you can take a look right so i have added icons so those are beginning here as well so home dashboard user list and profile sign out let's make the sign out maybe in red color so we can add a danger is it good to okay so it looks red okay so next what we can do is on we can write the on click function and this will be providing us the information uh for which which of the menu item has been clicked so uh for that we can in for in in that info we can destructure it and we will be getting a key here so and we can define the keys for each of these so that will be the unique for each so ah we can use this key to to distinguish between the menu items so what we can do is we can define the key same as the path so that when user click on uh these menu items we will be getting key here and on we we can navigate uh to that particular key because the that key contains this path so it will be navigating to that particular route right so here the key is slash and let me paste it and all so the key is here is dashboard here is users list and here is profile has copied from here so that we do not misspell that and for this one you can skip the key or maybe you can if you need to write we can write it anything sign out or maybe right uh we will not be navigating in in that case right so here we can say if key is equal to sign out ah we can do the ah sign or feature here and in else so similar to cynod if if we have any other items in the menu item as well that does not that does not need uh navigation but we can do if conditions here and we can act upon accordingly so in else what we need to do is we will navigate to that particular path to navigate we will be using our hook that is use navigate from the right autodom the same package we are using for the road center route so let's define our navi gate look and let's copy it and in the case of else we will be navigating to whatever key we are getting because our key contain the path so it will be navigating to that particular path so let me save it and refresh now if i click on the dashboard it navigated to the slash dashboard and dashboard is shown users list profile and in case of sign out it do nothing because uh we written our to-do and we will be implementing the synod feature all right ok so this is how we implement the side menu for the application and navigate to different pages based on the user is selecting from the items from the side menu right we can add the header and the footers here as well so let's add those for the completion of this video so let's add a div here and this could be the mendip now let's move this menu to a component let's cut it from here and we can declare a function you can say side menu and we can return whatever i have copied it will be turning uh that if the div is missing right because we were showing or writing the menu inside the div right and here inside the div we can consider it the mendip and inside the div first we will be showing maybe we can add the component for each of these we can say header and then there could be a div on the header will be on the top then it could be a div that contain them on that maybe on the left side we can add the menu and on the right side we can add the content so that will be side menu and then there will be content and after that we can have a footer so let me remove this one this is extra this is also extra inside if there's a header and footer okay so let's define the header and footer as well for that maybe we can just return a div and we can say header let's copy it and define a footer as well and say footer right save it so what we have here is inside if there is on top there will be header let's refresh and see how it looks like okay on the top we have a header and then we have a on the left side we have the side menu and on the right side there will be the content the navigator is missing in the side menu let's copy it and paste it here okay so let's add this this some styling over this tip so it is display flex and flash direction is raw right so this is the same we have for the menu so even we can remove this from from the side menu because there's only a single item in that in the side menu right so it should behave the same right okay let's add some styling to the header footer as well so maybe we can say that height is maybe 60 pixel and background color maybe light or maybe light sky blue okay and let's add a color to be white and and we can say display flex and justify content to be center and align item to the center as well so that ah this the text is central aligned from horizontally and vertically and his color is white uh let's add font weight may be bold okay i mean uh you can add anything in in the header right now it's just a text uh you can add any items here uh in the header right so similarly for the footer we can add its style as well so inside the footer double return okay maybe we can change the color to light gray okay maybe the color black is fine okay and then if we want to move this footer to very bottom of the page we can add a style to this div that a it takes all of the all of the space so we can say its philaxis 1 and we have our top div uh we can say displays flags and flash direction is for this one transition is column because inside that we are showing header then uh this middle section for the side menu and the content and then it will be footer so first direction for this one is column flex is one and we can see it height is 100 vh that mean uh it will cover all of the viewport height here you go so it is moved to the bottom right so now uh you see uh as soon as i'm clicking on these items and if i refresh uh there's no highlighting so we can achieve that using the path name get in the path from the location so if i go to the side menu here we have a prop called default selected keys so inside that we can say window dot location dot this will be the path name right because we are using the same path name uh while routing so it will be giving us slash profile and it should highlight it here you go profile is highlighted if i home and you refresh home is highlighted dashboard dashboard editor and even if i write here maybe use a list and it will move to user list automatically and user list will be uh shown here right and similarly we can add some menus as well so let's add some menu and see how it look like there so suppose we can in the user list we can add our children that will be an area of the similar objects for for that we will put in the label maybe we can say active users in the user list and maybe it's keys slash active users and let's add another checked for that label maybe disabled users and key could be slash disabled users and okay save it and now if we go to this active users and disable user nothing shown let's define these rows here so because now the user list is a sub menu so user will be either going to the active users or disabled users so we can define those we can say active users list and here we can see disabled users list save it we say disable users and then the active users and if i refresh here the active users this is all restricted and actively selected and disabled users if i refresh that so it will be automatically selected right and as i said for each of the route we can instead of doing just d we can return any component so let's define one component uh to show you how it goes you can say home and here we can return uh the home component right so instead of doing this div we will be saying that home right and in this here in home component we can do anything this will be the whole page for us to render anything here right and if i save it and refresh it maybe you can say component yes okay home component right all right so that's it on exploring the menu component with its navigation to different pages so we have seen how we can render the menu and how we can render some menus and how we can add the routes and show different components based on those routes change and also we see how we can uh by default make this selected if users comes directly to that particular route and also we saw as a bonus that how we can render the header than the footers on the page but still if you have any questions please let me know in the comments below and if you have learned something in this video please hit like subscribe to my channel see you in the next video thank you

Channel: CodeWithAamir

Views: 73,423

Keywords: reactjs, antd, antd react, antd reactjs, antd menu, App Side Menu with Routes using Ant Design Menu and React Router DOM in ReactJS, Side Bar Tutorial, app routes, react router dom v6, menu with routes, application side menu routes, page layout with header footer side menu bar and content, menu bar routes, side menu reactjs, side menu react, react router menu, react router menu navigation, codewithaamir, antd menu routes, left side menu, sub menu, sub menu routing, app routing

Id: IUkAJUgUHEM

Length: 22min 12sec (1332 seconds)

Published: Thu Sep 01 2022