how to create sidebar in react JS | dashboard sidebar | responsive sidebar | navbar react router v6

Поділитися
Вставка

КОМЕНТАРІ • 78

  • @slaps_zrz
    @slaps_zrz Рік тому +1

    Turned out really well! Changed some styling and other things to fit in my project but it got better than expected!

  • @TimothyVandeweerd
    @TimothyVandeweerd 2 роки тому +7

    Thank you for sharing this, it was just what I was looking for. Much appreciated!

  • @nandiniverma5273
    @nandiniverma5273 Рік тому +1

    I followed this tutorial and it helped me a lot in less time. Thankyou sooo much

  • @mayurahuja817
    @mayurahuja817 7 місяців тому

    Thank You very much this was very helpful, followed you step by step and it works great. Thank YOU !

  • @drjones694
    @drjones694 Рік тому +1

    thank you !!!! Needed this for an Electron app perfect

  • @bellyndayikeza4799
    @bellyndayikeza4799 Рік тому

    absolutely life-changing it really helped me a lot thank you

  • @yogitasabale9223
    @yogitasabale9223 Рік тому

    Thank you so much for sharing this sidebar

  • @kondapallinagaraju2951
    @kondapallinagaraju2951 6 місяців тому

    Super it's working perfectly

  • @julietkelechi7785
    @julietkelechi7785 2 роки тому +3

    This is really helpful. Thank you.
    What if I have submenu, how do I handle the navigation of the submenu?

  • @nextlevelcoding5834
    @nextlevelcoding5834 2 роки тому +1

    keep it up bro.. that's awesome for beginers

  • @قصص_التاريخ
    @قصص_التاريخ 3 місяці тому

    Thank you for this video ❤

  • @06-apsaltinoketitu43
    @06-apsaltinoketitu43 3 місяці тому +1

    BEST Bro...

  • @ShankarYadav-x2b
    @ShankarYadav-x2b Рік тому

    life changing ,such a nice way of explaining ,golden gem

  • @digitaldeveloper7635
    @digitaldeveloper7635 2 роки тому +3

    bro please make one vedio on dashboard designing in react
    and also make one video on sidebar toggle also full responsive mobile friendly

    • @webcoder9029
      @webcoder9029  2 роки тому +1

      in sha Allha, next video I will design react Dashboard with full responsive

  • @boffinstudyhub3392
    @boffinstudyhub3392 2 роки тому

    Awesome bro
    If you explain this then it will be outstanding

  • @mcastill3
    @mcastill3 Рік тому +1

    Great video, Thanks a lot!!!

  • @1football510
    @1football510 9 місяців тому

    This is just I'm looking for

  • @jabbarrefaghatjoo6897
    @jabbarrefaghatjoo6897 2 роки тому +1

    This is super cool, i have a wordpress website, i always use plugin in my website because I don't have experience in html, css, javascript, does anyone know how can I add this beautiful side menu to my website

  • @iamdandanie6898
    @iamdandanie6898 Рік тому

    thank you so much for the tutorial

  • @tinotendamangadza642
    @tinotendamangadza642 2 роки тому +1

    Hie so using






    its taken as a component right ? and it displays on the main page. So if that sidebar to be displayed on localhost:/3000/dashboard/ only how do i do it ?

  • @JasonVanover
    @JasonVanover 11 місяців тому

    This is great! Thanks

  • @ikik790
    @ikik790 Рік тому

    I have both navbar and sidebar how i can code?? Coz my sidebar is nt wrkng as i click on link it redirect to page not found

  • @cartoon19574
    @cartoon19574 4 місяці тому

    Amazing ............U Beauty

  • @darwinquinones5397
    @darwinquinones5397 Рік тому

    Thank you so much bro. What font do you have in your vs code?

  • @annasahradyan9849
    @annasahradyan9849 Рік тому

    This is super. Thank You!

  • @tanujsharma1046
    @tanujsharma1046 2 роки тому +1

    What if I want to align one item at bottom of sidebar can you please help ?
    example: Lets say I want only product list at bottom of sidebar.

  • @curtpenote3906
    @curtpenote3906 6 місяців тому

    how about with authentication? Like, you add a login page. The user can't view the sidebar if not authenticated?

  • @mauriciosoraluz7190
    @mauriciosoraluz7190 Рік тому

    Thank you for the video 🤝

  • @Jonas-lg6jm
    @Jonas-lg6jm 2 роки тому +1

    kudos webcoder 🤗

  • @PetrusSaulo1
    @PetrusSaulo1 Рік тому

    obrigado pelo conhecimento, me ajudou muito!

  • @wudao88
    @wudao88 Рік тому

    very helpful, thanks.

  • @tilwani_nikhil
    @tilwani_nikhil Рік тому

    dude this is amazing

  • @KomilQulmuhammedov
    @KomilQulmuhammedov 7 місяців тому

    Thank you!

  • @jefflegend456
    @jefflegend456 2 роки тому +5

    activeclassName is not working for me

  •  Рік тому

    Good job Man !!👍

  • @kunal007216
    @kunal007216 Рік тому

    Thanks a lot brother

  • @HikeWkam
    @HikeWkam Рік тому

    that was awesome

  • @tusharpatil0622
    @tusharpatil0622 Рік тому

    hello am facing an issue ....like when i use {children} then my whole side bar gets repeated dont know how
    pls help me and thanks in advance! happy coding

  • @yash33888
    @yash33888 Рік тому

    Thank you boss manh

  • @avengersassemble920
    @avengersassemble920 2 роки тому +1

    Well done

  • @Subhojit_roy0512
    @Subhojit_roy0512 10 місяців тому

    Thanks Brother

  • @Bkbois
    @Bkbois Рік тому

    How do you make it position fixed

  • @user-ng8bj8uz5n
    @user-ng8bj8uz5n 9 місяців тому

    👍👍👍👍

  • @ppatil681
    @ppatil681 2 місяці тому

    How to add header in this?

  • @Avichai997
    @Avichai997 2 роки тому +1

    thanks man!

  • @nandopookey9195
    @nandopookey9195 2 роки тому

    Thank you sir

  • @GiestRade
    @GiestRade Рік тому

    Can i get this in html ,php,css

  • @NikhithaDontha
    @NikhithaDontha 8 місяців тому +1

    is it sticky

  • @ilhemwalker9145
    @ilhemwalker9145 2 роки тому

    thank you so much

  • @TechWrathTV
    @TechWrathTV 2 роки тому +2

    how will you add login page? in this as login page as no sidebar,

    • @godswillonyeka5973
      @godswillonyeka5973 2 роки тому

      Login page will be outside and the sidebar menu will be inside a layout component

    • @king_mellajones7686
      @king_mellajones7686 2 роки тому +1

      this should help

    • @king_mellajones7686
      @king_mellajones7686 2 роки тому +1

      and the sidebarroute page like this
      const SideBarRoute=()=>{
      return (










      );
      }
      export default SideBarRoute;

    • @julietkelechi7785
      @julietkelechi7785 2 роки тому +1

      @@king_mellajones7686 thank you for this, really helpful

    • @king_mellajones7686
      @king_mellajones7686 2 роки тому

      @NN The children comes from the sidebar functional component "const Sidebar= ({children})" it is important you pass it as that is what renders the sidemenu page name , icons and , navigation to the respective pages
      const Sidebar= ({children}) => {
      const menuItem={
      title:'CUSTOMERS',
      items:[{
      path:'/users',
      name:'Users',
      icon:
      },
      {
      path:'/white-list',
      name:'Whitelist',
      icon:
      },
      {
      path:'/karma',
      name:'Karma',
      icon:
      }],

  • @AsfandiyorToraqulov-zj8jz
    @AsfandiyorToraqulov-zj8jz 7 місяців тому

    thank you code for

  • @_xnv_
    @_xnv_ Рік тому

    Thanks

  • @mdfact5944
    @mdfact5944 2 роки тому

    thanx men

  • @ajaynamdev3024
    @ajaynamdev3024 2 роки тому

    Thnks bro

  • @imBemZy
    @imBemZy 2 роки тому

    Thank u

  • @taponeltd
    @taponeltd Рік тому

    ❤️

  • @controlmlbb
    @controlmlbb Рік тому

    Plzz donot write . container {display:flex}

  • @paieu
    @paieu Рік тому

    if you dont share code dont come to youtube time wasted

    • @webcoder9029
      @webcoder9029  Рік тому

      Check Video description
      github.com/miladsiddiquey/deshboard-sidebar.git

  • @cbsampath4772
    @cbsampath4772 Рік тому

    Thank you very much

  • @sajeel995
    @sajeel995 Рік тому

    thanks a lot

  • @ShaikAbdulFayazYCE
    @ShaikAbdulFayazYCE Рік тому

    Thanks bro

  • @AsishSharma-gi8tb
    @AsishSharma-gi8tb Рік тому

    Thanks

  • @anjalimaurya121
    @anjalimaurya121 2 роки тому

    Thank you