[Feature]: Sidebar

[zernonia]

Describe the feature

https://x.com/i/bookmarks?post_id=1847359896557408461

Additional information

• I intend to submit a PR for this feature.
• I have already implemented and/or tested this feature.

[ashokgelal]

Came here to request this and was excitee to see @zernonia already being on top of this like half a day ago 😅 But, yes, the new sidebar components from shadcn are 🔥 The only thing that I didn't see them implement is to be able to drag and drop for reordering. That'd be a great extra bonus.

[rjp2525]

Currently attempting a port of this 👍

Edit: probably won't have time to finish this

[adiramardiani]

Hi @zernonia

It's nice to see this discussion lively :)

Currently I am focusing on ease of navigation for the user, where he can move to pages he has previously opened or in the same context quickly. Let me convey my problem, currently I am making a system with a lot of menus, and this is not enough with one menu, but requires me to create a double sidebar / nested sidebar.

Vben.Recording.2024-03-23.204852.mp4

In this video functionally it meets my needs, the component based is using shadcn-vue (with new version of vben, but on this video is old version), but it's nice if shadcn-vue have new sidebar component like this functionality, and added to block.

My Feature Request :

• Collapsable Menu : I don't know whether it can be done from shadcn or not, or maybe it exists but it's not documented. but it would be nice to be given the option to be able to close other menus, if we click on one menu group on another, so that if we have a lot of sub groups, it won't open all of them when there is a user who only intends to explore the menu because he doesn't know which menu he wants. where to go. maybe like accordion, I hope you understand what I mean hahaha
• Multilevel Submenu : on complex system my add more than one level, minimum 4 level sub menu, and I hope this integrated with collapsable menu with smooth animation

Block / Example

• Nested / Double sidebar
  • Currently shadcn have nested, the mini menu is match what I need, but I think will good if the main menu is sidebar menu, like vben, not like email
  • With the mini menu on the side, applications that have lots of menus can be made neater and more organized
  • Can also be used to store main modules, such as finance, accounting, warehouse, etc
  • The mini menu is scrollable, and can change mode from icon only to icon with text
  • The other menu can be pinned, so we can make the menu remain there, or make it minimal
  • Because our user is have many operational purpose for display, I hope on double sidebar have option to show
    • All menu (mini menu, main)
    • Mini menu only (using pinned/unpinned button on main menu)
    • All menu including mini menu is hide (using collapse on bottom mini menu)
    • So user can choose to show menu, or fullscreen experience like on content
• Tabbed navigation : out of context, but I hope this will added on block (you can ignored)
  • The tab mechanism for previously opened pages allows users to move very quickly, so so good idea
  • I try make MANY tab, and still organized using scroll and next/prev button
  • a right-click feature to bring up options from a tab would also be very helpful

I think if shadcn-vue had a menu model like this it on block template would be amazing 👍

[maelp]

Would be a lovely addition to the lib!!

[zernonia]

Yo guys! The same functionalities for Sidebar will be added.
For extra feature please raised them on the main ui.shadcn repo yaa 😁

[mhelaiwa]

I just came from the world of vuetify and I am so excited to use shadcn-vue in my current project ..
Shadcn is a valuable addition to the vue world 💪..
Your efforts are much appreciated guys 💘
Thank you @zernonia

[Akmurat]

@zernonia, any idea how long it takes to add sidebar? I’d like to buy you a coffee for your effort, man. Great job!

[zernonia]

Yoo guys.. a quick update on this. (sorry I couldn't get much done this week as I had function oversea)

This ticket will have dependency on #805 to add sidebar blocks to your app.
I will handle this sidebar feature in 2 steps.

1. Add sidebar component to component registry (you will then be able to use them into your project, but you need to build the sidebar yourself)
2. Add sidebar blocks after New CLI (this will add sidebar blocks into your project directly)

[TitusKirch]

@zernonia That sounds great and looks very promising! I also used the sponsor feature here on GitHub for the first time to support your great work.