i am trying to make the sidenav sticky but its not working
<code>"use client"
import { useState } from "react";
import AnalyticsSideNav from "./_components/AnalyticsSideNav";
import { usePathname } from 'next/navigation'
import "./styles/layout.css";
const AnalyticsRootLayout = ({ children }) => {
const [open, setOpen] = useState(false);
const pathname = usePathname();
return (
<div className="flex flex-col h-auto md:flex-row flex-1 min-h-[88vh] max-h-auto noscroll">
{pathname === "/login" || pathname === "/Unauthorized" ? "" : (
<aside
className={`bg-white-100 flex pt-[8%] w-full h-auto overflow-auto noscroll ${!open ? "overflow-hidden md:w-[70px]" : "md:w-48 overflow-hidden"
} transition-width duration-500 ease-in-out sticky top-0 `}
>
<AnalyticsSideNav open={open} setOpen={setOpen} />
</aside>
)}
<main className="flex-1 h-auto overflow-y-auto noscroll pl-3 pr-3">{children}</main>
</div>
);
};
export default AnalyticsRootLayout;
</code>
<code>"use client"
import { useState } from "react";
import AnalyticsSideNav from "./_components/AnalyticsSideNav";
import { usePathname } from 'next/navigation'
import "./styles/layout.css";
const AnalyticsRootLayout = ({ children }) => {
const [open, setOpen] = useState(false);
const pathname = usePathname();
return (
<div className="flex flex-col h-auto md:flex-row flex-1 min-h-[88vh] max-h-auto noscroll">
{pathname === "/login" || pathname === "/Unauthorized" ? "" : (
<aside
className={`bg-white-100 flex pt-[8%] w-full h-auto overflow-auto noscroll ${!open ? "overflow-hidden md:w-[70px]" : "md:w-48 overflow-hidden"
} transition-width duration-500 ease-in-out sticky top-0 `}
>
<AnalyticsSideNav open={open} setOpen={setOpen} />
</aside>
)}
<main className="flex-1 h-auto overflow-y-auto noscroll pl-3 pr-3">{children}</main>
</div>
);
};
export default AnalyticsRootLayout;
</code>
"use client"
import { useState } from "react";
import AnalyticsSideNav from "./_components/AnalyticsSideNav";
import { usePathname } from 'next/navigation'
import "./styles/layout.css";
const AnalyticsRootLayout = ({ children }) => {
const [open, setOpen] = useState(false);
const pathname = usePathname();
return (
<div className="flex flex-col h-auto md:flex-row flex-1 min-h-[88vh] max-h-auto noscroll">
{pathname === "/login" || pathname === "/Unauthorized" ? "" : (
<aside
className={`bg-white-100 flex pt-[8%] w-full h-auto overflow-auto noscroll ${!open ? "overflow-hidden md:w-[70px]" : "md:w-48 overflow-hidden"
} transition-width duration-500 ease-in-out sticky top-0 `}
>
<AnalyticsSideNav open={open} setOpen={setOpen} />
</aside>
)}
<main className="flex-1 h-auto overflow-y-auto noscroll pl-3 pr-3">{children}</main>
</div>
);
};
export default AnalyticsRootLayout;
even i tried to add external css and !important still its not working ,
also i dont want to set the height of sidenav manually , it should be auto in my case
here is the dummy setup i made here
New contributor
vivek chavan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.