Shadcn UI mobile menu (the PROPER way)

🎓 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!

You can see an example of this implementation in the github repo for the shadcn course:

#shadcn #nextjs14 #reacthooks

[joja]

Thanks, the shadcn community needs you

[rasclatupon]

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

[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)

[asususer]

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

[pritammagdum]

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

[asususer]

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

[Kaiseo]

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

[Parthesh]

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.

[syncsteve]

Perfect timing bro I was just about to implement this

[williamschaefermeyer]

Found this just at the right time thanks for posting this

[akrishnadevotee]

or you could directly do: <DrawerContent className="h-full">

[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

[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 <Link> component from nextjs.

EDIT: I ended up putting <DrawerClose> within each <Link> but this feels a bit hacky, anyone have a better solution?

[any_account-bx]

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

[ihsanshafi]

can you push it on your github thanks alot

[haidernaveed-ivzm]

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

[mateusqueiros]

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

[bozzhik]

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

[Hicham-zt]

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