I have a page in my Next.js web app, and I want to make the section highlighted in blue (wrapped in <aside> tag) sticky so that it stays in place while scrolling, with only the main section containing the chart scrolling.
The code snippet below is from the layout.tsx file:
import { dashboardConfig } from "@/config/dashboard";
import { MainNav } from "@/components/nav/main-nav";
import { DashboardNav } from "@/components/nav/dashboard-nav";
interface DashboardLayoutProps {
children?: React.ReactNode;
}
export default async function DashboardLayout({
children,
}: DashboardLayoutProps) {
return (
<div className="flex min-h-dvh flex-col relative">
<header className="container z-40 bg-background">
<MainNav />
</header>
<div className="container grid flex-1 gap-12 md:grid-cols-[200px_1fr] mt-32 mb-12 relative">
<aside className="hidden w-[200px] flex-col md:flex sticky top-0">
<DashboardNav items={dashboardConfig.sidebarNav} />
</aside>
<main className="flex w-full flex-1 flex-col overflow-hidden">
{children}
</main>
</div>
</div>
);
}
Even after applying the classes sticky and top-0, the desired sticky behavior is not working. What could be the issue?