Build A Twitter Sidebar using Next.js 14, React, shadcn/ui, and Tailwind CSS
HTML-код
- Опубликовано: 16 май 2024
- Hello, my friends and fellow developers!
In this video, we cover how you can build a Twitter Sidebar using Next.js 14 app router, React, shadcn/ui, and Tailwind CSS!
Let me know in the comments below if you want more Next.js content or something else.
GitHub Repo: github.com/max-programming/sh...
Next part: • Build A Responsive Sid...
Timestamps:
00:00 - Intro & Sidebar Demo
00:36 - Create Next App
01:18 - Setup shadcn/ui and theme
02:53 - Home Page & darkmode
04:08 - Adding components from shadcn/ui
05:30 - Sidebar component
09:34 - Sidebar Button component
17:03 - Adding sidebar links
19:42 - Use Link component for navigation
20:17 - Fix a bug caused by client-server components
22:28 - Adding all sidebar links
25:10 - Adding additional sidebar items
28:05 - Sidebar footer with popover
33:22 - Adding page with dynamic routes
35:15 - Highlighting active link in sidebar
36:13 - Conclusion
Other Tutorials:
⚛️ React and Material UI Todo App: bit.ly/reactmattodo
🟨 Other JavaScript videos: bit.ly/jstutorials
📘 Visual Studio Code videos: bit.ly/vscodevids
🔋 Build a Battery App in JS: • 🔋 Build a Battery Info...
Connect 🔗 :
Twitter: / maxprogramming1
Facebook: / max-programming-103081...
Github: github.com/max-programming/
Suggest, ask doubts in the comments, and share these videos to help!
Thanks for Watching!
#nextjs14 #reactjs #javascript
shadcn is really great 👍🏻
Excellent 👌
Excellent video! Love that you explain while you code.. 10x better learning experience compared to pasted code. Would love to see a landing page with a link to a clerk authenticated dashboard with user and admin roles. (Also perhaps a Prisma schema with simple CRUD functionality inside.. :) Thanks!
Thank you so much. Also that sounds like a very good idea I will definitely build something a little unique with the functionalities you mentioned above 🙂
next part pls
It'll be out in like 10 days or so.
How to do this with a submenu?
You can use the Collapsible component by shadcn ui for something like that or the Popover component if you want to pop it open
Ka
When you use shadcn-ui, why are you typing huge lines of code manually...
Sleepy...
I understand it might be boring. Will try to speed it up next time. Usually I type out lines of code manually instead of copy pasting so that the viewer easily understands what it does
Learn something new
Make responsive sidebar.
Yes. It'll be out 10 days later. As I am out of town 🙂
@@MaxProgramming Also make a video in which show nav on top in desktop view and sidebar on mobile view using shadcn ui.
That's a good idea. Thanks