Shadcn's new Sidebar covering (overlapping) any header or navbar #5636

surafel-99 · 2024-10-30T05:23:27Z

surafel-99
Oct 30, 2024

Sidebar overlapping with header

Shadcn's new Sidebar component seems to cover any header or navbar. I was playing with the z index but can't make it work no matter how I try.

my current layout structure looks like this:

                  <html lang="en">
                    <body className={inter.className}>
        
                            <ThemeProvider
                            attribute="class"
                            defaultTheme="system"
                            enableSystem
                            disableTransitionOnChange 
                        >
                              
                              <Navbar />
                            
                              <FavoriteModal />
                              <ToastProvider />
                            
                              <SidebarProvider>
                                  <AppSidebar />
                                  <main className="w-full">
                                    <SidebarTrigger />
                                    {children}
                                  </main>
                              </SidebarProvider>
            
                            </ThemeProvider>
                  </body>
            </html>

I tried to add z index in the Navbar component and Sidebar Component which is found in the app-sidebar.tsx file. But it didn't work.

// navbar in the layout.tsx
 <Navbar className="z-10" />


// app-sidebar.tsx file
 <Sidebar className="z-0">
   //sidebar content
</Sidebar>

Also how can I make the sidebar to scroll with the main content instead of fixed and sticky? Please help!

hydrokat · 2024-11-11T15:14:48Z

hydrokat
Nov 11, 2024

Have you tried putting the overlapped elements inside the sidebar provider? I am currently experimenting with it as well and it seems that anything outside the sidebarprovider gets overlapped.

I have done it this way

//root layout
<html lang="en">
      <body className={inter.className}>
        <SidebarProvider>
          <div className="bg-background">{children}</div>
        </SidebarProvider>
      </body>
    </html>

// page layout
<div className="flex flex-row">
      <CustomSidebar menuItems={sidebarMenuItems} />
      <div className="p-4 flex-auto">
        <TopMenu topMenuItems={topMenuItems} /> <!~- the sidebar trigger is inside this -->
        {children}
      </div>
    </div>

0 replies

GabrielEValenzuela · 2024-11-24T22:17:53Z

GabrielEValenzuela
Nov 24, 2024

Hello! How are you?

Sorry for this probably stupid question, but I don't fully know about front topis 😅

I have a similar issue with Sidebar component integrating ReacFlow, I get this

I tried to modify Tailwind, CSS, and make a div, but nothing happened. If I remove the

group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar

All works fine.

I change the order of in/out but, it doesn't work either. Could you solved?

Thanks in advance!

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Shadcn's new Sidebar covering (overlapping) any header or navbar #5636

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Shadcn's new Sidebar covering (overlapping) any header or navbar #5636

surafel-99 Oct 30, 2024

Sidebar overlapping with header

Also how can I make the sidebar to scroll with the main content instead of fixed and sticky? Please help!

Replies: 2 comments

hydrokat Nov 11, 2024

GabrielEValenzuela Nov 24, 2024

surafel-99
Oct 30, 2024

hydrokat
Nov 11, 2024

GabrielEValenzuela
Nov 24, 2024