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.

[filiperangel]

Thanks. That worked like a charm.

[Ab-Coder123]

hey @loveurlife1 I have problem in this case
this code contain buttons dropdowns and dark mode but not working Why ?
Navbart.tsx
`'use client'
import { Home, LogOut, Settings, SquareMenu, User } from 'lucide-react'
import Link from 'next/link'
import { Button } from '@/components/ui/button'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuItem,
DropdownMenuTrigger
} from '@/components/ui/dropdown-menu'
import { Avatar, AvatarImage } from '@/components/ui/avatar'
import { Moon, Sun } from 'lucide-react'
import { useTheme } from 'next-themes'
import { SidebarTrigger } from './ui/sidebar'
// dropdown menu component
export function DropdownMenuCheckboxes () {
return (











Profile




Setting



Logout



)
}

export function DropdownMenudashboard () {
return (




Open Menu





Profile




Setting



Logout



)
}

// dark mode toggle component
export function ModeToggle () {
const { setTheme } = useTheme()
return (





Toggle theme



<DropdownMenuItem onClick={() => setTheme('light')}>
Light

<DropdownMenuItem onClick={() => setTheme('dark')}>
Dark

<DropdownMenuItem onClick={() => setTheme('system')}>
System



)
}

// navbar component
const Navbar = () => {
return (

{' '}
{/* leftbar /}

{/ rightbar /}

Dashboard

{/ toggle theme button /}

{/ profile dropdown menu /}

{/ dashboard dropdown menu */}

)
}

and this is the layout
import type { Metadata } from 'next'
import { Geist, Geist_Mono } from 'next/font/google'
import './globals.css'
import Navbar from '@/components/Navbar'
import { ThemeProvider } from '@/components/theme-provider'
import { SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'
import { AppSidebar } from '@/components/app-sidebar'

const geistSans = Geist({
variable: '--font-geist-sans',
subsets: ['latin']
})

const geistMono = Geist_Mono({
variable: '--font-geist-mono',
subsets: ['latin']
})

export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app'
}

export default function RootLayout ({
children
}: Readonly<{
children: React.ReactNode
}>) {
return (

<body
className={ ${geistSans.variable} ${geistMono.variable} antialiased}
>

{children}

)
}

theme-provider.tsx
"use client"

import * as React from "react"
import { ThemeProvider as NextThemesProvider } from "next-themes"

export function ThemeProvider({ children }: { children: React.ReactNode }) {
return (

{children}

)
}

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

[BrianUre]

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

[StrongTheDev]

Bruh this happened to me too - using auto-import, the IDE ended up importing the icon from Lucide.

[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

[nijikokun]

@shadcn I just ran into this today on the latest version, and I don't know what the actual answer is here.

[ethandpowers]

Make sure you're on an updated browser. That's a common issue.

[nijikokun]

I figured it out, it was a migration issue from v3 to v4 or well just in-general if you have tailwind config set in your components.json the CLI will pull v3 tailwind components and not v4.

I've fixed it locally :)

[ethandpowers]

Ah, that tracks.