Having an issue with the height of a sidebar component in Next.js using React Pro Sidebar. It seems to be a JavaScript, HTML, and CSS related problem. I've tried several suggested solutions from Stack Overflow, but none of them seem to work. Surprisingly, it's not addressed within the React Pro Sidebar itself.
Whenever I navigate to a page with greater height, I encounter this problem:
https://i.stack.imgur.com/olBLqt.png
The reason for this is my inability to adjust the sidebar's height to match that of the entire document. Determining the full document height is another challenge as I haven't found a reliable way to track it through events like resize. Apparently, the total document height can be tracked using document.body.scrollHeight.
I attempted to utilize a useEffect hook for document.body.scrollHeight, but that didn't provide a complete solution (In Next.js, you may need to create a component with no SSR, similar to this):
const [viewHeight, setViewHeight] = useState<string | number>("100vh")
useEffect(() => {
setViewHeight(document.body.scrollHeight)
}, [document.body.scrollHeight])
...
<ProSidebar style={{ height: viewHeight }}>
...
I also experimented with a ResizeObserver but faced no success:
useEffect(() => {
const observer = new ResizeObserver(() => {
setViewHeight(document.body.scrollHeight)
})
observer.observe(document.body)
}, [])
Additionally, regarding React Pro Sidebar, I attempted a solution shared in an issue raised by one of its contributors:
<Sidebar
defaultCollapsed={isCollapsed}
rootStyles={{
[`.${sidebarClasses.container}`]: {
backgroundColor: "#ffffff",
height: "100vh !important",
},
[`.${sidebarClasses.root}`]: {},
}}
>
Does anyone have a specific or even better, a general solution to adjusting the sidebar height in JavaScript (or React)?