Sidebar component

[dave-hawkins]

Apologies if this is the wrong place for this.

Is anyone interested in working on a sidebar component with me? Official or community edition. I've started a figma file for it, just wondering if anyone wants to work together on coding it up?

https://www.figma.com/file/sLFTDInVzI6lnPEbeuK6TG/Sidebar?type=design&node-id=0%3A1&mode=design&t=s25d8zlST4AKgEKh-1

[dave-hawkins]

Here's a basic tailwind play file of the structure: https://play.tailwindcss.com/7Qt66m0U5q?layout=preview

[codeagencybe]

You might want to check the Taxonomy project from Shadcn, it has a sidebar start. You have to login to see the dashboard with sidebar. https://github.com/shadcn/taxonomy

[tony-matheus]

@dave-hawkins, sure I would love to!

[edu-amr]

it is sowing interesting...

[iwootten]

There's a sidebar component in the music page example here: https://github.com/shadcn-ui/ui/blob/main/apps/www/app/examples/music/components/sidebar.tsx

[joaopedrodcf]

Should we make that component part of the ui library ?

[iwootten]

Could do, doing so requires some tweaking since it's expecting a playlist prop.

[portal7]

this component finally gets the attention it deserves

[dave-hawkins]

There's a sidebar component in the music page example here: https://github.com/shadcn-ui/ui/blob/main/apps/www/app/examples/music/components/sidebar.tsx

This is more a request for a top level sidebar nav component from me. Your suggestion is missing a few key UI elements that most people would expect I think. The one that @codeagencybe suggested was much closer, ie contains space for a logo / brand name and username / settings:

https://github.com/shadcn-ui/taxonomy/blob/main/components/sidebar-nav.tsx Or my basic html version: https://play.tailwindcss.com/7Qt66m0U5q?layout=preview

[space1worm]

Sidebar would be great addition to this amazing library! 🙂

[skdishansachin]

@dave-hawkins How is the progress?

[sturmenta]

For my use case (mobile and desktop) I solved using a custom WithSidebar component using the shadcn-ui.Sheet component for mobile and in desktop I reuse the styles for the layout sidebar used in docs

https://github.com/shadcn-ui/ui/assets/30802967/d447dcaf-54d7-4d12-a852-7a536556df6a

gist with the code

[gaofubin]

This is the admin template I designed, which contains sidebar and mobile sidebar. I hope it can help you. Git repo: https://github.com/gaofubin/t3-app-template/tree/main

[lacymorrow]

@sturmenta Great until we need a permanent sidebar, just one that might shrink

[Boolean-Operator]

I have a first version that uses the sheet component. On larger screens, it is a fixed sidebar and when the screen is below the tailwindcss sm: break point the fixed sidebar is hidden and a menu icon/button is shown int he upper left of the header. It is a public repo in my github. Feel free to use it. I have only recently started using shadcn so any feedback or suggestions are greatly appreciated.GitHub Repo

[lacymorrow]

You are rebuilding the wheel, my friend.

@Boolean-Operator Just use the ShadCN website site navigation, it does exactly what you are doing (using a sheet) and is essentially a drop-in component.

• Here is the site nav: https://github.com/shadcn-ui/ui/blob/main/apps/www/components/site-header.tsx
• The Main nav: https://github.com/shadcn-ui/ui/blob/main/apps/www/components/main-nav.tsx
• And the mobile nav: https://github.com/shadcn-ui/ui/blob/main/apps/www/components/mobile-nav.tsx

[Boolean-Operator]

Thanks for the feedback, This is exactly what I was looking for. This is certainly a more elegant solution. I started to read through the repo, but had a hard time focusing long enough to find the components.

Good thing I like wheels or I might think I wasted my time. ;-)

Seriously though, thanks again for pointing me to the exact components. I will definitely be adding this to my project.

On Mon, Jan 8, 2024 at 3:58 PM Lacy Morrow @.***> wrote:

You are rebuilding the wheel, my friend.

@Boolean-Operator https://github.com/Boolean-Operator Just use the ShadCN website site navigation, it does exactly what you are doing (using a sheet) and is essentially a drop-in component.

• Here is the site nav: https://github.com/shadcn-ui/ui/blob/main/apps/www/components/site-header.tsx
• The Main nav: https://github.com/shadcn-ui/ui/blob/main/apps/www/components/main-nav.tsx
• And the mobile nav: https://github.com/shadcn-ui/ui/blob/main/apps/www/components/mobile-nav.tsx

— Reply to this email directly, view it on GitHub https://github.com/shadcn-ui/ui/issues/667#issuecomment-1881810604, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABMULC47KVMZ45MS7JLSNJ3YNRMYNAVCNFSM6AAAAAAZRLMFDSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQOBRHAYTANRQGQ . You are receiving this because you were mentioned.Message ID: @.***>

--

Mark T Graybill

Software Engineer @ BDC Health IT

302.883.5228 (cell)

@.***

“... I will face my fear. I will permit it to pass over me and through me. And when it has gone past I will turn the inner eye to see its path. Where the fear has gone there will be nothing. Only I will remain.”

― Frank Herbert, Dune https://www.goodreads.com/work/quotes/3634639

[florish-lacy]

FYI: There is a new Mail example with a resizable/collapsible sidebar that I have adopted in all of my projects: https://github.com/shadcn-ui/ui/tree/main/apps/www/app/examples/mail

[bads77]

Hi @florish-lacy, I am trying to figure our this mail component, but I donot see the collapsable icons only functionality. Where are these below two lines coming from?

const layout = cookies().get("react-resizable-panels:layout")
const collapsed = cookies().get("react-resizable-panels:collapsed")

Where can I see the code for the layout?

[lacymorrow]

@bads77 those two lines are grabbing cookies from the browser to restore panels to the same size after a reload or navigation.

They aren't needed to run the example, you can just remove or change the defaults to undefined on line 36+37: https://github.com/shadcn-ui/ui/blob/0fae3fd93ae749aca708bdfbbbeddc5d576bfb2e/apps/www/app/examples/mail/page.tsx#L36C1-L37C1

[alamenai]

@shadcn , I would thank you for the new components that are merged into the library but unfortunately, the sidebar is not included, do you have this component in the roadmap?

[alamenai]

Here's a basic tailwind play file of the structure: https://play.tailwindcss.com/7Qt66m0U5q?layout=preview

But it should responsive for mobile devices, maybe wrapping it with a Drawer component.

[mmejaz]

@gaofubin i have check your work i appriciate you but please add some more modification like these image when collapsed it must show to nested menu like this

[Nefaris]

@alamenai looks like work on sidebars is underway: https://x.com/shadcn/status/1795920507851911443

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[mrroll]

I think this is still being worked on.

[hitecSmartHome]

I think this is still being worked on.

Can't wait

[Ghxst]

Looking forward to this.

[mkfyi]

@shadcn any news about it? Saw your teaser on X a few weeks before.

[harsh7800]

i hope this comes out soon cuz i was about to build this from scratch using framer motion

[lacymorrow]

Here's what I use in my projects, capable of being used in a collapsible layout:

https://github.com/lacymorrow/cinematic/blob/main/src/renderer/components/ui/Nav.tsx

[senpro-ingwersenk]

Using the MusicPlayer's sidebar (with tweaks) for the meantime, but considering that most desktop-first dashboard-y apps use a sidebar as the main menu, this would be a really good component to have. Strongly voting for it!

[hkaiser25]

Any update on when this is coming?

[lmntix]

https://github.com/user-attachments/assets/f5d3e1ed-a17e-4f7b-b7da-90e631c3a6af

Inspired by supabase sidebar with submenu design. built using shadcn and tailwind.

[Yashh56]

VID-20240824-WA0002.mp4 Inspired by supabase sidebar with submenu design. built using shadcn and tailwind.

Hey @lmntix Can you provide me the source code of this sidebar ?

[IngwiePhoenix]

@lmntix That implementation looks amazing! Would you mind sharing this or putting together a small package of it?

[codeagencybe]

@lmntix That looks slick. Can you share the source for that in a gist or something?

[harsh7800]

https://github.com/user-attachments/assets/78e01464-19e6-4bfd-beb8-9363596dc9bd

This is what i came up with tho it lacks smoothness but for now its fine for my use, later i will fix it

[lacymorrow]

I basically copied the Mail example:

https://github.com/user-attachments/assets/23c678a1-19f6-45d9-b159-1839ec59dd02

[mkfyi]

Maybe there's hope now after vercel hired the developer behind shadcn

[Irbopia]

Just in case you did not see this yet. npx shadcn init sidebar-01

[hitecSmartHome]

Yeah but it isn't official. We need to wait for it to be in the components on the web

[senpro-ingwersenk]

Hadn't seen that. Thanks for the ptr @Irbopia ! Yeah, can't wait for this component to become official. I spent way too much time looking for a "framework" that has a sidebar component. They are seemingly everywhere, but yet so few libraries/frameworks have them... kinda impressive.

[kamami]

When do you think this will be available? Is it worth waiting?

[hitecSmartHome]

I'm sure it's worth it