Multiple Layer Page with React Router Outlets

React Router multiple layer with outlet

import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock'
import { isNil, isNotNil } from 'ramda'
import React, { useEffect, useRef } from 'react'
import { useOutlet } from 'react-router-dom'
import renderIfElse from '../../lib/renderIfElse'
import Overlay from '../../portals/Overlay'

const MyMultiLevelPageComponent = () => {
  const outletWrapperRef = useRef(null)
  const outlet = useOutlet()

useEffect(() => {
    const element = outletWrapperRef.current
    if (isNil(element)) return
    if (outlet) {
      disableBodyScroll(element)
    } else {
      enableBodyScroll(element)
    }
    return () => enableBodyScroll(element)
  }, [outlet])
  
  return (
    <>
      {renderIfElse(
        outlet,
        <div ref={outletWrapperRef}>
          <Overlay>
            <div
              style={{
                minHeight: '100vh',
                minWidth: '100vw',
                display: 'flex',
                flexDirection: 'column',
              }}
            >
              {outlet}
            </div>
          </Overlay>
        </div>,
        null
      )}
      <div
        aria-hidden={isNotNil(outlet)}
        style={isNotNil(outlet) ? { visibility: 'hidden' } : {}}
      >
        <RestOfPage />
      </div>
    </>
  )
}

export { MyMultiLevelPageComponent }