I have created a sidebar in react router. When I place the side bar in other pages, it works fine. When I place it in the root file, it has a gap that I can’t seem to figure out. I have played around with CSS, both root and app sidebar but nothing helps. How can I fix this?
I have tinkered with the root.tsx and appsidebar.tsx but the gap still sticks, with or without the trigger, that gap is still there.
root.tsx
export function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
<script
dangerouslySetInnerHTML={{
__html: `
(function() {
try {
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const stored = localStorage.getItem('theme');
const theme = stored || (prefersDark ? 'dark' : 'light');
if (theme === 'dark') {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
} catch (_) {}
})();
`,
}}
/>
</head>
<body className="flex flex-col">
{/* Top navigation always at the top */}
<TopNav />
{/* Sidebar + content below */}
<SidebarProvider
style={
{
"--sidebar-width": "21rem",
} as React.CSSProperties
}
>
<div className="flex flex-1">
{/* Sidebar */}
<AppSidebar />
<SidebarTrigger className="sticky top-14 self-start z-50 " />
{/* Main page content */}
<main className="flex-1 overflow-y-auto">
{children}
</main>
</div>
</SidebarProvider>
<ScrollRestoration />
<Scripts />
</body>
</html>
);
}
appsidebar.tsx
export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
return (
<Sidebar {...props} className="">
<SidebarHeader>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton size="lg" asChild>
<b/>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarHeader>
<SidebarContent>
<SidebarGroup>
<SidebarMenu>
{data.navMain.map((item, index) => (
<Collapsible
key={item.title}
defaultOpen={index === 1}
className="group/collapsible"
>
<SidebarMenuItem>
<CollapsibleTrigger asChild>
<SidebarMenuButton>
{item.title}{" "}
<Plus className="ml-auto group-data-[state=open]/collapsible:hidden" />
<Minus className="ml-auto group-data-[state=closed]/collapsible:hidden" />
</SidebarMenuButton>
</CollapsibleTrigger>
{item.items?.length ? (
<CollapsibleContent>
<SidebarMenuSub>
{item.items.map((item) => (
<SidebarMenuSubItem key={item.title}>
<SidebarMenuSubButton
asChild
isActive={item.isActive}
>
<a href={item.url}>{item.title}</a>
</SidebarMenuSubButton>
</SidebarMenuSubItem>
))}
</SidebarMenuSub>
</CollapsibleContent>
) : null}
</SidebarMenuItem>
</Collapsible>
))}
</SidebarMenu>
</SidebarGroup>
</SidebarContent>
<SidebarRail />
</Sidebar>
)
}
