Collapsible Sidebar - Copy this React, Tailwind Component to your project

import { SidebarProvider } from "@/components/ui/sidebar"; import { cookies } from "next/headers"; import AppSidebar from "../_components/AppSidebar"; export default async function DashboardLayout({ children, }: { children: React.ReactNode; }) { const cookieStore = cookies(); const defaultOpen = (await cookieStore).get("sidebar:state")?.value === "true"; return ( <SidebarProvider defaultOpen={defaultOpen}> <div className="relative min-h-screen"> <header className="fixed top-0 left-0 right-0 z-1 h-16 border-b bg-background flex items-center px-4"> <div className="flex items-center gap-4"> <AppSidebar /> </div> </header> <main className="pt-16 md:pl-64 min-h-screen transition-[padding] duration-300 ease-in-out"> <div className="p-4 md:p-8"> {children} </div> </main> </div> </SidebarProvider> ); } I have root layout which have header and dashboard have AppSidebar currenlty sidebar is hiding behind the header can you fix this