Dear new coder and Brian, probably new versions. in react-router-dom v6, "Switch" is replaced by routes "Routes". You need to update the import from import { Switch, Route } from "react-router-dom"; to import { Routes ,Route } from 'react-router-dom';
I practiced a few times with this tutorial, now I understand about react and how to handle with font-end in basic. Thank you so much Brian you made my coding better.
Thanks for starting it up from basically square one. So many tutorials I've looked at just figure we already know a bunch of stuff and leave me wondering, "Okay. Should I delete this file? Should I have two of index.js? Um why does everything I do error out?" and then you just walk away frustrated. This really starts from "I know nothing" and helps the learner build from there.
Had been searching for a proper sidebar tutorial for a while. So glad I came across this amazing video. Clearly explained and just the right pace for me. Thank you so much!
I'm going through the code on github and my god I never realized how we could achieve such a slick UI with such less code!!! I really wish I had gotten into react sooner!!!
idk how...but i never replicated a tutorial before without issues. I replicated this tutorial and had zero issues on the first try. Tells a lot about how efficient your tutorials are. Thanks!
These man needs more support . I've been wanting to learn REACT for a long time, but I found it kinda difficult, but his tutorials put me through and he made them simplified, thanks Brian. If you wanna help me sure, you can teach us how to achieve user Authentication with ReactJS. Much Love. Also leave all your social media link, imma follow you as soon as possible.
@@briandesign Ok man... Much love and keep up the good work . But please honor my request on how to achieve user Authentication with ReactJS. Thanks once again.
@@briandesign I also got to the first set of videos you posted on you channel on UI/UX Designs they are awesome, if you can also convert them to HTML codes, I'll be greatful.
@@nelsonchika I'm planning on doing some HTML and css vids soon. I just got this one project I'm trying to finish first, then I can start posting a lot more vids
This is the first time i make a sideBar, and damn it was so easy i thought it was complcated, thanks u brian for your help, definitly gonna like and subscribe
very easy and smooth. I liked the video . There is another option we could add is, based on the boolean value of sidebar (state)we can decide whether to show the whole nav-menu component by removing left-margin= -100% value by using a curly closing bracket. Anyway thank you very much for your wonderful nice tutorial.
You should be targeting 'transform: translateX' in your animation rather than 'left' for smooth animations. Left triggers the reflow where as transform only the repaint.
I like how you dont jump around the screen all the time, my guy, I had to import all pages as:- import Home from './components/pages/Home'; etc Good Video
It was a short video and very simple step to follow, I'll check out for more of your clips. Thank you so much!! You made my life learning React easier.
thanks thanks thanks thanks thanks thanks thanks thanks thanks ......thanks a lot brother...take love..May Allah swt increase you in good deeds and increase your knowledge
Brilliant mate - the first tutorial where critical steps are not skipped and everything works exactly as your does !! Too many tutorials out there that leave you stuck because they forgot to mention that installed some required component... Nice work !
@@briandesign Now perhaps you an show us how to create a sidebar menu that stays in place and updates the content in the main panel - like most desktop and iPad applications. Still amazes me how hard it is to create a split view with a sidebar menu on the left and the details panel on the right. Surely there must be some standard widget for doing this - oh SwiftUI hmm!
Thanks for your video, it helped me a lot I just add that in the active nav-menu class I added "z-index = 1" so that the sidebar overlaps any bootstrap grid class on the main page Excuse me, I don't know English well. so I used a google translation Greetings from Chile
Wow! This is awesome bro!! Before i know you i have an extremely thirsty of React, but now i got a pleasant drink to take away my thirsty, thanks alot bro🙌🙌🙌
@Brian, You were complaining about your Emmet not auto-suggesting html syntax in JavaScript. To rectify the issue, you will simply go to Emmet settings and check for this: “"emmet.includeLanguages": { "javascript": "javascriptreact" },” Include JavaScript among the languages that Emmet will work on. Thank you for your this tutorial also.
Also, I like how you mapped through your Navbar and output the result but to improve more on it, instead of using {item.products}, etc you can use array destructuring too const {title, product, cName, etc} = item. Hence you only use {title}, next when outputting in ur tags. {title}
hi brian , i want to hats off to you man , you are awesome . please continue such awesome content , like different types of navbar , designing different small components in react like that . i like all your videos
Like and new subscriber. Thanks for share your knowledge and help the programmers community (And this React beginner xd). Btw, the format of your video is amazing.
Thankx for the wonderful tutorial :) . But, it would be great if you make the pages (home, reports) such that, when you click the menu, the page contents also shifts to right. Right now, if there is any content in the page, the menu div will hide certain portion of the page :(
This Brian, is definitely one of the best programming tutorials I have ever seen. I am learning React at the moment, and this video helped me so much with creating the sidebar for my new app. I thank you for your help and I look forward to your next videos :)
Hey, great video! One quick question, at about the 30:10 mark, where is the .home, .reports, .products coming from and what is that doing exactly? I also noticed you didn't add the team, messages, and support in there as well and was wondering the reasoning for that? Thanks!
at 30:10 he applied CSS for pages (home.js, reports.js, and products.js ) just for demo purposes.. and later he used those CSS classes in components(home.js, reports.js, and products.js) here at 33:35.
Watch my updated React Sidebar Tutorial Using React Router v6.4
ua-cam.com/video/zQBd3hNXJgI/v-deo.html
It says
Could not find a required file.
Name: index.html
after doing npm start
Hello brian icons show < error while mapping
Dear new coder and Brian,
probably new versions.
in react-router-dom v6, "Switch" is replaced by routes "Routes". You need to update the import from
import { Switch, Route } from "react-router-dom";
to
import { Routes ,Route } from 'react-router-dom';
thank u
@Brian Design pin this
thanks for everything..
Not sure if this is affecting anyone but they changed "component" from route to "element" and inside the curly braces, you put .
Thanks Brother, it helped a lot !!
Dear new coder and Brian,
In app.js you may need to make the changes as below for retrieving the pages:
Great video Thanks brian !
you, the MVP : ) thank you, I spent a lot of time debugging and didn't understand why no page got rendered
I tried to fix this issue for hours!!!!!!!!!!!!!!!
Thx so much
I just made a new version so you can see it using v6.4 of react router
@@briandesign Thankyou sir
I practiced a few times with this tutorial, now I understand about react and how to handle with font-end in basic. Thank you so much Brian you made my coding better.
Thanks uumza! glad it was helpful
Thanks for starting it up from basically square one. So many tutorials I've looked at just figure we already know a bunch of stuff and leave me wondering, "Okay. Should I delete this file? Should I have two of index.js? Um why does everything I do error out?" and then you just walk away frustrated. This really starts from "I know nothing" and helps the learner build from there.
Had been searching for a proper sidebar tutorial for a while. So glad I came across this amazing video. Clearly explained and just the right pace for me. Thank you so much!
Thank Youu !😁
Simplified my project with new vs code tricks I’ve learnt along the way. I like how u run into errors and explain the causes
Glad it helped!
I'm going through the code on github and my god I never realized how we could achieve such a slick UI with such less code!!! I really wish I had gotten into react sooner!!!
was able to implement this into my project pretty seamlessly. thanks!
awesome!
this was what i needed exactly for my apps admin section ... now i can get the ball rolling lol. Thanks mate
awesome!
A couple of years later, this tutorial is still amazing!
And you drop a lot of cool tips for noobs like me.
thank you!
idk how...but i never replicated a tutorial before without issues. I replicated this tutorial and had zero issues on the first try. Tells a lot about how efficient your tutorials are. Thanks!
Great to hear!
These man needs more support .
I've been wanting to learn REACT for a long time, but I found it kinda difficult, but his tutorials put me through and he made them simplified, thanks Brian.
If you wanna help me sure, you can teach us how to achieve user Authentication with ReactJS.
Much Love.
Also leave all your social media link, imma follow you as soon as possible.
Thanks David! I linked my twitter in my channel page
@@briandesign Ok man...
Much love and keep up the good work .
But please honor my request on how to achieve user Authentication with ReactJS.
Thanks once again.
@@nelsonchika for sure!
@@briandesign I also got to the first set of videos you posted on you channel on UI/UX Designs they are awesome, if you can also convert them to HTML codes, I'll be greatful.
@@nelsonchika I'm planning on doing some HTML and css vids soon. I just got this one project I'm trying to finish first, then I can start posting a lot more vids
This is the first time i make a sideBar, and damn it was so easy i thought it was complcated, thanks u brian for your help, definitly gonna like and subscribe
Got this up and running on my newest project. works like a charm. Thanks, Brian.
very easy and smooth. I liked the video . There is another option we could add is, based on the boolean value of sidebar (state)we can decide whether to show the whole nav-menu component by removing left-margin= -100% value by using a curly closing bracket.
Anyway thank you very much for your wonderful nice tutorial.
Thank you! This was so helpful and I really understood everything you did. Once again, thank you for such an amazing tutorial!
Glad it was helpful!
You should be targeting 'transform: translateX' in your animation rather than 'left' for smooth animations. Left triggers the reflow where as transform only the repaint.
I like how you dont jump around the screen all the time, my guy, I had to import all pages as:- import Home from './components/pages/Home';
etc
Good Video
It was a short video and very simple step to follow, I'll check out for more of your clips. Thank you so much!! You made my life learning React easier.
Solid, I'll check out your video on adding drop down in the sidebar, next. Appreciate it!
thanks thanks thanks thanks thanks thanks thanks thanks thanks ......thanks a lot brother...take love..May Allah swt increase you in good deeds and increase your knowledge
It was insanely helpful! Thanks a lot! Just started creating my React portfolio website and this navbar is perfect!
An excellent tutorial on creating a Navigation Menu in React. Thanks, Brian
{2023-01-23}
Really great tutorial! Super simple to follow and very easy to go further from here. I was looking for something like this for a while now ;) Thanks!
Glad it was helpful!
Brilliant mate - the first tutorial where critical steps are not skipped and everything works exactly as your does !! Too many tutorials out there that leave you stuck because they forgot to mention that installed some required component... Nice work !
Thanks Duncan!
@@briandesign Now perhaps you an show us how to create a sidebar menu that stays in place and updates the content in the main panel - like most desktop and iPad applications. Still amazes me how hard it is to create a split view with a sidebar menu on the left and the details panel on the right. Surely there must be some standard widget for doing this - oh SwiftUI hmm!
I love this channel, your codes are most clean to understand
simple and straight forward video. keep it up
This was awesome! Thank you!!! Really loved the explanation. Could be helpful to have the exact things we need to install via terminal :)
Thanks for your video, it helped me a lot
I just add that in the active nav-menu class I added "z-index = 1" so that the sidebar overlaps any bootstrap grid class on the main page
Excuse me, I don't know English well. so I used a google translation
Greetings from Chile
Thanks Christian!
I needed the z-index trick. Thanks man
Brian thank you so much!!! the video was very clear, straight to the point. looking forward to more videos of ReactJs
Thanks!
Added this to my project very easily, thank you! the icons you showed me will make my website look wayyy better lol
Super amazing dude, straight forward and easy to understand!
Thanks for the video, it was really easy to follow and the finish result looks great!!!
Thanks for the tutorial, very details explaination!!
Wow! This is awesome bro!! Before i know you i have an extremely thirsty of React, but now i got a pleasant drink to take away my thirsty, thanks alot bro🙌🙌🙌
@Brian, You were complaining about your Emmet not auto-suggesting html syntax in JavaScript. To rectify the issue, you will simply go to Emmet settings and check for this:
“"emmet.includeLanguages": { "javascript": "javascriptreact" },”
Include JavaScript among the languages that Emmet will work on.
Thank you for your this tutorial also.
Also, I like how you mapped through your Navbar and output the result but to improve more on it, instead of using {item.products}, etc you can use array destructuring too
const {title, product, cName, etc} = item.
Hence you only use {title}, next when outputting in ur tags. {title}
@@melfordbirakor thanks yeah I had that emmet code I just had to restart my code editor. Also thanks for that tip for refactoring the code
@@briandesign My pleasure 😃... welcome
I really enjoy every second! Love you Brian keep continuing...
Thank you for wonderful tutorial..I was able to use this seemlessly..
thank you! Now I'm learning to use inside a top bar you teach, thank you !
Thanks Gabriel!
work very well ... i am studying and u are very didatic ... icon "hack" was pretty cool
hi brian , i want to hats off to you man , you are awesome . please continue such awesome content , like different types of navbar , designing different small components in react like that . i like all your videos
Thanks a ton!
thank you! this video is very easy to follow and understand what's going on!
Love the design and simplicity.. Waiting for more cool projects like this- plz do more react stuff.
Can i suggest some small projects?
sure
Like and new subscriber. Thanks for share your knowledge and help the programmers community (And this React beginner xd). Btw, the format of your video is amazing.
Thank you for this video! It was a huge help👏🏾
Thank you thank you so much for this tutorial!! youre a saviour!
feel free to watch my updated version using react router v6.4
you are an awesome teacher thanks! very easy to follow along
Anyone else who is watching this video not for tutorials, but for love for coding?
Thank you very much! You are so cool and modern. I push the like button so hard, I broke my keyboard then, guush:(
This is what I need, thanks man!
Thank you dude, this was EXACTLY what I needed for my senior project. Learned a lot about React along the way!
Amazing!
Insanely helpful.
Really explanatory!! Good job and thank you!
Thank you very much it helped me a lot , keep up the momentum please
Thank you! Super video about React Sidebar Navigation Menu
Glad it was helpful!
Thank you!! This really helped us in our project
omg...right now looking for the same....yup 🙃 Thank you soo much... Kindly make more videos 👍😊
Thanks!
Very Helpful, thanks!!
Very clear. Helped me a lot. Thank you! You earned a sub.
Awesome, thank you!
Thank you very much for this tutorial!!
Thank you very much dude! Great Job!!!
This saved my time ... your my MVP
Thankx for the wonderful tutorial :) . But, it would be great if you make the pages (home, reports) such that, when you click the menu, the page contents also shifts to right. Right now, if there is any content in the page, the menu div will hide certain portion of the page :(
Amazing tutorial, got urself a new follower!
Simple and very useful, thanks!
You went crazy bro 🔥
Awesome! Thank you for your time!
Excellent tutorial, thank you very much!
Thanks very much! Subscribed!
Hi there,
I found that the 'component' in 'App.js' line15 is not working in new version, so i replace to
yo i think ur style is the best
Thank you so much. Got it working exactly as u showed
awesome!
This was a lifesaver. THANK YOU!!!
Amazing tutorial! you made so simple also the dynamic content on a react site.
Thanks!
Good job Sir Brian !
Great tutorial! Really awesome result and very good explanations.
Thanks!
Thanks alot for this. Was very simple and works just fine.
Great to hear!
Awesome, Liked and subscribed😉
This was so dope, thank you
Thanks, you help me so much!
Awesome tutorial! Just finished the whole thing and actually enjoyed the process. Thank you! Please keep small project tutorials coming.
Really helpful, Thanks a lot Brian!!
Glad it was helpful!
Badabin Badaboom! LOL.. works Perfectly buddy! Thank you very much!
Thank you for content!
This Brian, is definitely one of the best programming tutorials I have ever seen. I am learning React at the moment, and this video helped me so much with creating the sidebar for my new app. I thank you for your help and I look forward to your next videos :)
Thanks Jerry! Glad it helped
You are amazing guy! So thanks, i loved it!!!
Thanks Aquino!
Excellent Video Thanks!
Hi Brian! Thanks for the tutorial!. I have a question, though. Can we change the path to link? How do we do that?
Really like your presentation style
I appreciate that! thanks
that was awesome bro thank you
very explained tutorial. good job 👍
You earned my subcription.
Thanks!
Awesome tutorial, thank you for this wonderful vedio.
Thank you so much for this video 🙃
Great Job Brain! the videois right on point, thank you
MASTERPIECE thanks a lot man
Hey, great video! One quick question, at about the 30:10 mark, where is the .home, .reports, .products coming from and what is that doing exactly? I also noticed you didn't add the team, messages, and support in there as well and was wondering the reasoning for that? Thanks!
at 30:10 he applied CSS for pages (home.js, reports.js, and products.js ) just for demo purposes.. and later he used those CSS classes in components(home.js, reports.js, and products.js) here at 33:35.
Amazing , thank you so much man
Thank you....This video saved my time
Great to hear!