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>

1 reply

ViniciusPilati2005 Nov 28, 2024

I made this attempt, I added the provider to the root of my application, it worked the same in my opinion

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

ViniciusPilati2005 · 2024-11-28T20:13:41Z

ViniciusPilati2005
Nov 28, 2024

I still have the same problem, the sidebar, when opened, covers the header of my application, even though it is a parent element of the sidebar, has anyone found a solution for this?

1 reply

kdv1995 Jan 9, 2025

Hi, it seems you need this approach to use: #5629

But please, remember about one stuffs in the guy's code; Don't forget to add "overflow-hidden" to the body. Otherwise, would waste your time to understand why it creates scroll on whole body; cheers

GabrielEValenzuela · 2024-11-28T20:19:46Z

GabrielEValenzuela
Nov 28, 2024

Hi @ViniciusPilati2005 !

Maybe this helps you

page.tsx

'use client'

import React from 'react'
import { Provider } from 'react-redux'
import { store } from '@/lib/store'
import { SidebarProvider } from '@/components/ui/sidebar'
import AppContent from '@/components/AppContent'

const App: React.FC = () => {
  return (
    <Provider store={store}>
      <SidebarProvider>
        <AppContent />
      </SidebarProvider>
    </Provider>
  )
}

export default App

AppContent.tsx

return (
    <>
      <SidebarInset className="flex-grow relative">
        <Toolbar />
        <Canvas />
      </SidebarInset>
      {isSidebarVisible && <ElementSidebar element={element} />}
      <Toast />
    </>
  )

1 reply

ViniciusPilati2005 Jan 13, 2025

Não testei isso, mas como minha barra estava sobrepondo o cabeçalho, funcionou, para mim, definir um tamanho fixo no header e aplicar margem na sidebar:

<Sidebar className="overflow-hidden mt-[85px] h-auto">

minhvu7896 · 2024-12-08T13:37:47Z

minhvu7896
Dec 8, 2024

Same issues, It covering <Header /> and <Footer /> components, anyone fixed it?

0 replies

lassounski · 2025-01-08T15:19:57Z

lassounski
Jan 8, 2025

I was having the same issue over here.

The behavior is a feature since the side bar is fixed while you scroll.

If you're are okay with the sidebar rolling with the rest of the page you can try this:

Find the keyword fixed in src/components/ui/sidebar.tsx and replace it for absolute.

1 reply

kdv1995 Jan 9, 2025

#5629

Joshua10052000 · 2025-02-05T01:00:05Z

Joshua10052000
Feb 5, 2025

I also encountered the same problem, I just styled the <SidebarHeader /> how I will style the header and the outcome is actually great.

Here's how I did it.

import {
  Sidebar,
  SidebarContent,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarRail,
} from "@/components/ui/sidebar";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { HomeIcon, MountainIcon, SearchIcon } from "lucide-react";
import { AppQueryProvider } from "@/components/globals/app-query-provider";
import { AppThemeProvider } from "@/components/globals/app-theme-provider";
import * as React from "react";
import "@/styles/globals.css";

interface RootLayoutProps {
  children: React.ReactNode;
}

const RootLayout: React.FC<RootLayoutProps> = ({ children }) => {
  return (
    <html lang="en" suppressHydrationWarning>
      <head />
      <body className="bg-background font-sans antialiased">
        <AppThemeProvider>
          <AppQueryProvider>
            <SidebarProvider>
              <Sidebar collapsible="icon">
                <SidebarHeader className="fixed inset-x-0 top-0 flex h-20 flex-row items-center justify-between border-b bg-background px-4 md:px-8">
                  <section>
                    <MountainIcon />
                  </section>
                  <section className="relative max-w-md flex-1">
                    <Input className="pr-9" placeholder="Search..." />
                    <Button
                      className="absolute right-0 top-0"
                      size="icon"
                      variant="ghost"
                    >
                      <SearchIcon />
                    </Button>
                  </section>
                  <section>
                    <Button>Sign In</Button>
                  </section>
                </SidebarHeader>
                <SidebarContent className="pt-20">
                  <SidebarMenu>
                    {[{ href: "/", label: "Home" }].map((link) => {
                      return (
                        <SidebarMenuItem key={link.href}>
                          <SidebarMenuButton>
                            <HomeIcon />
                            <span>{link.label}</span>
                          </SidebarMenuButton>
                        </SidebarMenuItem>
                      );
                    })}
                  </SidebarMenu>
                </SidebarContent>
                <SidebarRail />
              </Sidebar>
              <main className="min-h-screen pt-20">{children}</main>
            </SidebarProvider>
          </AppQueryProvider>
        </AppThemeProvider>
      </body>
    </html>
  );
};

export default RootLayout;

0 replies

kdv1995 · 2025-02-05T08:33:07Z

kdv1995
Feb 5, 2025

If needed help, i could help u

…

On Wed, Feb 5, 2025 at 3:00 AM Joshua10052000 ***@***.***> wrote: I also encountered the same problem, I just styled the <SidebarHeader /> how I will style the header and the outcome is actually great. Untitled.png (view on web) <https://github.com/user-attachments/assets/97ddd38d-306c-40a3-b647-c101765f89d7> Here's how I did it. import { Sidebar, SidebarContent, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarRail, } from "@/components/ui/sidebar"; import { Input } from "@/components/ui/input"; import { Button } from "@/components/ui/button"; import { HomeIcon, MountainIcon, SearchIcon } from "lucide-react"; import { AppQueryProvider } from "@/components/globals/app-query-provider"; import { AppThemeProvider } from "@/components/globals/app-theme-provider"; import * as React from "react"; import "@/styles/globals.css"; interface RootLayoutProps { children: React.ReactNode; } const RootLayout: React.FC<RootLayoutProps> = ({ children }) => { return ( <html lang="en" suppressHydrationWarning> <head /> <body className="bg-background font-sans antialiased"> <AppThemeProvider> <AppQueryProvider> <SidebarProvider> <Sidebar collapsible="icon"> <SidebarHeader className="fixed inset-x-0 top-0 flex h-20 flex-row items-center justify-between border-b bg-background px-4 md:px-8"> <section> <MountainIcon /> </section> <section className="relative max-w-md flex-1"> <Input className="pr-9" placeholder="Search..." /> <Button className="absolute right-0 top-0" size="icon" variant="ghost" > <SearchIcon /> </Button> </section> <section> <Button>Sign In</Button> </section> </SidebarHeader> <SidebarContent className="pt-20"> <SidebarMenu> {[{ href: "/", label: "Home" }].map((link) => { return ( <SidebarMenuItem key={link.href}> <SidebarMenuButton> <HomeIcon /> <span>{link.label}</span> </SidebarMenuButton> </SidebarMenuItem> ); })} </SidebarMenu> </SidebarContent> <SidebarRail /> </Sidebar> <main className="min-h-screen pt-20">{children}</main> </SidebarProvider> </AppQueryProvider> </AppThemeProvider> </body> </html> ); }; export default RootLayout; — Reply to this email directly, view it on GitHub <#5636 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AQH5RV5HQXA5A4B7ZRA3EOD2OFPCVAVCNFSM6AAAAABQ3KHJF2VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTEMBWGEZTEMI> . You are receiving this because you commented.Message ID: ***@***.***>

0 replies

piyush97 · 2025-03-21T15:02:42Z

piyush97
Mar 21, 2025

Any update/fix for this?

0 replies

ezzabuzaid · 2025-04-02T15:03:37Z

ezzabuzaid
Apr 2, 2025

This fixed it for me.

replace all instances of w-[--sidebar-width] with w-[var(--sidebar-width)]

3 replies

dylanjcastillo Sep 2, 2025

You're the 🐐. Thank you!

nolios Sep 3, 2025

The only drawback with this approach is that the sidebar toggle doesn’t close the sidebar on larger displays.

To work around that, I hide the toggle with md:hidden. On desktop, users generally don’t need to collapse the sidebar, so this feels like an acceptable trade-off.

Here’s the change I made in sidebar.tsx:

This is essentially the reverse of Shadcn’s hidden md:block in sidebar.tsx:

Tantumonium Sep 12, 2025

Ugh, the HOURS I've spent trying to resolve this... why couldn't I have found this solution sooner?!

tiagosilvam · 2025-05-12T23:32:58Z

tiagosilvam
May 12, 2025

a solution here:

MySidebar.tsx

export const MySidebar = ({ ...props }: ComponentProps<typeof Sidebar>) => {
  return (
    <Sidebar {...props}>
        {/* Your sidebar components here */}
    </Sidebar>
  );
};

layout.tsx

...
<SidebarProvider>
  <div className="flex flex-col w-full">
    <MyHeader className="min-h-16" />
    <div className="flex">
      <MySidebar className="relative max-h-[calc(100dvh-64px)]" />
      <SidebarInset>
        {children}
      </SidebarInset>
    </div>
  </div>
<SidebarProvider>
...

0 replies

Uh oh!

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

Uh oh!

Uh oh!

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: 11 comments · 7 replies

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

page.tsx

AppContent.tsx

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Replies: 11 comments 7 replies