Love you dudeeee! Omg im just starting to create this app for my company and I had no idea to do the drop box and dude! THANK YOU! After days, I finally figured out
Toop!! Muito obrigado pelos conhecimentos, confesso que pensei que fosse muito difícil e que não iria conseguir compreender e entender e também aprender, mas agora que conseguir finalizar, percebo que foi simples é muito fácil de entender, por mas que precisei traduzir a vídeo aula rsrs. Desejo todo sucesso e continue trazendo mais conteúdos bons, breve breve vai ser eu montando um canal também.
@@briandesign hello one question, can you change the background of the button or just style the button when its opened, and when closed it returns back to what it is?
Thanks for the great video! I did this just today - happened to auto'ly import the latest version of react-router-dom. The Switch made me run around for a while as I wasn't expecting something as key as that might get moved-out/deprecated. Anyone who may face this issue, please use Routes instead of Switch.
I would love to do a code along with a full React+SCSS web app tutorial A tutorial about Authorization with Json Web Tokens (JWT) and Refresh tokens would be neat as well :)
Thanks Brian for this awesome video. Any tricks if I want to keep the sidebar always Open and Show the content in the Right pane. What changes it would need in that case? Really appreciate your help.
Thank you sir, it was just what I was looking for. This was an excellent tutorial and is much appreciated. Can I ask how you would have all of the items that have sub items expand initially?
Great video Brian, it will be nice if after selecting a child component (Link) the sidebar should disapare to the left, it will make the navigation better. Thanks anyway.
can you upload some videos about, how to create websites using react + redux, please. You explain perfectly. Your videos are great. I love your Videos. All of them are very useful, thank you for all of them. But I have an Idea. if you launch the React course all of your subscribers will be so happy. Course content: 1. JSX - (HTML + jS) 2. Redux; Flux 3. State; Props 4. Hooks 5. The component LifeCycleC (Mounting; Updating; unMounting); 6. ComponentDidMpunt 7. React-Router 8. Link 9. Route -> URL 10. brouserRouter 11. Switch
Great Job Sir, literally best content 🙌🏼 Create my first web look by watching your video. 😋 Needed this type of tutorial for my Admin dashboard, can you make video on that too? dashboard functionalities with react (e.g. sidebar, topbar, login navbar topbar change with name , logout)
I'd create an "active" and "inactive" style and just change with a template string and short circuiting. So whenever you click the button it changes the style, without referring directly to 0% or 100%. It gives more control when you're trying to style it on a CSS. But thats just me, I've learned your way and its nice although I feel like I can get lost on my own code. Maybe its my coding ocd.
thanks so much for this vid! it helped a ton!! i was wondering though, how can we get a submenus submenu to display? I noticed some other comments were asking a similar question but I didnt see a response.
Great tutorial, only suggestion i would like to make: duplicate the hover border-left in the non hover state, with same background color as your background, so u don't get that jittery text on hover, plus i like to add "use-select: none", so you never get that ugly text highlight.
Nice tutorial. Really helped me a lot. Thanks. Is there a way to display sub-menus in deeper levels, I mean, an item having sub-menu which itself is a sub-menu. This can go to may be 3-4 levels. You are showing only two levels - main menu and sub-menu. Appreciate your quick reply. Benny
I learned so much by watching you! Thank you very much for this. Question: What if you wanted to put an image in for an icon? Even harder question, what if you had a button with a pseudo::before and you wanted to put an icon in that?
Greetings, thank you very much for the content. A question: I have a top navigation bar and this side navigation bar overlaps, how can I make the side one start just below the top one?
Mano se vc soubesse quantas pessoas vc ajuda e como seus vídeos ajudam no nosso desenvolvimento. Muito obrigado mano, vc é demais. Queria até fazer um pedido, um vídeo criando um site com Next.Js
Thank you so much for this great tutorial it's amazing and helpful. I have question please, how can I add nasted navbar menu? I just try to add it but it gets tricky when I want to add the mapping. If you can help me with this please.
Hello nice tutorial! keep it up 😎 i think i have a bug im trying to open the dropdown from Reports menu when im in another url (example, the Team's url that not have dropdown) but this make a redirect to Reports url and doesnt open the dropdown, i have to been in this reports url if i want to open the dropdown, any suggestion? thanks
the video was great thanks a lot but one thing that i wanna say please little more explain when you are typing your code for some person like me who is beginner . :)
Awesome work and really easy to follow along with and learn! I'm wondering if you can make the components behind the Sidebar to be able to shrink and grow in width to avoid content being lost behind when opened?
Great video! Btw I tried this and added more elements to it(more than what can be displayed on screen at a time) but now I want a scroll functionality for this sidebar only, how I can do that?
Great tutorial! I have a question which is about how to add a URL(external link) in the object list (the SidebarData.js) and access it in the Submenu component?
Oops. Never mind. It just simply need to change the DropdownLink from (= styled(Link) ``;) to (= styled.a ``;) and add href={item.path} in the component like
Hello, I need your help. I have a dropdown inside a dropdrown but Im having a challenge when I click one link of the second dropdown all the links of the second dropdown display there content instead of only one. And also when I try to display the items in flex they just display in a straight line.
Hey Brian! Thanks for this video! Extremely helpful. I wanted to ask how to keep showing the selected subnav option even after refreshing the page? Say I clicked on reports1 and now I refresh the page. How do I keep the SideMenu and Submenu open with 'Report1' selected?
This was a great tutorial. Enjoyed and really easy to follow. I want the sidebar to be at the same z index as the regular page. so when expanded, it shrinks the main content instead of covering it. Any suggestions?
Traducir por voz 128 / 5000 Resultados de traducción To start I love your videos, I would like if you can make one with React Sidebar Navbar Footer and of course responsive. 🙏
At 36:00, when I created all the sidebarData, sideMenu and all, and refresh the page, My data of sidebarData like Overview, reports and etc doesn't show up. Please help me and tell me where I could be wrong
Great tutorial! Do you know any way to make it so that when you click on the tabs to open the drop down menus it stays on the same page and opens the submenu instead of going to its own page?
Hi Brian...Great tutorial and great learning. One problem I am facing. When the number of menu items is high and doesn't fit in a page, the items don't scroll down. Am I doing something wrong or can you or anyone else help me with a solution please? Many thanks!!!
Is there a way to have it expand the drop-down without changing the route for the top level item? IE: You want to go to Report2, but you first navigated to Report then to Report2 when selected.
you can remove the link from Report and just turn it into a div, so it's basically just an open and close button, then all your routes would just be the sub menus
@@briandesign thank you so much it worked, the only problem is the other menus that doesnt have submenus doesnt have link anymore pls help 🙏 also i tried to add some transition and smoothness on the dropdown but doesnt seem to be getting anywhere!
hay how can we show only one dropdown menu at a time like if you have open report and now you want to open a message. you click on message and now your report will hide and only messages list will be show
how to add transition to when you click to open the dropdown? i really tried to make it smooth. also anyway to not go to the link when there is dropdown and u click the main root? cuz thats not how dropdowns work man.... there should only be link when u click the items on the dropdown or when theres no dropdown and u click the sidemenus
what if function instead of path? example: logout button you put a sidebar. instead using path, function logout triggred when you push the logout button in a sidebar
I'm busy doing this in a Typescript and React with Node.js project but for some reason the Key and Item. Specifically speaking about the "item." does not pick up on the title/icon etc from the object data. Not sure why and now, I am stuck... everything till then has worked amazingly, until i hit this... sigh.
Love you dudeeee! Omg im just starting to create this app for my company and I had no idea to do the drop box and dude! THANK YOU! After days, I finally figured out
Managed to get this working using only two components and recursion! Thank you so much for this! Amazing!
Please share through videos, I'm really struggling here understanding React and the whole web syntax coming from a backend Java developer
Toop!! Muito obrigado pelos conhecimentos, confesso que pensei que fosse muito difícil e que não iria conseguir compreender e entender e também aprender, mas agora que conseguir finalizar, percebo que foi simples é muito fácil de entender, por mas que precisei traduzir a vídeo aula rsrs. Desejo todo sucesso e continue trazendo mais conteúdos bons, breve breve vai ser eu montando um canal também.
I'm using your sidenav on my project. Thanks mate! what a great Guru
I love using styled-components as well..they make working with css so easy and dynamic
Yeah styled components are awesome
This tutorial saved me !!!! Thank you so much ! I just subscribed
me too hehe :D
Your tutorials are really amazing, they add a lot of value, you deserve many more subscribers!
You are really great! I am doing my react project with the help of your tutorials. Thanks a lot lot. Please continue uploading amazing videos!
Thanks, will do!
@@briandesign hello one question, can you change the background of the button or just style the button when its opened, and when closed it returns back to what it is?
Thanks for the great video! I did this just today - happened to auto'ly import the latest version of react-router-dom. The Switch made me run around for a while as I wasn't expecting something as key as that might get moved-out/deprecated. Anyone who may face this issue, please use Routes instead of Switch.
Thank you so much brother for this wonderful tutorial, I was looking for the same from long time for dashboard kind of layout
No problem!
Thank you... i recently started learning react!! it has given big boost to my learning :) :)
Keep it up!
I would love to do a code along with a full React+SCSS web app tutorial
A tutorial about Authorization with Json Web Tokens (JWT) and Refresh tokens would be neat as well :)
My fav react tutor! ⭐
That's exactly what i need right now! Thanks u so much! Keep it uppppp
Good job Brian. I love your content. Keep going bro.
Thanks Brian!
Really nice! I love that you can easily add menu items by changing the data file.
Great Man ! Please Do a carousel (auto) with styled components !
who disliked this video bruh dude like this guy is awsome awsome awsome quality showes.
they must have been watching this upside down and thought it was the thumbs up button
Great tutorials, it's very useful for me
Very Good, this made a lot of sense
I learned alot from you. Thank you very much ❤️
Excelent video, thank you very much!
Fue de mucha ayuda. Saludos desde Argentina !
Well done. can you create a React Dashboard Tutorial using Reactstrap
I can add it to my video list
Definately something I'd like to see!
@@briandesign that'll be great, waiting for that
Thanks Brian for this awesome video. Any tricks if I want to keep the sidebar always Open and Show the content in the Right pane. What changes it would need in that case? Really appreciate your help.
Many thanks! You helped a lot
Thank you sir, it was just what I was looking for. This was an excellent tutorial and is much appreciated. Can I ask how you would have all of the items that have sub items expand initially?
Great video Brian, it will be nice if after selecting a child component (Link) the sidebar should disapare to the left, it will make the navigation better. Thanks anyway.
can you upload some videos about, how to create websites using react + redux, please. You explain perfectly. Your videos are great.
I love your Videos. All of them are very useful, thank you for all of them. But I have an Idea.
if you launch the React course all of your subscribers will be so happy.
Course content:
1. JSX - (HTML + jS)
2. Redux; Flux
3. State; Props
4. Hooks
5. The component LifeCycleC (Mounting; Updating; unMounting);
6. ComponentDidMpunt
7. React-Router
8. Link
9. Route -> URL
10. brouserRouter
11. Switch
check out my react website videos, I cover a lot of the things you mentioned
Great Job Sir, literally best content 🙌🏼
Create my first web look by watching your video. 😋
Needed this type of tutorial for my Admin dashboard, can you make video on that too? dashboard functionalities with react (e.g. sidebar, topbar, login navbar topbar change with name , logout)
I'd create an "active" and "inactive" style and just change with a template string and short circuiting. So whenever you click the button it changes the style, without referring directly to 0% or 100%. It gives more control when you're trying to style it on a CSS. But thats just me, I've learned your way and its nice although I feel like I can get lost on my own code. Maybe its my coding ocd.
Thanks for the video, only one thing, the sidebar is not responsive right?
thanks so much for this vid! it helped a ton!! i was wondering though, how can we get a submenus submenu to display? I noticed some other comments were asking a similar question but I didnt see a response.
Great tutorial, only suggestion i would like to make: duplicate the hover border-left in the non hover state, with same background color as your background, so u don't get that jittery text on hover, plus i like to add "use-select: none", so you never get that ugly text highlight.
Great job, i love this video, thank you 😍😍
Thanks Son
Obrigado seu lindo! S2
Nice tutorial. Really helped me a lot. Thanks. Is there a way to display sub-menus in deeper levels, I mean, an item having sub-menu which itself is a sub-menu. This can go to may be 3-4 levels. You are showing only two levels - main menu and sub-menu. Appreciate your quick reply.
Benny
I learned so much by watching you! Thank you very much for this. Question: What if you wanted to put an image in for an icon? Even harder question, what if you had a button with a pseudo::before and you wanted to put an icon in that?
Amazing video. Quick question, I wanna put some text on the top bar, where should I do it?
you are amazing bro
Thanks for the tutorial
i seem to have a bug mapping the subNav, u did make use of a "?" before the map function but now all subnavs become active when one is clicked
Greetings, thank you very much for the content.
A question:
I have a top navigation bar and this side navigation bar overlaps, how can I make the side one start just below the top one?
thanks a lot!, it was very helpful!!, how can i do that the sidebar will not hide the content of the page when we expand the navbar? thanks
Cool video.
@25:55 shouldn't you avoid that in favour of setSidebar((currState) => !currState)?
hey brian thankyou for awesome video, i have question, what if we add multi level menu on sidebar? example overview -> reports -> reports a, b, c
How would you go about adding one more nesting item, into an existing nested item.
Thanks, bro!
Mano se vc soubesse quantas pessoas vc ajuda e como seus vídeos ajudam no nosso desenvolvimento. Muito obrigado mano, vc é demais. Queria até fazer um pedido, um vídeo criando um site com Next.Js
Thank you so much for this great tutorial it's amazing and helpful.
I have question please, how can I add nasted navbar menu? I just try to add it but it gets tricky when I want to add the mapping.
If you can help me with this please.
hey bro, amazing tutorial, but how can I make disappear the sidebar when I click on tab of sidebar?? Thx
Hello nice tutorial! keep it up 😎 i think i have a bug im trying to open the dropdown from Reports menu when im in another url (example, the Team's url that not have dropdown) but this make a redirect to Reports url and doesnt open the dropdown, i have to been in this reports url if i want to open the dropdown, any suggestion? thanks
Thank you for that great video but I would like to have a collapsable dropdown. Would you mind showing me how to do it please
the video was great thanks a lot but one thing that i wanna say please little more explain when you are typing your code for some person like me who is beginner . :)
Awesome work and really easy to follow along with and learn!
I'm wondering if you can make the components behind the Sidebar to be able to shrink and grow in width to avoid content being lost behind when opened?
Thank You So much
Amazing vide0
Thanks ♥
Great video! Btw I tried this and added more elements to it(more than what can be displayed on screen at a time) but now I want a scroll functionality for this sidebar only, how I can do that?
add this in css and it will work
{ overflow : auto;
}
Goood video dude.....but normalize stating the dependencies required so we wouldn't have to go back and forth stopping and restarting the server.
Hi, Brian! Can you please have a video on uploading image files & storing textual data on firebase with Reactjs? It’ll be really helpful. Thanks! :)
Great tutorial! I have a question which is about how to add a URL(external link) in the object list (the SidebarData.js) and access it in the Submenu component?
Oops. Never mind. It just simply need to change the DropdownLink from (= styled(Link) ``;) to (= styled.a ``;) and add href={item.path} in the component like
Very nice
Hello, I need your help. I have a dropdown inside a dropdrown but Im having a challenge when I click one link of the second dropdown all the links of the second dropdown display there content instead of only one. And also when I try to display the items in flex they just display in a straight line.
Thank you
Hey Brian!
Thanks for this video! Extremely helpful. I wanted to ask how to keep showing the selected subnav option even after refreshing the page?
Say I clicked on reports1 and now I refresh the page. How do I keep the SideMenu and Submenu open with 'Report1' selected?
@Robson Silveira can you pls tell me how u did it, with code if possible many thanks!
This was a great tutorial. Enjoyed and really easy to follow. I want the sidebar to be at the same z index as the regular page. so when expanded, it shrinks the main content instead of covering it. Any suggestions?
you would need to set the value of the of the width of the div using react so that it changes the on the fly
Traducir por voz
128 / 5000
Resultados de traducción
To start I love your videos, I would like if you can make one with React Sidebar Navbar Footer and of course responsive. 🙏
Thanks!
Welcome!
nice job .How Can i make responsive this sidebar?
Awesome video +++++++++++++++++ 🙂
How can we keep submenu open when every-time we load app?
Thank you so much for the tutorial.
Could you make a portfolio website please :) btw nice video!
Forsure!
Hi, can you please show an example of multilevel sidebar navigation up to 3 level in react. :)
At 36:00, when I created all the sidebarData, sideMenu and all, and refresh the page, My data of sidebarData like Overview, reports and etc doesn't show up. Please help me and tell me where I could be wrong
Great tutorial! Do you know any way to make it so that when you click on the tabs to open the drop down menus it stays on the same page and opens the submenu instead of going to its own page?
Just remove the link from the main menu and turn it into a div
How would you close one dropdown when the other is open?
Class perfect, but to be honest I didn't like "styled. component" tool it is not readable and I confuse about which one is it.
35:47 what's key for?
Hi, How to close other open submenu when clicking to another menu. tnx
Hi Brian...Great tutorial and great learning. One problem I am facing. When the number of menu items is high and doesn't fit in a page, the items don't scroll down. Am I doing something wrong or can you or anyone else help me with a solution please? Many thanks!!!
b.c its position is fixed. try to make it absolute or in real case the content will be longer than the navbar so I think it's not a problem I think so
@@sonynguyen4954 Wrong, add a scrollbox in your css.
How to prevend the menu of closing right after click?
Thaks for sharing friend
Anytime!
@@briandesign love your content cuz u so damn good
@@CrookzArtwork thanks!
Please which theme are you using, please everything in detail. Thanks in advance
ua-cam.com/video/6etaWaiMkvM/v-deo.html I made a vid here
Thanks
Very usefull
Thanks a lot
Brother which color theme do you use for Vscode?
How to highlight active menu in same sidebar. I tried with id =active but its not working
buenas como puedo hacer esa barra con next js ?
Is there a way to have it expand the drop-down without changing the route for the top level item? IE: You want to go to Report2, but you first navigated to Report then to Report2 when selected.
you can remove the link from Report and just turn it into a div, so it's basically just an open and close button, then all your routes would just be the sub menus
@@briandesign Fantastic, worked perfectly. Also, that was the fastest response on video comment I have ever seen.
@@Johnne1625 glad it worked! and thanks haha, I usually check for comments every few hours
@@briandesign thank you so much it worked, the only problem is the other menus that doesnt have submenus doesnt have link anymore pls help 🙏 also i tried to add some transition and smoothness on the dropdown but doesnt seem to be getting anywhere!
@@AtifKhan-cm8qv I'm having a similar issue, looks like the explanation is not clear enough from the video and comments.
how do i change the position of the icon. the icons are above the label
How can one highlight the selected menu item to know the current page?
hay how can we show only one dropdown menu at a time like if you have open report and now you want to open a message. you click on message and now your report will hide and only messages list will be show
How to make the sidebar scrollable when you have a lot of side menus?
add this in css and it will work
{ overflow : auto;
}
@@AshutoshandAnurag but how to scroll without the vertical bar appearing?
@@AshutoshandAnurag thank you so much you are the life saver
@@AshutoshandAnurag please let me know where should I put this overflow auto
how to add transition to when you click to open the dropdown? i really tried to make it smooth. also anyway to not go to the link when there is dropdown and u click the main root? cuz thats not how dropdowns work man.... there should only be link when u click the items on the dropdown or when theres no dropdown and u click the sidemenus
Hey is there a way to make it so that the navbar at the top is fixed to the top of the screen so you can't scroll down and it disappear?
nvm got it I hate css
i have problem when i open sidebar the page will be hide , what can i do to fix problem?
Thank good videos. Please scroll sidebar.
what if function instead of path? example: logout button you put a sidebar. instead using path, function logout triggred when you push the logout button in a sidebar
pls tell me if u fix PLS 🙏
I'm busy doing this in a Typescript and React with Node.js project but for some reason the Key and Item. Specifically speaking about the "item." does not pick up on the title/icon etc from the object data. Not sure why and now, I am stuck... everything till then has worked amazingly, until i hit this... sigh.
Nevermind - i figured things out haha :P
if i want submenu in submenu how i can do that ??
awesome stuff! do you have a github?
yeah in bio
@@briandesign can you share the git hub link
@@NaveenPatnala in bio