Build Sidebar Like a PRO with Next.js 15 and Shadcn UI!

You need professional web solutions? Here is the link:

Here is the repo:

Next video to watch:

⚔️ Join The Horde

Some of the projects to check:

My first SaaS project, register and get 5 free tokens!

#webdevelopment #orcdev #shadcn #sidebar #react #nextjs #typescript

[orcdev]

What an incredible time to be a developer! ⚔ Don't stop the grind, keep learning! 🛡

[bgu.]

I especially love to have a dynamic list with ongoing items in the sidebar, it's so convenient for the user not to have to navigate to an intermediate page before reaching the item! And it's a good combination with breadcrumbs as header

[lokeshr]

I liked it, I'm going to use it. I added this in my YouTube playlist. Thanks for the info!!❤

[luizmeier]

That feeling... when you spend about 2 hours implementing something that already exists. Thanks for the video!

[AIDragonMusic]

I've already implemented it in my project. We used this sidebar 07 too.

[nickwoodward]

XD your video made me double check the 'blocks' again. I've been working on a 2 sidebar variation of this for over a day now, and I didn't check the examples all the way to the end! So thanks!

Still a nightmare though! I don't suppose you know how to make the 2nd sidebar closeable in demo #15?

I'm guessing their example purposefully doesn't close, as they rely on cookies in the sidebar provider to control a single sidebar open/close state. My (broken) version relies on wrapping each sidebar in its own provider because of this, but then I can't get the content to behave the way I want (the sidebars acting like their relatively positioned, pushing content out of the way). If you've got any ideas you'd be a miracle worker!

[Sepatu]

Do I have to install next.js and some other frameworks myself? or just need to follow your tutorial steps?

[matheus]

Hello, great work!! Can you share the code of this first dashboard that you showed at the beginning of the video?

[matsgundersen]

I dont think the code in the repo maches the code in the video. But very nice video! I am having some trouble understanding how to pass feched data to this sidebar. User for instance. I am doing the fetching serverside. But using that in a client component causes issues:(

[techiegihan]

Integrated it, awesome. But one issue. Because of the <a> tag inside the SidebarMenuSubButton element in nav-main.tsk file, page is not navigated as SPA, it is reloaded and navigated to the page. I just changed the <a> tag in to <Link>. It is not working. please help.