Shadcn UI mobile menu (the PROPER way)

⭐️ webdeveducatio...
🎓 Shadcn ui mobile menu component tutorial with react hooks and next js 14.
THE SHADCN UI COURSE IS NOW AVAILABLE - GET IT FOR JUST $12.99 BELOW!
www.udemy.com/...
You can see an example of this implementation in the github repo for the shadcn course:
github.com/tom...
🔔 Subscribe if you want more free tutorials like this one! ruclips.net/user/c...
#shadcn #nextjs14 #reacthooks

[@joja2174]

Thanks, the shadcn community needs you

[@pritammagdum24]

Yes it is true

[@rasclatupon]

Perfect timing - I've implemented this into my project already thanks!

[@asususer9731]

Instead of using the media query hook, you could have used the tailwind classes like hidden by default and sm:block which would make that drawer easily visible on mobile device only

[@WebDevEducation]

Tailwind css classes don't remove it from the dom which is what we need in this case

[@asususer9731]

@WebDevEducation Seriously? I've been using the tailwind classes to toggle the visibility and it worked everytime for me. Display property does that work for me.

[@WebDevEducation]

I don't think you've tested it out properly. It doesn't work that way probably because the drawer content uses a portal. Try reducing the screen size, open the drawer, then increase the screen size. Drawer still shows. In which case you'd need to do a bunch of dirty workaround using tailwind classes just to get it working. The media query hook is a lot cleaner.

[@asususer9731]

@WebDevEducation Yeah got it. Thank you🙌

[@AnimusBehemoth]

I'd suggest having the drawer come up from the bottom, since most users thumbs can only reach 2/3rds up the screen comfortably.
(this is not meant to detract from the excellent video)

[@asususer9731]

The sheet component of shadcn ui pretty much does the same thing in a simpler manner

[@WebDevEducation]

No it isn't. The sheet can't drag to close. And the setup is pretty much the same for sheet and drawer. Have you even used shadcn ui before?

[@asususer9731]

@WebDevEducation I am pretty much new to shadcn ui but I think the only difference between sheet and drawer is that the drawer can be dragged to close. Correct me if I am wrong.

[@WebDevEducation]

Correct. The whole point of the drawer is for mobile / tablet / touch screen devices. But if you prefer to use the sheet for mobile menus feel free to do so.

[@asususer9731]

@@WebDevEducation Yep thanks for the guidance

[@pritammagdum24]

Yes it is true You are best programmer to complete the remaining documentation of ShadncnUI. Thank you bro to explain this complex and important functionality

[@Parthesh28]

Simple and to the point video sir
i am building a similar thing for my NextJs project thankss

[@aliventurous]

Instant subscribe. You know your stuff. Would love to see your take on react-query for how to get data to many nested components. And framer-motion for complex animation sequences.

[@Kaiseo1022]

Genius! Thank you so much for this sophisticated approach!!

[@any_account-b6x]

This tutorial is awesome! 🎉 But I want to mention that you are using the utils function "cn" not in the correct way 😛

[@mikulcek]

A lot of value here, thank you!

[@syncsteve]

Perfect timing bro I was just about to implement this

[@WebDevEducation]

🙏

[@williamschaefermeyer7007]

Found this just at the right time thanks for posting this

[@akrishnadevotee]

or you could directly do:

[@kurtkellens5538]

Learned a lot! Thanks!

[@ikhsansdq]

Thanks for the tutorial, great video btw but I think sheet component will be more suitable for the component that you modified, it's simpler

[@WebDevEducation]

🙏

[@bengregory280]

Thanks for this, really helpful!

[@WebDevEducation]

Glad it was helpful! 🙏

[@ihsanshafi1047]

can you push it on your github thanks alot

[@edutechpty]

Thanks a lot for your content!

[@catalinim4227]

Awesome stuff, thank you!

[@haidernaveed-iv7zm]

Why did you choose to use a drawer over a sheet? just curious

[@WebDevEducation]

Drawer is draggable sheet is not

[@staticwasabi]

Thanks for this!

[@gie4830]

Thank you so much!

[@staticwasabi]

I have a nav with links in the mobile menu, how can I set the drawer to close when I click on the links? I'm using the component from nextjs.
EDIT: I ended up putting within each but this feels a bit hacky, anyone have a better solution?

[@AlexanderBelov-y8o]

Thank you for that!

[@WebDevEducation]

🙏

[@mateusqueiros3871]

The better approach would to use the Sheet component though...

[@WebDevEducation]

I prefer the drawer. You can't drag the sheet. Each to their own tho 🙏

[@jieyunxie4959]

very good video!

[@bozzhik]

bro next time we need to be able to copy your code make a github repositrory or at list github gist plssss dog

[@WebDevEducation]

You can find example implementation here: github.com/tomphill/support-me-course

[@Hicham-z7t]

great video but unfortunately you are a little fast for those struggling with coding still. had to rewind many times

[@WebDevEducation]

🙏

[@hofimastah]

You didn't finish!

[@jacob5403]

Drawer

[@WebDevEducation]

👍