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

[@luq2337]

one thing people may miss, if you have parent route, like you have many sub routes under home page do not forget to set it with a start ✔ instead of ❌

[@keithgoddard4192]

I'm just starting to explore Ant Design, although I've got years of experience with React... and this was super helpful! Thank you so much for taking the time to put this together, I really appreciate it.

[@CodeWithAamir]

You're very welcome!

[@unanimedestino98]

Your are the best, please don't stop to make ANT DESIGN VIDEOS

[@CodeWithAamir]

This means a lot to me, thank you @Rodrigo García Real for the encouragement!

[@zhuofeng1089]

You must be the indian superman ! ! ! Thank you ! ! !

[@CodeWithAamir]

Thanks Zhuo, by the way I am from Pakistan neighbourhood of India.

[@vishalkumaryadav2924]

Thank you so much sir for this video it was really very helpful

[@CodeWithAamir]

Most welcome

[@anmolarora5630]

Thank you brother, you are such a saviour

[@CodeWithAamir]

You are most welcome, thanks

[@uboxtech]

thanks for these wonderful tutorials brother

[@CodeWithAamir]

Glad you like them! Thank you!

[@Pein94rap]

Helpful. Thanks!

[@CodeWithAamir]

You're welcome!

[@umakuwar8093]

I facing some issue like useNavigate()may be used only in the context of a component

[@CodeWithAamir]

Hi You can get rid of this error by wrapping your main App component inside the BrowserRouter. It will look something like below import { BrowserRouter } from "react-router-dom"; Please let me know if you still face any issues. Thanks

[@itsahmedbasha]

Thanks for the tutorial, it really helped me to creata a fixed sidebar for my POC, Thanks once again 🙂 Keep creating videos like this, Good Luck!

[@CodeWithAamir]

Glad it helped! Surely I will create more videos like this. Really appreciate for the encouraging feedback 😊 Thank you Ahmed

[@computeraidedyami]

Person Of Color?

[@CodeWithAamir]

Hi @computeraidedyami Did not get your questions, can you please elaborate a little more? Thanks

[@itsahmedbasha]

@@computeraidedyami POC, Proof of Concept

[@rents1111]

You helped me a lot. Thanks.

[@CodeWithAamir]

Glad I could help!

[@mutebiugofficial8827]

How did you do with with react Router v6 to change components basing on menu items selected

[@CodeWithAamir]

Hi @mutebi ug official, If I understood your question correctly, you mean how to do this in v6. Actually the tutorial uses v6 already to change components based on selected menu item. If you need more details on react router dom v6, please go through following video if not watched already. kzbin.info/www/bejne/h53WZWpjbd-CnZI Please let me know if I misunderstood your question or you need any more help on that. Thanks

[@azizbekkomilov3589]

Thanks Super Video! Best the best!!!!

[@CodeWithAamir]

Glad you liked it!

[@albertodelvillar2996]

Aamir thank you !! great video

[@CodeWithAamir]

Glad you liked it!

[@regoresconde3302]

Hi Aamir! Great vid as always! Was wondering how would you add a collapsible feature? or a responsive one? :D

[@CodeWithAamir]

Thanks @Regor, I have a video on responsive ant design menu at below link which show full menu on larger resolution and converts to collapsed menu icon and show drawer menu on smaller screens, please let me know if that helps. kzbin.info/www/bejne/Z5OtkH-heK-Jhpo Thank you

[@mostafafartaj7270]

Thanks for the tutorial, How I can create login with custom layout and route

[@arhamfarman6364]

Thanks Alot, good man!

[@uboxtech]

btw i have a question, how to handle the default selected key if we have nested route like /account/settings OR /account/dashboard like that

[@CodeWithAamir]

Hi @UBOX TECH In the case of nested routes the window -> location -> pathname will contain the whole path like /account/settings so you can split it based on / and put only the relevant path string inside the default selected keys array. I hope you got the idea , please let me know if you need any more information on that . Thanks.

[@ameralkhodary8076]

thank u so much

[@CodeWithAamir]

Hi @Amer Alkhodary To move sidebar to right side just swap the Content and SideMenu like below It will move the side menu to right side of content but if you want the rest of the space to be fully occupied by content and sideMenu to be at very right side of screen then you can give a flex:1 to parent div of content component like below function Content() { return ( //Other children components like routes etc. will be same as in video ); } Hope it helps. Please let me know if you need any more help on that. Thanks

[@anantjain9679]

thanks, i am facing a problem to add icon on submenu on collapsable menu

[@BachelorsEntertainer]

Nice Work

[@CodeWithAamir]

Thank you! Cheers!

[@manjunath-sde]

is there any way to make the sidebar alone unscrollable whilst the content being scrollable if there's any?

[@singmantkpss]

Same ask

[@anilanaparthi6985]

How I can render login component without that layout header and sider

[@mutebiugofficial8827]

If I make the header fixed , it goes beyond the view, how possible can I make it to fit my page!!!. The same with side bar!...

[@CodeWithAamir]

Hi @Mutebi, Can you please share your code snippet which is causing this issue. I will check and suggest the solution accordingly. You can share code via comment here or on codesandbox or via email at [e-mail] Thanks

[@BachelorsEntertainer]

❤❤❤❤You a good 👍👍👍

[@CodeWithAamir]

So nice! ❤❤❤

[@SoulisYT]

Hi there and thnx for the video. If I add a button/link.navlink in the content of the Dashboard and use navigate to go to Home the menu doesn't get active. Is this a bug with antd ? Do I have to use hooks to fix this ?

[@CodeWithAamir]

Hi @Soulis HCR2, Its not a bug in antd, actually and menu does not keep track of where you are in the browser link/path. So we can achieve that using the useEffect hook and as soon as the window location path changes we can highlight that particular menu item accordingly. It will look something like below. I have explained this code in following video near 1hr:16min timestamp at that video, you can look that for more details kzbin.info/www/bejne/rqelhpqagLqta8k import { AppstoreOutlined, ShopOutlined, ShoppingCartOutlined, UserOutlined, } from "@ant-design/icons"; import { Menu } from "antd"; import { useEffect, useState } from "react"; import { useLocation, useNavigate } from "react-router-dom"; function SideMenu() { const location = useLocation(); const [selectedKeys, setSelectedKeys] = useState("/"); useEffect(() => { const pathName = location.pathname; setSelectedKeys(pathName); }, [location.pathname]); const navigate = useNavigate(); return ( { //item.key navigate(item.key); }} selectedKeys={[selectedKeys]} items={[ { label: "Dashbaord", icon: , key: "/", }, { label: "Inventory", key: "/inventory", icon: , }, { label: "Orders", key: "/orders", icon: , }, { label: "Customers", key: "/customers", icon: , }, ]} > ); } export default SideMenu; Please let me know if you need any more help on that. Thanks

[@SoulisYT]

​@@CodeWithAamir Thank you very much for the quick reply. Actually I looked at your code and realised that I was using the `defaultSelectedKeys` property. When I switched to `selectedKeys` it worked even without the useState and useEffect hook ;) Also in the `onClick={(item) => {` the item is deprecated and I use just key. thank you very much again !!!!

[@CodeWithAamir]

Thats great! @Soulis HCR2

[@MilesWalker-g9v]

Great tutorial, would be super helpful if you uploaded the code too!

[@CodeWithAamir]

Thank you @Miles I can share the code file via email, send me email [e-mail]. Code is Not uploaded to git as of yet. Best!

[@shanmugamm4023]

Which version of react router dom are you using

[@CodeWithAamir]

Hi @Shanmugam M, It's version is 6.3.0 "react-router-dom": "^6.3.0" Please let me know if you need any more help on that. Thanks

[@veervirk1825]

Hey Amir I am facing issue while doing this.. routing is ok but menu selection is not happing when I click on menu's. please help regarding this.

[@CodeWithAamir]

Hi @Veer Virk, Please share your current menu code so I can look into it and suggest the solution accordingly. Thanks

[@veervirk1825]

@@CodeWithAamir how I can share

[@CodeWithAamir]

You can share via codesandbox etc. or email me at [e-mail]

[@veervirk1825]

Can we connect over Skype??

[@CodeWithAamir]

We can zoom if needed, but for now I got the code snippet via email and checked it. To me it is working fine. Actually you are using menu mode="horizontal" so in that case it only highlight the text color and ads a bottom border which I can see its doing, if it is not the case at your end we can see it further over zoom or so. If you chose mode inline then you will see it is adding selection background color as seen in video tutorial. Hope it make sense. Please let me know if you need any more information on that. Thanks

[@iamthewalrus73]

Awesome!!

[@CodeWithAamir]

Thank you! Cheers!

[@mehakgupta7178]

how to make this side bar responsive? so that it collapses for mobile mode?

[@maribee1273]

hi, Do you know why I get an error when I use AntD's Menu in Next.js? I have created a user sidebar in UserRoute. But I get an error. Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application It is a simple code, but I can't figure out why the error occurs. import { useState, useEffect } from "react"; import Link from "next/link"; import { Menu } from "antd"; import { useRouter } from "next/router"; import { UserOutlined, DollarOutlined, ProfileOutlined, StarOutlined, } from "@ant-design/icons"; import { useWindowWidth } from "@react-hook/window-size"; const UserNav = () => { const [current, setCurrent] = useState(""); const router = useRouter(); const currentPath = router.pathname; const onlyWidth = useWindowWidth(); useEffect(() => { process.browser && setCurrent(window.location.pathname); }, [process.browser && window.location.pathname]); const items = [ { key: "/user/dashboard", label: "user/dashboard"", icon: , link: "/user/dashboard", }, { key: "/user/payment-information", label: "user/payment-information"", icon: , link: "/user/payment-information", }, { key: "/user/portfolio", label: "/user/portfolio", icon: , link: "/user/portfolio", }, { key: "/user/content-list", label: "/user/content-list", icon: , link: "/user/content-list", }, ]; return ( ({ key: item.key, icon: item.icon, label: ( {item.label} ), }))} /> ); }; export default UserNav;

[@muneebali4271]

I need your help with adding 404 to these routers

[@CodeWithAamir]

Yes please let me know with your details on [e-mail]

[@BachelorsEntertainer]

How can me make them responsive like when width is 768 or 800 side menu auto close and also button to close and open side menu

[@CodeWithAamir]

Hi @Tufail Mashwani I have a video on how to make the menu responsive at kzbin.info/www/bejne/Z5OtkH-heK-Jhpo May be try that if that helps or let me know if you still need any more information on that thing. Thanks

[@khanhedo02]

How to log out, exit the menu and move to a completely new login page

[@CodeWithAamir]

Hi, To logout and move to a completely new page you need to create a Route for the login page and on click of logout button you can navigate to that login route. So for that you can create two main routes Home and Login and consider all of these menu routes as child of Home route so on login you move to Home routes and on logout you move to login route. I have explained how to create child routes in following video that might help kzbin.info/www/bejne/h53WZWpjbd-CnZI Please let me know if you need any more information on that. Thank you!

[@АнастасияПонамарева-у8ь]

If we click to goBack button on browser defaultSelectedKeys didn't work, why?

[@CodeWithAamir]

Hi @Анастасия Понамарева , You are right that defaultSelectedKeys will not work after the Menu is created and you press the back button so for that purpose you can use the selectedKeys props instead which is gets applied always instead of the default value. The other params/keys are the same for selectedKeys prop as well. If needed you can listen to the location change using the useEffect and then update the selectedKeys on each location change which will be called as soon as you press the back button. Please let me know if this makes sense or you need any more information on that. Thanks

[@mutebiugofficial8827]

I have a problem maybe it could be the absence of "./app.css". When I click a menu item ,i.e profile , it routes to a new layout. I want something like that one . When I click dashboard it displays dashboard component etc any help brother

[@CodeWithAamir]

Hi @mutebi ug official, To be sure, may be you can create a App.css file and add following content inside that file to see whether it works. //App.css content starts here @import 'antd/dist/antd.css'; .App { text-align: center; min-height: 100vh; width: 100vw; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(10px + 2vmin); color: black; } //App.css content ends here Also import App.css file in your .js file. Please let me know if that works now or have issues. Thanks

[@SandeepSharma-lm1ye]

maine eske jaisa hi bana raakha ha lekin sab koe component render karna chahta hu to use fade-in effect chahiye bus ye nahi kar pa raha hu. Please help

[@CodeWithAamir]

Hi, Aap antd Motion use kar sktey hen is case mai, jese iss link pa explained ha motion.ant.design/components/animate#components-animate-demo-simple still koi help chaye to let me know. Thanks

[@kimkhisieuben]

i use ant layout and it has get item, i put key on that but it not works, how do i solve, manny thanks

[@CodeWithAamir]

Hi @Anh Tu Tran, I am not able to get it what could be the issue in code, can you please share the code snippet so I can take a look and find the issue/solution on that. Thanks

[@Manjusha90752]

Hii amir how I can make sidebar menu items active based on the url typed by user for example if user type localhost/user/id then my users menuitem should be active. Please help!!!!

[@CodeWithAamir]

Hi @Deadmax, If the url is same as the menu item key then you can use the defaultSelectedKeys to get it hightighted and if the url is not the exactly same as the menu item key then you can create a simple function to get the key which need to be highlighted like const getHighlightedKeys=()=>{ const path = window.location.pathname if(path==='/users'){ return ['/users'] }else if(String(path).startsWith('/users/'){//OR you can use any regex here to match return ['/users'] } //and it continues for other matches } I hope you got the idea. Please let me know if you need any more information on that. Thanks

[@Manjusha90752]

@@CodeWithAamir thx ill try this

[@CodeWithAamir]

Sure, All the best!

[@LearnOnTime1]

sir ap na app.js k andr content k function k andr jo routes bnay hain wo ma same as it is ak new .jsx file ma bnana chahta hn or app.js ma main srf login call krwana chahta hn lkn routes jb ma new file ma call krwata hn to wo work ni krta lkn app.js k andr likhu to proper work krta hain kindly mja help kr dain ya kasa ho ga .

[@CodeWithAamir]

Hi @Raja Fahad, It should work in same file as well as in a separate file. Can you please share your code snippet so I can check that code and see what could be the issue with that. Thanks

[@mohammadmostafa794]

thanks

[@sayeedabu7150]

Excellent tutorial. Bro could you send me the code please ?

[@CodeWithAamir]

Code has been shared via your email reply. Thanks.

[@sayeedabu7150]

@@CodeWithAamir thank you 🙏

[@mateusfilipe9723]

Nice Video. Could you please share the code, thank you very much

[@CodeWithAamir]

Thanks and code has been sent via email reply.

[@tie.garcia]

why i find this so late

[@izooo3196]

can i get the github for this code please

[@은선최-i6t]

Could you please share the code thank you

[@CodeWithAamir]

Yes please send me an email at [e-mail] I will reply back with the tutorial code file attached. Thanks

[@ВладимирЛитовченко-ш3н]

как сделать переключатель "темную / светлая тема" для компонентов в Ant Design без использования своих CSS, а использования стилей или библиотек Ant Design

[@CodeWithAamir]

Hi, For the menu component you can use the theme prop like or you can make it based on variable like Please let me know if you need any more information on that. Thank you !

[@dnic171]

Hi, this is a good tutorial. Could you please share the code?

[@CodeWithAamir]

Thank you, Please send me an email at [e-mail] I will reply back with the code file. Thanks

[@dnic171]

@@CodeWithAamir I sent the email... thank you for the video again...

[@satyasai8605]

please add the resource code

[@CodeWithAamir]

Hi @satya sai, Please send me an email at [e-mail], I will reply back with the code file developed in this tutorial. Thanks

[@zhuofeng1089]

hi man can you share the source code plz?

[@CodeWithAamir]

Sure @Zhuo, Please send me an email at [e-mail] I will reply back with tutorial code. Thanks

[@krishnamalik5563]

Hi amir i need help I routing

[@CodeWithAamir]

Yes, please let me know what help you need, you can comment here or send me details on [e-mail]

[@saikiran4422]

Please show app.css code also it will help

[@CodeWithAamir]

Hi, The app.css does not contain anything special because in the tutorial we used the style props to style the components, the app.css is there because I reused the app.js file for multiple tutorials. I have sent you email by the way. Thanks

[@vietdungnguyen5357]

Can you share code of this video?

[@CodeWithAamir]

Yes @Việt Dũng Nguyễn, I have replied back to your email with the code file. Please let me know if you face any issues. Thanks

[@santoshsambangi-bu2zb]

bro please send source code

[@deeksha5626]

Could you please share the code

[@CodeWithAamir]

Hi @Deeksha, Please send me an email at [e-mail] I will reply with code file attached there. Thanks

[@deeksha5626]

@@CodeWithAamiremail has sent

[@CodeWithAamir]

Hi @Deeksha Alva, Code file has been shared with you, please check your email. Please let me know if you need any more help on that. Thanks

[@deeksha5626]

@@CodeWithAamir Thank you 😊

[@PKarthikeyan-k7x]

Send me the code please ?

[@veervirk1825]

code shared with you Aamir via mail. please check

[@CodeWithAamir]

I got the code snippet and checked it. To me it is working fine. Actually you are using menu mode="horizontal" so in that case it only highlight the text color and ads a bottom border which I can see its doing, if it is not the case at your end we can see it further over zoom or so. If you chose mode inline then you will see it is adding selection background color as seen in video tutorial. Hope it make sense. Please let me know if you need any more information on that. Thanks

[@ainguyenoffical]

Could you please share the code. I sent you an email

[@CodeWithAamir]

Hi @Ái Nguyễn, I have shared the code via email reply. Please check your email. Please let me know if you need any more help on that. Thanks

[@hyphamne]

window.location.pathname

[@romiean7527]

i amir may you share ur code with me ? im already sent email to you thankyou :)

[@CodeWithAamir]

Hi @Romie AN , I have shared code via email. Please let me know if you need any more help on that. Thanks

[@sabirsayyad6459]

Could you plz send me thr code, I have sent you email

[@CodeWithAamir]

Code has been sent.