[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.

[eyal-egf]

Hi @zernonia thanks for your great work!

I really wanted to use the new Sidebar, installed with npx... it adds over 20 components to ui/sidebar
but there is no example in the docs how to create a simple Sidebar or how to use any of the components..

Do have any estimate when instruction of how-to-use will be added to docs?
Or is there a link for a basic example implementing the Sidebar component?

Thank you!! 🙏

[Nils3311]

In the blocks are two examples. Based on them I was able to set it up. But you are right - docs would be great 😊

[adamtrll]

Hi @zernonia thanks for your great work!

I really wanted to use the new Sidebar, installed with npx... it adds over 20 components to ui/sidebar but there is no example in the docs how to create a simple Sidebar or how to use any of the components..

Do have any estimate when instruction of how-to-use will be added to docs? Or is there a link for a basic example implementing the Sidebar component?

Thank you!! 🙏

While it's not a bulletproof solution, you can always refer to the original version.

They have detailed documentation of the sidebar, and while the source codes are implemented in React, the core ideas should work the same. I used those docs and the blocks implemented on the original site to set up my sidebar.

https://ui.shadcn.com/docs/components/sidebar

[orenmizr]

this x sidebar thread can also help: https://x.com/shadcn/status/1842329158879420864
to be fair, i don't know how much of the original sidebar he managed to complete.

[Nagell]

After long search, I think it can save some time the next guy looking for this.
The 'blocks' menitioned by @Nils3311 are here: https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/lib/registry/default/block

@Nils3311 Feel free to add it also to your comment :)

[Kozyrevb]

Opening and closing the sidebar does not work in the mobile version. I get the mobile version by reducing the browser width.

[TitusKirch]

Opening and closing the sidebar does not work in the mobile version. I get the mobile version by reducing the browser width.

Have a look here, maybe this will solve your problem #840

[brys0]

Seems the sidebar causes hydration issues when used with nuxt/ssr.

I've documented said hydration errors below for easy access.

Desktop view - sidebar can be displayed fully and not become a sheet/overlay

1

[Vue warn]: Hydration children mismatch on 
<button id="radix-vue-dropdown-menu-trigger-v-0-0" class="peer/menu-button flex w-…debar-accent-foreground" data-sidebar="menu-button" data-size="lg" data-active="false" type="button" aria-haspopup="menu" aria-expanded="false" data-state="closed"> 
Server rendered element contains fewer child nodes than client vdom. 
  at <Primitive data-sidebar="menu-button" data-size="lg" data-active=false  ... > 
  at <SidebarMenuButtonChild key=0 class="outline-none data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground" variant="default"  ... > 
  at <SidebarMenuButton size="lg" id="radix-vue-dropdown-menu-trigger-v-0-0" type="button"  ... > 
  at <PrimitiveSlot id="radix-vue-dropdown-menu-trigger-v-0-0" type="button" aria-haspopup="menu"  ... > 
  at <Primitive id="radix-vue-dropdown-menu-trigger-v-0-0" type="button" as-child=true  ... > 
  at <PrimitiveSlot class="outline-none" > 
  at <Primitive ref=fn<s> as=undefined as-child=true  ... > 
  at <PopperAnchor asChild=true element=undefined as=undefined  ... > 
  at <MenuAnchor as-child="" class="outline-none" > 
  at <DropdownMenuTrigger class="outline-none" asChild=true > 
  at <DropdownMenuTrigger as-child="" > 
  at <PopperRoot> 
  at <MenuRoot open=false onUpdate:open=fn dir="ltr"  ... > 
  at <DropdownMenuRoot onUpdate:open=fn > 
  at <DropdownMenu> 
  at <SidebarMenuItem> 
  at <SidebarMenu> 
  at <SidebarHeader> 
  at <Sidebar key=0 collapsible="icon" > 
  at <TooltipProvider delay-duration=0 > 
  at <SidebarProvider> 

2

[Vue warn]: Hydration node mismatch:
- rendered on server: 
<button class="inline-flex items-center…round h-10 w-10 ml-auto">
 <empty string> 
- expected on client: Symbol("v-cmt") 
  at <Teleport to=undefined disabled=false forceMount=false > 
  at <MenuPortal disabled=false forceMount=false to=undefined > 
  at <DropdownMenuPortal> 
  at <DropdownMenuContent class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg" align="start" side="bottom"  ... > 
  at <PopperRoot> 
  at <MenuRoot open=false onUpdate:open=fn dir="ltr"  ... > 
  at <DropdownMenuRoot onUpdate:open=fn > 
  at <DropdownMenu> 
  at <SidebarMenuItem> 
  at <SidebarMenu> 
  at <SidebarHeader> 
  at <Sidebar key=0 collapsible="icon" > 
  at <TooltipProvider delay-duration=0 > 
  at <SidebarProvider> 

3

[Vue warn]: Hydration children mismatch on 
<li class="group/menu-item relative" data-sidebar="menu-item"> 
Server rendered element contains more child nodes than client vdom. 
  at <SidebarMenuItem> 
  at <SidebarMenu> 
  at <SidebarHeader> 
  at <Sidebar key=0 collapsible="icon" > 
  at <TooltipProvider delay-duration=0 > 
  at <SidebarProvider> 

Mobile View - Sidebar is a sheet and overlays on top of page contents

1

[Vue warn]: Hydration node mismatch:
- rendered on server: 
<div class="group peer hidden md:block" data-state="expanded" data-collapsible="" data-variant="sidebar" data-side="left"> <empty string> 
- expected on client: Symbol("v-fgt") 
  at <DialogRoot open=false onUpdate:open=fn > 
  at <Sheet key=1 open=false onUpdate:open=fn<setOpenMobile> > 
  at <Sidebar key=0 collapsible="icon" > 
  at <TooltipProvider delay-duration=0 > 
  at <SidebarProvider> 

[fabianbernhart]

Hey guys i found this Bug and created an MR

• fix: sidebar-provider imports fix: sidebar-provider imports #927

[Robert-K]

It seems the 'side' prop of the Sidebar is ignored by the SidebarProvider. The content is always pushed to the right, even when the Sidebar is on the right side.
Edit: Nevermind, make sure to put the SidebarInset before the Sidebar if you want it on the right.