Thanks Pedro! This was extremely helpful since you also took time to explain the why behind every snippet, rather than stopping at the how, which is hard to find in a tutorial. Good Luck!
Pedro, What is missing and it would be perfect will be if the instruction to display a page with data on it. That is really what is expected. I created pages for the menu but can't make it happen to get to the page.
bro much appreciated what you have done with this video but the I am not getting the source code while clicking the link that you provide. Actually, it opens something different code which is basically for image carousel using react. Can you please provide me the actual link to this particular code. Thanks, Siddharth from Kolkata, India
Okay! Great video. I got it. One thing I need to know is how to populate the information of those links eg. home,mailbox, etc and display the data or information on the page once click
nice video mate , I liked it, I hoped that you would make the sidebar shrink to the point where is only icons and can grow back with icons and titles . or changing a components in the right area instead. subscribed too.
Thanks so much for the guide! I'm trying to make the last part work (staying highlighted depending on pathname), and was curious if there is a way to do this based on the ID of a focused section in a single page website? I haven't gotten that part figured out yet. Thanks again for the thorough guide!
Thanks pedro. This video was very informative, it would be nice if you can create another video that displays text in each of the links you click and possibly link it to a JSON file server to show data stored, so people can see how to navigate this intuitive web app
Hey! Thank you so much for the tutorial :) one quick thing though, how do I remove that little white gap between the menu and the upper part of the window? Thanks!
@@PedroTechnologies Pedro, there are many requests here but I have not seen any replies from you to answer. For example, displaying the home page element with data, and others. otherwise this is a great beginner into course!
muito bom o seu conteúdo. Estudei seu código pois estava querendo deixar o campo do icon selecionado e isso me proporcionou varias ideias bacanas. parabém pelo vídeo e sua organização do código no git.
@@PedroTechnologies Yap, That's Good idea 💡and I have kind request.If you can make a video react js + Python login with database,it is very help full for us.
@@PedroTechnologies great video. how can I link these to real pages using router? do I import each new page and add the name/path into the link instead of just putting /home?
@@PedroTechnologies Nvm, this is my inexperience with VS Code and css, i didn't know it offered font-families on intelisence. Usually I get fonts from Google fonts.
On click of any section in side bar, how to render the corresponding component at the side of sidebar ? Right now it is getting rendered below the sidebar ..
Thank you Pedro. It is much helpful tutorial. The git repo points to different example on react. Can someone provide link to the git repo related this video.
bro it is a nice video, but I have some doubt. The #active id which gives the styles when some link is active, just render when the page is reloaded, can you tell how to make it whit react router? I'm stuck on it & I wanna make that without reload the page
Thank you! If you are using react router dom, then I would create a state called currentRoute, then when moving from route to route you change the value for the state, and now it will automatically rerender without refreshing the page.
Hey great tutorial but when I am trying to add a form besides the side nav it is going below it rather then being on side can you please help me how to deal with it
I'm not sure why this is't working for me but when i do height: 100%; in the .Sidebar{} it doesn't actually fill up from top to bottom, but 100vh does.
sir even if i have margin and padding as 0 in body in css ,the top margin is not removed please help ,its in ur program also,it popps just after add the sidebar menus.
Yes! I can make one! Both are pretty similar, the difference would be that you would have to copy and paste each row in the sidebar instead of generating from a list like in react!
Thank you! If u are using react router dom then you can put the sidebar outtside of the routes. For example, put the sidebar component as siblings to the routes
![Chat App Tutorial With Socket.IO, ReactJS, NodeJS [Part 1]](http://i.ytimg.com/vi/XS79S6nmaGM/mqdefault.jpg)
![Chat App Tutorial With Socket.IO, ReactJS, NodeJS [Part 1]](/img/tr.png)
Thanks Pedro! This was extremely helpful since you also took time to explain the why behind every snippet, rather than stopping at the how, which is hard to find in a tutorial. Good Luck!
I just saw this old post and simply you have progressed a lot
It's by practicing that you become a blacksmith
continue Pedro
Oh yes, this one right here, is the tutorial you'll need to make a react sidebar dashboard type of menu. Thank you so much Pedro!
thank you so much Pedro. You are really a very good teacher as you took time to explain the reason behind every step you make
I appreciate that!
Pedro, What is missing and it would be perfect will be if the instruction to display a page with data on it. That is really what is expected. I created pages for the menu but can't make it happen to get to the page.
bro idk how to say thanks for everything , i have some homework to create web you make me can feel better thanks
Happy to hear that!
Thank you so much I was struggling for 2 days on these but now I'm fine with this video you did well
found this video right when i needed it.. Thanks Pedro!
bro much appreciated what you have done with this video but the I am not getting the source code while clicking the link that you provide. Actually, it opens something different code which is basically for image carousel using react. Can you please provide me the actual link to this particular code. Thanks, Siddharth from Kolkata, India
Thank you, this was just what I was looking for. I appreciate your work!
My first ever react project. Concept over-simplified. Thanks! Would love how to connect it to the backend.
Pedro, you are the best ! This is exactly what I needed, thank you so much
Explained so well! Thanks PedroTech!
Glad it helped!
Yes it did helped!
Thank you Pedro! This was so helpful!
Thank you very much for this tutorial! saved my life!
Thats video really Awsome for me because "window.location.pathname" is answer of my problem .. Thank you so much
Happy to help!
Okay! Great video. I got it. One thing I need to know is how to populate the information of those links eg. home,mailbox, etc and display the data or information on the page once click
nice video mate , I liked it, I hoped that you would make the sidebar shrink to the point where is only icons and can grow back with icons and titles . or changing a components in the right area instead. subscribed too.
Thanks so much for the guide! I'm trying to make the last part work (staying highlighted depending on pathname), and was curious if there is a way to do this based on the ID of a focused section in a single page website? I haven't gotten that part figured out yet. Thanks again for the thorough guide!
dude!! that was dopeeeee... really appreciate the work. can you plz extend this vid with hamburger icon ??
Thank you! I have a video on how to make a responsive navbar which shows how to make a hamburguer menu!
@@PedroTechnologies couldn't find it!... Drop the link here, that'd be of great help 😊
This is insanely genius.
Excellent video. Very explanatory and efficient.
thanks man it was really helpful
Great Explanation Thank you ! suscribed
Awesome, thank you!
loved the video subscribed :)
Thanks for subbing!
Thanks! Good video and nice explanation
Thank you for a very well explained video.
great. I like like like the method you teach. easy to understand. it is very helpful to me
Glad to hear that!
Thanks pedro. This video was very informative, it would be nice if you can create another video that displays text in each of the links you click and possibly link it to a JSON file server to show data stored, so people can see how to navigate this intuitive web app
Thanks Dear Pedro ! I learn very much from you. Please start teaching freelancing on upwork and fiver.
Thank you so much Pedro!
Hey! Thank you so much for the tutorial :) one quick thing though, how do I remove that little white gap between the menu and the upper part of the window? Thanks!
Hey, you can set the body element in css to have a padding of 0 and a marging of 0!
@@PedroTechnologies Hi I did margin: 0; and padding: 0; but still have same issue and keep making good video like this really helpful. Thank you
@@Raj0x01 I think that u can put margin instead padding in link css
@@jesusperez4502 I fixed it I forgot that I was in App class.
@@Raj0x01 how did you fix it?
Awesome! Is there another tutorial on linking the actual page to the navbar?
@pedroTech share a link on the linking page
U r too good thanks a lot never subscribed faster
Hahaha thank you so much! Really appreciate the. support!
thank you for this tutorial I learnt a lot.
Glad it was helpful!
@@PedroTechnologies Pedro, there are many requests here but I have not seen any replies from you to answer. For example, displaying the home page element with data, and others. otherwise this is a great beginner into course!
Appreciate the tutorial, is there a way to access the source code? current link leads to an image carousel repo
Muchas gracias era lo que estaba buscando, muy completo pero simple
This is a really cool video.. appreciate it... Thanks a lot 🙏
ty man, this (const isActive = window.location.pathname === href) saved my life
Appreciating the efforts you put in your videos! Thank you. Can you please share the ReactJS related extensions you use for Vsocde
Thank you pedro. Awesome
Wonderful tutorial👍
Very good video, thank you!
Thanks good job from Việt Nam
Glad to see u here! Thank you!
@@PedroTechnologies i want u update more video to react website
when I add import { sidebarData } from './sidebarData'; the page turns white and does not show the sidebar design :(
Check the console
Hi! Thaks for this video. Can you answer on my question?
How to create navigation these with Routes?
This is awesome!
Glad u liked it!
muito bom o seu conteúdo. Estudei seu código pois estava querendo deixar o campo do icon selecionado e isso me proporcionou varias ideias bacanas. parabém pelo vídeo e sua organização do código no git.
Fico feliz! Obrigado por ver meus videos!
16:48 "tipo" hahaha, video fera btw
Kkkkkk o portugues as vezes sai do nada
Awesome and helpful content
What VSCode plugin allows for the rfce? I have rsc which I guess does same thing however it doesnt name the component?
I think the name is ES7 React snippets
@@PedroTechnologies That was it, thanks!
Why did not you provide the right link??
was very usefull the explanation part
Thanks for the video bro🥰🥰🥰🥰
how can u set the same id to elements in the list? Aren't ids supposed to be unique
can plz share the vedio of complete tamplate(dynamic) custom design .... will passing the breakpoints.... on sidebar open r close something like that
Yes!
@@PedroTechnologies that would be wonderful
Vídeo bão dms mano, quando vi q vc é BR pirei kkkkk. Vc explica muito bem, vou seguir e ir esperando novos vídeos
kkkkkkk Vlw! A glr fica surpresa qnd descobre q eu sou br kkkkkk
Massa mesmo, ganhou mais um inscrito
I subscribe you. Every thing was clear and perfect presentation.❤❤ and do more videos like this react UI desgin.Thank you
Thanks for the sub! I am planning on some material UI stuff, or maybe some pure css and html stuff too!
@@PedroTechnologies Yap, That's Good idea 💡and I have kind request.If you can make a video react js + Python login with database,it is very help full for us.
@@PedroTechnologies great video. how can I link these to real pages using router? do I import each new page and add the name/path into the link instead of just putting /home?
Hey, awesome video! What is the extension for selecting fonts ? I sam you had bunch of them.
Hey, I don't use any extension for fonts. Do you mean the fonts I chose in my CSS?
@@PedroTechnologies Nvm, this is my inexperience with VS Code and css, i didn't know it offered font-families on intelisence. Usually I get fonts from Google fonts.
Thank you so much for the efforts, i think the repository URL is invalid please update the reppo-url in the description
Can you please provide the git link for this, the one which you have kept is for react-image-carousel
Hey, im sorry about that! I made the dumb mistake of accidentally pushing my code for the carousel to the same repo as the sidebar. I lost that code!
Nice! Can you also complete the routing for this dashboard?
I have some videos on routing if you are interested!
On click of any section in side bar, how to render the corresponding component at the side of sidebar ? Right now it is getting rendered below the sidebar ..
Hey, so you can do that by styling the sidebar to always be to the left of a div. And inside that div you put the routes!
Thank you Pedro. It is much helpful tutorial.
The git repo points to different example on react. Can someone provide link to the git repo related this video.
Hey, cool, I know I am late but, on the links, I would like to add an external link... instead a "inside page". How can I do that? Thanks!
Thank you so much for this really educative and easy-to-understand tutorial!
bro it is a nice video, but I have some doubt. The #active id which gives the styles when some link is active, just render when the page is reloaded, can you tell how to make it whit react router? I'm stuck on it & I wanna make that without reload the page
Thank you! If you are using react router dom, then I would create a state called currentRoute, then when moving from route to route you change the value for the state, and now it will automatically rerender without refreshing the page.
@@PedroTechnologies Can you make a video tutorial on it?
Thanks for this ❤️❤️
You are better than techwithtim
Great !! Really helped me. Regards.
Hey great tutorial but when I am trying to add a form besides the side nav it is going below it rather then being on side can you please help me how to deal with it
Hi,
Using this tutorial, How do I navigate to the next page so that the content of that page is displayed instead of just linking to it?
how can i render other routes beside or the right to the sidebar.
Thanks Pedro, nice job could you make it Dropdown List??
Hi Pedro,how do I get to the side navbar fixed and all other pages get to appear on the right side of the navbar.
Thanks Pedro!
How is your side bar fixed in all routes...explain
i am also trying to find the same
amazing as before (Y)
Thank u!
I'm not sure why this is't working for me but when i do height: 100%; in the .Sidebar{} it doesn't actually fill up from top to bottom, but 100vh does.
sir even if i have margin and padding as 0 in body in css ,the top margin is not removed please help ,its in ur program also,it popps just after add the sidebar menus.
That is probably due to the title margins. Whenever you use an h1 tag it has some margin, I don't have the code for this so I can't check it out.
@@PedroTechnologies thankyou, it's fine i solved it , your video helped me for my project thanks
@@ALEXAN03R Can I ask how to solve it?
@@jeeonpark3116 i think i did some modifications in the body section in css.
if u use ur own body design this error will be removed.
@@ALEXAN03R I solved by adding margin: 0 in .SidebarList
Thank you for answer!
Thanks pedro ❤
Did you create the project by yarn?
Very well explained, please make videos on MUI v5
github source code is not correct please review it or give a link to the website where you pick the color from?
Great stuff.
Glad you enjoyed it
Great job!
Qual extensão tu usou pra ter os snippets do react? ia usar o da rocketseat
Boa, o nome é ES7 React, Redux, Graphql Snippet
when we click on an item in side it will route to other page and I still want the side bar to be in the routed page how this is achieved
Why isn't the sidebar all the way to the top, but a few inches below? Can you tell me how to change that?
Great tutorials
Thank you! I am glad you enjoy them!
Can you make a tutorial for HTML in vs code?? For the sidebar
Yes! I can make one! Both are pretty similar, the difference would be that you would have to copy and paste each row in the sidebar instead of generating from a list like in react!
@@PedroTechnologies thanks bro!!! 😁😁
Is there a way to prevent the entire page from reloading when using the sidebar?
your code goes to the image carousel, what happened?
It is a very useful exaple but why there a white space in top of the sidebar how to avoid it
Hello, can you show me how to put the profile photo and the description?
The link to your code is wrong, can you please attach the proper code link?
Every was clear and perfect but the thing that is tuck on my mind is how after being redirected to another page we still have sidebar 🤦🏻♂️
Thank you! If u are using react router dom then you can put the sidebar outtside of the routes. For example, put the sidebar component as siblings to the routes
@@PedroTechnologies Oh yeah Exactly my bad smh , thanks for the quick reply
@@YasserCherfaoui no problem!
Can you add routing? react router v6.10 when you click the page changes
i was not able to find they sidebar repository in the provided github link
hey dude can you make another video on how to display sub menu items as well, it will be great help , thank you :)
I've been thinking about it! Maybe in the future!