Hello, my friends and fellow developers!

In this video, we cover how you can build a Responsive Sidebar using Next.js 14 app router, React, shadcn/ui, and Tailwind CSS! This is the continuation of the previous video on how to build a sidebar using Next.js and shadcn/ui

Previous video: https://youtu.be/-vD8DAEEEWE

Let me know in the comments below if you want more Next.js content or something else.

GitHub Repo: https://github.com/max-programming/shadcn-sidebar

00:00 - Introduction & Setup
01:39 - Using Media Query in React
03:32 - Sidebar Mobile Component
05:31 - Fixing Hydration Error in Next.js
08:15 - Continue Sidebar Mobile
08:38 - Hide Close Button in Sheet
10:45 - Sheet Header and some styles
13:35 - Icon button to open sidebar
14:44 - Fix margins on mobile view
15:51 - Displaying links in sidebar content
19:53 - Sidebar bottom items in a Drawer
24:05 - Conclusion

Other Tutorials: 
    ⚛️ React and Material UI Todo App: https://bit.ly/reactmattodo
    🟨 Other JavaScript videos: https://bit.ly/jstutorials
    📘 Visual Studio Code videos: https://bit.ly/vscodevids
    🔋 Build a Battery App in JS: https://youtu.be/J8_hwKSeffY

Connect 🔗 :
    Twitter: https://twitter.com/MaxProgramming1
    Facebook: https://www.facebook.com/Max-Programming-103081931147293    
    Github: https://github.com/max-programming/

Suggest, ask doubts in the comments and share these videos to help!
Thanks for Watching!

#nextjs14 #reactjs #javascript

Max Programming 🇵🇸

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

Learn how to build a responsive sidebar using Next.js 14, React, shadcn/ui, and Tailwind CSS. The post covers the usage of the sheet and drawer components, toggling between desktop and mobile view, and styling the sidebar content.

Build A Responsive Sidebar using Next.js 14, React, shadcn/ui, and Tailwind CSS

<p>Great guide!  Thanks for the detailed walkthrough!</p>
