Chakra UI Responsive Sidebar

Поделиться
HTML-код
  • Опубликовано: 9 янв 2025

Комментарии • 40

  • @Phyx1u5
    @Phyx1u5 3 года назад +3

    just what I was looking for. thank you very much!

  • @yamano5563
    @yamano5563 3 года назад +2

    Thanks for the nice video. It was very helpful.

  • @davidcarrillojr7783
    @davidcarrillojr7783 3 года назад +2

    Great content as usual!

  • @jonoisedev
    @jonoisedev 3 года назад

    BEST Chakra UI tutorials!

  • @nishantshah_
    @nishantshah_ 2 года назад +3

    A small request, if you could put the view on your right side and show the changes with every line of code you write. It will be very helpful and easier to understand step by step what each line does.

  • @TheMoocomp
    @TheMoocomp 2 года назад

    Thank you for your easy understanding guide.

  • @nataliaromankevich2351
    @nataliaromankevich2351 2 года назад

    Great example! Keep it up!

  • @f7nl4y31
    @f7nl4y31 3 года назад

    you are so helpful. thanks bro

  • @lerekofoloko6813
    @lerekofoloko6813 2 года назад

    Do you have it in the case where you only use Hamburger when it is on mobile screen?

  • @thangphan6047
    @thangphan6047 2 года назад +1

    Thank you so much.

  • @inhelliburn89
    @inhelliburn89 3 года назад +1

    hello, amazing tutorial, I have to questions, how can I show hover without clic, and how can insert. a link or redirect to the other pages created on the sidebar?

    • @0xredpill
      @0xredpill 2 года назад

      Use the latest react-router-dom v6

  • @AntonColeman-oz2tn
    @AntonColeman-oz2tn 2 года назад

    How do you anchor the sidebar when navigating to different pages?

  • @TutoDS2014
    @TutoDS2014 3 года назад +1

    is possible show the NavHoverBox on Hover and not on click?

    • @TutoDS2014
      @TutoDS2014 3 года назад

      And please build more sidebars and dashboards with Chakra!

    • @BenjaminCarlson
      @BenjaminCarlson  3 года назад

      Yes it is. You can use framer-motion for this as @rohan suggested

  • @maxharano940
    @maxharano940 8 месяцев назад

    how do you do it in TS? threw a bunch of errors...

  • @albenvi94
    @albenvi94 3 года назад +2

    How can I change the active NavItem?

    • @BenjaminCarlson
      @BenjaminCarlson  3 года назад +1

      if you're using next.js you can use useRouter()! const router = useRouter() if router.pathName == /your-path -> set css to active

  • @alexleung842
    @alexleung842 2 года назад

    Okay but what about the non-sidebar content? How do we style that correctly so it appears to the right of the sidebar?

  • @tranminhhaifet
    @tranminhhaifet 3 года назад

    thanks, very nice

  • @nhattrietcao3056
    @nhattrietcao3056 2 года назад

    How get drop down navitem, navitem children?

  • @rishabhpratapsingh5304
    @rishabhpratapsingh5304 3 года назад

    How to give a link to the sidebar

  • @hiich1584
    @hiich1584 3 года назад

    Awesome! Btw do you really intend to not use the shorthand classnames that chakra provides? i understand it may be for more explicitness

    • @BenjaminCarlson
      @BenjaminCarlson  3 года назад

      which shorthand classnames are you referring to?

    • @satyamktr
      @satyamktr 3 года назад +1

      @@BenjaminCarlson l guess like for marginTop we can use mt , for padding we can use p

    • @BenjaminCarlson
      @BenjaminCarlson  3 года назад

      @@satyamktr right, I do use the shorthands whenever I can. Maybe I accidentally didn't use it for one part.

  • @rohan7011
    @rohan7011 3 года назад +1

    Why is it not playing in HD

  • @arturioup8582
    @arturioup8582 3 года назад

    answer the question. how to make a dropdown on hover?

    • @BenjaminCarlson
      @BenjaminCarlson  3 года назад +2

      I wasn't able to get that to work. I was able to make it half work and I turned to stack overflow and GitHub for help but no luck. You're welcome to try and make it work though!

    • @amankrx
      @amankrx 3 года назад

      Chakra has a Tooltip overlay option and I used that to display description on hover.

  • @stephenachugwo
    @stephenachugwo 2 года назад

    9ce n cool. great job!

  • @lucadev6454
    @lucadev6454 3 года назад +1

    thats not responsive

    • @BenjaminCarlson
      @BenjaminCarlson  3 года назад +1

      It shrinks to just icons on smaller screens. Is that not responsive?