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

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: 8 comments 4 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

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

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

page.tsx

AppContent.tsx

Replies: 8 comments 4 replies