Chakra UI Responsive Sidebar

[@jonoisedev]

BEST Chakra UI tutorials!

[@yamano5563]

Thanks for the nice video. It was very helpful.

[@Phyx1u5]

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

[@nishantshah_]

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]

Thank you for your easy understanding guide.

[@davidcarrillojr7783]

Great content as usual!

[@thangphan6047]

Thank you so much.

[@nataliaromankevich2351]

Great example! Keep it up!

[@f7nl4y31]

you are so helpful. thanks bro

[@stephenachugwo]

9ce n cool. great job!

[@maxharano940]

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

[@tranminhhaifet]

thanks, very nice

[@lerekofoloko6813]

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

[@inhelliburn89]

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]

Use the latest react-router-dom v6

[@AntonColeman-oz2tn]

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

[@albenvi94]

How can I change the active NavItem?

[@BenjaminCarlson]

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

[@hiich1584]

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

[@BenjaminCarlson]

which shorthand classnames are you referring to?

[@satyamktr]

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

[@BenjaminCarlson]

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

[@TutoDS2014]

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

[@TutoDS2014]

And please build more sidebars and dashboards with Chakra!

[@BenjaminCarlson]

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

[@rohan7011]

Why is it not playing in HD

[@BenjaminCarlson]

Should be in hd now!

[@alexleung842]

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

[@BenjaminCarlson]

you could add a margin left

[@nhattrietcao3056]

How get drop down navitem, navitem children?

[@rishabhpratapsingh5304]

How to give a link to the sidebar

[@arturioup8582]

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

[@BenjaminCarlson]

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]

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

[@lucadev6454]

thats not responsive

[@BenjaminCarlson]

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