Is it possible to get the shadcn sidebar to act like the sidebar on shadcn?

[Quozzo]

The sidebar on shadcn is between the header and the footer but it doesn't look like there's an option so that it doesn't stretch across the whole screen. Does anyone have any suggestions?

[georgeeburt]

It's quite hard to grasp what you want to achieve with the given context from your post.

But if it's what I think you mean, you can change the z-index of the header or footer to bring them above the sidebar.

Something like this:

.header {
  z-index: 10;
}

.footer {
  z-index: 10;
}

[Quozzo]

That won't affect the height of the sidebar, so any items low in the list would be clipped behind the footer and inaccessible.

[georgeeburt]

You can add a bottom margin within the footer.

[Quozzo]

The footer isn't a fixed height and varies depending on the screen size to contain all of the links. It might be possible for the header though.

[georgeeburt]

Can you not just use the margins in % units? Then you know you'll have no conflicts there with the footer.

[MeatBoyed]

I had a similar question a while ago, instead of figuring out how to do it manually I used v0, which gave me mediocre results, and later found this dashboard template that did what I needed.
I would also recommend this free library of Shadcn components/templates on Github.
Hope this helps you find what you need

[lassounski]

I was having the same issue over here.

The behavior is a feature since the side bar is fixed while you scroll.

If you're are okay with the sidebar rolling with the rest of the page you can try this:

Find the keyword fixed in src/components/ui/sidebar.tsx and replace it for absolute.