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

preview_player
Показать описание
Hello, my friends and fellow developers!

00:00 - Introduction & Setup
01:39 - Using Media Query in React
03:32 - Sidebar Mobile Component
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:

Connect 🔗 :

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

#nextjs14 #reactjs #javascript
  1. Max Programming
  2. javascript
  3. typescript
  4. react
  5. js
  6. web development
Рекомендации по теме
Build A Responsive 0:30:16

Build A Responsive Sidebar Menu in HTML, CSS, & Javascript - Beginner

Build a Responsive 0:33:02

Build a Responsive Sidebar Menu with Animated Dropdowns | HTML CSS JavaScript Project

Animated Responsive Navbar 0:11:40

Animated Responsive Navbar with CSS - Plus Other Useful Tricks

Create a Responsive 0:29:59

Create a Responsive Sidebar Menu Using HTML CSS & JavaScript | Easy Step-by-Step Guide

Angular 15 Starter 0:00:22

Angular 15 Starter Project with Responsive Layout Sidebar

How to create 0:15:21

How to create a Responsive Navigation Bar (for beginners)

Create a RESPONSIVE 0:14:56

Create a RESPONSIVE NAVBAR with sidebar animation (CSS ONLY)

How to Create 0:20:32

How to Create Sidebar Using Bootstrap 5 | Responsive Sidebar With Bootstrap | Sidebar Menu

How To Make 0:16:56

How To Make Responsive Sidebar With HTML Tailwindcss And Javascript

How to Create 0:06:59

How to Create Responsive Sidebar using HTML, CSS & JavaScript

Build A Responsive 0:24:30

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

Build a Responsive 0:20:50

Build a Responsive Side Navbar w/ Submenu using Next.js 13 and Tailwind CSS

How to create 0:14:14

How to create a responsive SideBar Menu using HTML & CSS only.

Responsive Sidebar Menu 0:38:19

Responsive Sidebar Menu using HTML CSS and JavaScript | Dropdown Side Navigation Bar

Responsive Sidebar menu 0:14:57

Responsive Sidebar menu HTML CSS

Responsive Sidebar Menu 0:37:18

Responsive Sidebar Menu in HTML CSS & JavaScript | Dark/Light Mode

Responsive Sidebar Menu 0:45:21

Responsive Sidebar Menu Using HTML CSS & JavaScript

Responsive Dashboard Layouts 0:24:54

Responsive Dashboard Layouts with CSS Grid

Responsive Side Navigation 0:09:39

Responsive Side Navigation Bar in HTML and CSS | Dashboard Side Nav Bar with HTML and CSS

Responsive Sidebar With 0:23:33

Responsive Sidebar With Collapsing | Sidemenu | Menu | Code Effect

How to Build 0:03:17

How to Build a Sidebar Layout in Bubble | New Responsive Editor

Sidebar Navigation Menu 0:24:56

Sidebar Navigation Menu Tutorial ReactJS - Beginner Navigation Tutorial

How to Create 0:20:42

How to Create a Responsive Sidebar menu in ReactJS?

Build a RESPONSIVE 0:35:35

Build a RESPONSIVE SIDEBAR NAVIGATION with REACT.JS | React Projects | GeeksforGeeks

Комментарии
Автор

Dude... I have spent HOURS trying to find a way to close that sidebar when a link is clicked! Your video explained the way to do it in a dew seconds, thank you so much!

keithgoddard
Автор

This is super helpful!! thank you so much for sharing mate! 🔥

naylord
Автор

Top quality video, informative and succinct!

amaryadav
Автор

A pesar de la diferencia de idioma se entiende muy bien, muchas gracias

jersonarmijo
Автор

Why didn't you use TailwindCss to make the SidebarDesktop responsive: className="hidden sm:block" ?

meka
Автор

Hey,
Can you tell me the extension name that adds vertical color to the opening and closing tags?

dragos.cojocaru
Автор

Can I have your VS code setting.json file. Looks amazing

biniyamd