ui Sidebar component

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

Jun 23 '23 10:06 dave-hawkins

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

Jun 23 '23 12:06 dave-hawkins

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

Jun 25 '23 17:06 codeagencybe

@dave-hawkins, sure I would love to!

Jun 28 '23 17:06 tony-matheus

it is sowing interesting...

Aug 02 '23 19:08 edu-amr

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

Sep 08 '23 14:09 iwootten

Should we make that component part of the ui library ?

Sep 08 '23 14:09 joaopedrodcf

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

Sep 08 '23 18:09 iwootten

this component finally gets the attention it deserves

Sep 08 '23 19:09 portal7

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

Sep 10 '23 08:09 dave-hawkins

Sidebar would be great addition to this amazing library! 🙂

Sep 19 '23 08:09 space1worm

@dave-hawkins How is the progress?

Nov 08 '23 03:11 skdishansachin

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

Nov 28 '23 14:11 sturmenta

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

Dec 07 '23 02:12 gaofubin

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

Dec 07 '23 14:12 lacymorrow

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

Jan 08 '24 19:01 Boolean-Operator

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

Jan 08 '24 20:01 lacymorrow

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

Jan 08 '24 21:01 Boolean-Operator

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

Jan 22 '24 22:01 florish-lacy

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?

Feb 23 '24 20:02 bads77

@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

Feb 23 '24 20:02 lacymorrow

@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?

Mar 09 '24 14:03 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.

Mar 09 '24 14:03 alamenai

@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 WhatsApp Image 2024-03-14 at 3 51 17 PM

Mar 14 '24 10:03 mmejaz

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

Jun 09 '24 14:06 Nefaris

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.