Update Sidebar Height to Cover the Document Height (with React Pro Sidebar)

Question

I'm using Next.js with React Pro Sidebar, but this seems to be a problem related to JS, HTML, and CSS. Anyways, I've tried a lot of "solutions" on a lot of questions here on SO, but none of them worked, and I'm surprised this isn't covered inside of React Pro Sidebar itself.

Anytime I route to a page with bigger height, I get something like this:

That's because I haven't been able to update the height of the sidebar to the height of the whole document. The height of the document is another problem, because I haven't been able to find a way of tracking it through events, e.g. resize. The full height of the document seems to be tracked by document.body.scrollHeight.

I've tried to create a useEffect for document.body.scrollHeight, but it doesn't seem to be enough (in Next.js, you might need to create a dynamic component with no SSR, like this):

const [viewHeight, setViewHeight] = useState<string | number>("100vh")

useEffect(() => {
  setViewHeight(document.body.scrollHeight)
}, [document.body.scrollHeight])

...

<ProSidebar style={{ height: viewHeight }}>

...

I've also tried to create a ResizeObserver but it didn't work either:

useEffect(() => {
  const observer = new ResizeObserver(() => {
    setViewHeight(document.body.scrollHeight)
  })
  observer.observe(document.body)
}, [])

And, specifically for React Pro Sidebar, I've also tried this solution from an issue created by one of its contributors:

<Sidebar
  defaultCollapsed={isCollapsed}
  rootStyles={{
    [`.${sidebarClasses.container}`]: {
      backgroundColor: "#ffffff",
      height: "100vh !important",
    },
    [`.${sidebarClasses.root}`]: {},
  }}
>

Does anyone know of a specific, or, better yet, general solution to updating the sidebar height in JS (or React)?

Answer 1

I still don't know how to do it updating the height as it changes. But I think one workaround would be to:

1. Apply position: "fixed" and height: "100vh" to the sidebar.
2. Create a context to hold and update the collapsing and width of the sidebar.
3. Use the context updates to update the marginLeft of the content.