Chakra-UI Hamburger Navigation Menu (with Next.js)

[@ezequevedo3197]

You´re amazing, I'm started to learn chakra ui and I've been dealing with this thing. Finally I could get it. Thanks man, I´m a new suscriber! 😎😎😎😎

[@ShashankNaithani]

Thankyou Benjamin Brother.
You are intelligent and explained every step so professionally.

[@animationcity9491]

thank you bro i was just wasting my time on youtube then finally i found this tutorial,

[@marynam1559]

Thank you! It was very helpful !

[@jameskulundu8945]

Thanks the overflow property was what I was looking for

[@nando_lealrp]

Very good video, thank you from brazil

[@otavioaugusto8171]

Po, compartilha o código final ai mano kkk

[@ayodelealayemi6093]

Really helpful, thanks a bunch!

[@Ali-vz9rs]

Thank you very much Bro. This was really helpful!!😊

[@ManMattyU]

Brilliant content. Much appreciated.

[@archangel4894]

Thanks man, I learned a lot!

Top content. Excellent class.
Helped me a lot.
Thank you and success to you.

[@BenjaminCarlson]

Glad it helped!

[@blossombabalola1234]

Thank you, Benjamin, this was very helpful. However, the nested flex was a little confusing

[@BenjaminCarlson]

Apologies for that, the nested flex is to hold content together, think of it as a div (it is compiled to a div).

[@sma1015]

Thanks man. You are great

[@georgeyvb4460]

Thanks Benjamin ⚡🚀

[@abhaykumarsrivastava9640]

So the same Menu is copied and listed twice? Is there any way to make a menu list once and reuse it. This way if we make any change to the menu, we only have do do it at one place instead of two.

[@BenjaminCarlson]

you can but you have to add complex css. If you want to only update it in one place, you can create a yaml or json file to hold the data in one place and loop through that whenever you need the links!

[@_kryptobobby370]

Awesome! Thing is when you switch to dark mode everything stays white on the displayed menu

[@BenjaminCarlson]

You can fix this by passing in your own colors! Use "useColorMode" hook or "useColorModeValue"!

[@lucasyoung9594]

Question: How do you make the hamburger button disappear? I have what I believe is the same code as you (I don't use theme breakpoints though, I use the standard given breakpoints). When I click on the hamburger icon, it still remains, and everything else opens (including the close icon). And when I click the close icon, everything just opened closes. The display for the hamburger icon is set as "Flex" and not "display" which I believe would change it. If you or anyone knows the answer to this, that would be great to know!

[@lucasyoung9594]

I made a solution which was just to give the Hamburger Menu Button its own useState, and switch on it's own click and on the close icon click, so it's like this:
const [display, changeDisplay] = useState("none");
const [hamDisplay, changeHamDisplay] = useState("flex");
{
changeDisplay("flex");
changeHamDisplay("none");
}}
/>
{/* Mobile Content */}

{
changeDisplay("none");
changeHamDisplay("flex");
}}
/>
... {remainder of code}
But I am still curious about a solution that doesn't require two different useStates.

[@jorgecarreterogulias7748]

Hi Benjamin, when i click the hamburger icon i can only see a white screen, checked the code twice and its the same as yours. Do you know what could be the problem?

[@TutoDS2014]

Can create a video showing how to create a dashboard with sidebar?

[@BenjaminCarlson]

Do you have a specific design in mind?

[@TutoDS2014]

@@BenjaminCarlson instagram.com/p/CO0JeUVjAdg/?

[@DanteMishima]

Hey, would you happen to have the completeed code somwhere?

[@BenjaminCarlson]

unfortunately I don't have this code but almost all of the code for my videos can be found on my GitHub

[@DanteMishima]

@@BenjaminCarlson alright .... thank you

[@tundemurtala402]

good content

[@f7nl4y31]

thanks

[@codeblackfantasy8927]

Niiice

[@daffazaky8686]

thank you so much, next time please don't make your browser cropped