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.

[prithweedas]

For me the issue was I didn't have the breakpoints setup correctly in my tailwind config.

[BrianJosephStudio]

I hope this can help somebody. I've learned that it's always worht checking tailwind config again. When it's broken, you don't get errors or hints about it. But basically my tailwind config js was pointing to the shadcn components folder but the path was wrong, so the styles were simply not even kicking in. After hours I finally realized, corrected the path and it started working.

[DhiaBen20]

I'm facing the same issue. I created a new React project and successfully initialized shadcn. After that, I added the sidebar component and copied the sidebar code from the documentation, but the sidebar isn't working and the console shows no errors

[ethandpowers]

Make sure that you're on the most recent version of whatever browser you're using. I've had issues with the sidebar on older versions of Chromium.

[DhiaBen20]

Turns out the issue was actually on my end — I accidentally imported the Sidebar icon from lucide-react instead of my actual sidebar component

[youness-el-mesbahy]

for me it was a styling issue.
Firstly, I've remove "hidden" class from two places. in Sidebar component last return div container and "sidebar-container" then I've add a classname "w-0" conditionally when state==="collapsed" to solve empty space that the sidebar fills later. that's as a temporary solution because there is a sidebar bad transition effect