How to Create a Unique React JS Sidebar Navigation Menu
► In this video I teach you how to create React JS sidebar navigation menu which is responsive and styled using SASS/CSS.
► Here is a link to the github repository to access the assets I used for the video: tutorials.emersonvisuals.com/...
00:00 - Introduction
02:14 - Creating pages & components
04:50 - Page routes
6:21 - Styling pages
8:10 - Structuring sidebar
12:40 - Styling sidebar open
28:23 - Styling sidebar closed
33:10 - Styling hovers
34:47 - Usestate hooks
40:09 - Animations & refinement
41:55 - Uselocation hooks
44:08 - Conclusion
► Music Credit: LAKEY INSPIRED
Track Name: "Blue Boi - LAKEY INSPIRE "
Music By: LAKEY INSPIRED @ / lakeyinspired
Official "LAKEY INSPIRED" KZhead Channel HERE - kzhead.info/tools/Omy.html...
License for commercial use: Creative Commons Attribution 3.0 Unported "Share Alike" (CC BY-SA 3.0) License.
Full License HERE - creativecommons.org/licenses/...
Music promoted by NCM goo.gl/fh3rEJ
► Music by: LAKEY INSPIRED
• SUBSCRIBE to the LAKEY INSPIRED KZhead channel HERE - kzhead.info/tools/Omy.html...
• Follow LAKEY INSPIRED on SoundCloud HERE - / lakeyinspired
• Follow LAKEY INSPIRED on Instagram HERE - / lakeyinspired
• Follow LAKEY INSPIRED on Spotify HERE - open.spotify.com/artist/3zDGj...
• Support LAKEY INSPIRED on Patreon HERE - (Optional) / lakeyinspired
► Download links to music
/ . .
A 44-minute video, and what I did was watch and copy everything like you were doing, adapting it to my project. It took me about 3 hours since I was going back and forth, but I've learned a lot. I understanded some CSS concepts that I didn't before and at the same time, learned more React. I know I can't reproduce this menu on my own just yet, but I surely have a better idea now of many elements. If I continue practicing and writing code, I know I'll start creating my own sidebars. So, thanks a lot!
I’m glad you enjoyed it!!
alternate approach would be to render navItems from an arr of Objects, so that we can render different values { labe, icon } depending upto the state. no need to edit classNames everywhere.
many thanks to you man, from many videos I found this simple and clear. keep going in react tutorials and THANKS again 🤝
Thank you so much for the kind words!
this is really cool and helpful.
Thanks so much! I’m glad you liked it!
i was just about to start my PingPong Game project and needed some tutorial for a dashboard , thank you for this video
I’m glad to have helped!
@@emersonvisuals i noticed the Anchor tag caused some issues with the Reload in my project, so i Figure out that The component provided by React Router ensures that navigation occurs without causing a full page reload.
Awesome design
Thanks for the kind words! I appreciate it 😊
Amazing tuto thanks man
Hey mate, I appreciate the support ❤️
Thank you for the lesson👍
My pleasure!
thank you ❤❤❤❤
thank you
You're welcome
Hello everyone, thank you for tuning in. If you're interested in watching more videos related to React, feel free to check out my latest one at kzhead.info/sun/pa9ymtuhanduf68/bejne.html.
Hey , can you please make series of videos for other components of web apps in React
Hey there! Sure am - will be planning to make more in the near future! Feel free to subscribe to keep updated for when I do 😁
it's cool but the thing is the text show before the animation of the background width finishes.
Hey thanks for the comment! You can synchronize the text and background animation by using the `transition-delay` property on the text element. Set the `transition-delay` value to match the duration of the background animation. This way, the text will wait for the background animation to finish before it starts transitioning. Thanks heaps!
How do you manage the content of the page itself to not be hidden under the sidebar? do you just apply a padding left on the whole page?
Thanks for your comment! Yes, one way to ensure that the content on the page is not hidden under the sidebar is to apply a left padding to EACH page. However, depending on the specific layout and design of the page, you may need to apply the padding to specific elements or sections within the page. Additionally, you may want to consider dynamically adjusting the left padding of the content based on whether the sidebar is open or closed. This can be achieved by using a usestate function and linking it to onclick function for the burger menu trigger. I hope this helps! Let me know if you have any other questions.
@@emersonvisuals we can apply right margin to sidebar once ?
@@emersonvisualscan't we simply apply a left padding on the body in the main.scss?
you could also do that!
Yes that could also work!
Fantastic
Thank you so much 😀
How do you keep the closed state of the menu on page refresh?
🔐 Hey there! Awesome tip! If you're looking to maintain the closed menu state after a page refresh, I suggest exploring local storage to store the menu's state. Super handy for a seamless user experience. Just remember to consider security implications when working with local storage. Thanks for sharing! 👍👏
@@emersonvisuals @emersonvisuals what about using a cookie so you can render the state on the server side
Can I use router with .js files or just .jsx?
I’ve never done it with a .js file - but give it a go! I reckon you should be able to! Let me know how it goes :)
I realized that next.js does that too so I will try differently but I really appreciate all the CSS content you posted on this video ! @@emersonvisuals
@@igoraguiar00 it’s my pleasure 😊