Sidebar not visible in the desktop mode

[rajat1saxena]

I added sidebar 08 to my app and it does not show the sidebar in the desktop mode. In the mobile view, it does!

Simply installed the block in an existing app. I am using both Pages and the App routers.

[Syntheticz]

I'm also having this problem.
I tried to create a new app just to test if it is a machine problem and it ended up working on the new app. I though that Daisy-UI was interfering with shadcn (because I discovered shadcn late on the project and it's too good to pass on) so I tried to remove Daisy-UI and it still does not work I also use NextAuthProvider and tried to remove that as well and It does not work. I tried re structuring my layout.tsx and it still does not work.

If someone know how to fix this issue please do tell. TIA

[loveurlife1]

any solution yet?

if i change hidden to flex it works but again. not able to see what's in sidebar. it just opens and closes.
className="group peer hidden md:block text-sidebar-foreground"

sidebar.jsx
return (
(<div
ref={ref}
className="group peer flex md:block text-sidebar-foreground"
data-state={state}
data-collapsible={state === "collapsed" ? collapsible : ""}
data-variant={variant}
data-side={side}>
{/* This is what handles the sidebar gap on desktop */}

[loveurlife1]

found the solution.
change this for in sidebar.jsx
it works

className="group peer flex md:block text-sidebar-foreground"
className={cn(
"duration-200 fixed inset-y-0 z-10 h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",
side === "left"

return (
(<div
ref={ref}
className="group peer flex md:block text-sidebar-foreground"
data-state={state}
data-collapsible={state === "collapsed" ? collapsible : ""}
data-variant={variant}
data-side={side}>
{/* This is what handles the sidebar gap on desktop /}
<div
className={cn(
"duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear",
"group-data-[collapsible=offcanvas]:w-0",
"group-data-[side=right]:rotate-180",
variant === "floating" || variant === "inset"
? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
: "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
)} />
<div
className={cn(
"duration-200 fixed inset-y-0 z-10 h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",
side === "left"
? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)-1)]"
: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
// Adjust the padding for floating and inset variants.
variant === "floating" || variant === "inset"
? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+theme(spacing.4)+2px)]"
: "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
className
)}
{...props}>

{children}

)
);
})
Sidebar.displayName = "Sidebar"

[deadlyedge]

so it's to remove any 'hidden' here, right? it works for me, and for my other project which use a diffrent sidebar component. so i throught this is caused by nextjs versions or something.

[GaratSahil]

Hey @rajat1saxena , did you find a solution for the dynamic open-close sidebar issue? The solution shared by @loveurlife1 doesn’t seem to support toggling the sidebar via the button. For reference, I’m using Sidebar 07.