React Sidebar with Dropdown Menu Tutorial | React Router v6 | Material UI
HTML-код
- Опубликовано: 16 май 2024
- In this video, we are going to make Sidebar with dropdown menu in React using Material-UI and React Router v6. Hope this video useful to you.
Don't forget to click the like button and share the video with your friends if you found the video useful.
🔴 SUBSCRIBE for more AWESOME videos!
/ tuattrananh
🔴 TIMESTAMP
00:00 - Demo
00:20 - Setup project
04:09 - Create folders and some components
23:28 - Implement routes with React Router v6
36:24 - Make Sidebar with Material-UI
🔴 CONTACT
Facebook: / trananh2001
Github: github.com/trananhtuat
🔴 SOURCE CODE
github.com/trananhtuat/react-...
🔴 REFERENCE
- Create react app:create-react-app.dev/
- Material-UI: mui.com/
- React-router: reactrouter.com/
🔴 MORE AWESOME VIDEOS
/ tuattrananh
------------------------------------------------------------------------------------------------
#tuattrananh #ReactJS #FullStack #MaterialUI #MUI #NodeJS #Express #ExpressJS #Kanban #ReactKanban #Draggable #ReactDraggable #SASS #Animated #3d #3dAnimation #Animation #ReactNavigation #Sidebar #AnimatedSidebar #ReactSidebar #AdminDashboard #adminpanel #reactadmin #HTML #CSS #JavaScript #SCSS #React
This tutorial is so good! In case anybody else gets a void[ ] with the map method, try using a return inside the arrow function.
Thank you for your clip.
Its really awesome I am excited to see your next video of this dropdown list, how can watch its next video?
Cool, Excellent project my friend. Will continue this project with login, redux toolkit. thank you very much.
Thank you
Muy bueno me ayudo mucho, gracias
best bro)
Quá tuyệt vời luôn em
Thanks!
thank you so much ❤️
Is there a way to hide the side bar on mobile? Im trying to use this on desktop and mobile but having issues modifying the css for the side bar
I'm not done yet but it's a great step by step video ! which visual code extension do you use for function snippets ? (tsrafc)
react es6/es7 snippets
recommendation on vscode extensions for this project please !!!
I really liked your video and I'm using your project as baseline for mine, but I have a question:
I'm trying to change the route when clicking on an element but I can't find out how: More precisely I would like to go back to "/" when clicking on the Avatar component in the Sidebar.
Do you know how to do this? I've added an onClick on the element and I thkin I need to change the redux appState but i'm not sure and I can't make it work.
Thanks in advance
no help needed anymore: I made it work by adding:
and how would it be if I want to add a sub menu inside the menu?
Hey, how can I add a home page that does not show the sidebar? I want the page with the sidebar to be a subpage at /dashboard
How to add toggle in app bar and this toggle communicate with left sidebar as well as dropdown collapse and expand in this example please help me Thanks
Do you have an updated version that works on mobile?
custom mui là ác mộng vs em :D
Good tutorial but in my case I am doing it with Vite and it gives me problems when importing the avatar, can anyone help me?
I get an error
Uncaught ReferenceError: require is not defined at index.ts:4:11
And en that file
const assets = {
images: {
logo: require("./images/typescript_logo_2020.svg"),
}
}
export default assets;
Everything is working as it should. but my child view wont change its always the defined element but never the child element.
Anh ơi anh làm về MERN eCommerce đi ạ
a cũng đang định làm 😂
@@tuattrananh hóng anh ra hehe
@@tuattrananh lets do it 😗😗
b có video làm một cái project hoàn chỉnh k ạ
ruclips.net/video/sqGowdB1tvY/видео.html
Theme vscode bạn đang dùng là gì vậy cho mình tham khảo với
marketplace.visualstudio.com/items?itemName=MaoSantaella.night-wolf
This app is triggering useeffect twice even though it has dependency still
Like, Subscribe and Comment because instead of talking you put music :D
thank you