A two-panel layout that only displays one panel at a time.

TwoPanelLayout.tsx

import React from 'react'

type TwoPanelShiftLayoutProps = {
  panelLeft: React.ReactNode
  panelRight: React.ReactNode
  isShifted?: boolean
  className?: string
  style?: React.CSSProperties
}

/** A two-panel layout that only displays one panel at a time. */
function TwoPanelShiftLayout(props: TwoPanelShiftLayoutProps) {
  return (
    <div
      style={{ maxWidth: '100vw', overflowX: 'hidden', ...props.style }}
      className={props.className ?? ''}
    >
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(2, 1fr)',
          height: '100dvh',
          width: '200vw',
          transition: 'transform 1s cubic-bezier(0.215, 0.61, 0.355, 1)',
          transform: props.isShifted ? 'translateX(-50%)' : 'none',
        }}
      >
        {/* We use `overflow: 'auto'` so that each panel scrolls independently,
            rather than scrolling down on one panel causing the other panel to
            scroll down as well. */}
        <div style={{ overflow: 'auto' }}>{props.panelLeft}</div>
        <div style={{ overflow: 'auto' }}>{props.panelRight}</div>
      </div>
    </div>
  )
}

export default TwoPanelShiftLayout