A three-panel layout that only displays two panels at once.

TriPanelShiftLayout.tsx

import React from 'react'

type TriPanelShiftLayoutProps = {
  panelStart: React.ReactNode
  panelCenter: React.ReactNode
  panelEnd: React.ReactNode
  isShifted?: boolean
  className?: string
  style?: React.CSSProperties
}

/** A three-panel layout that only displays two panels at once. */
function TriPanelShiftLayout(props: TriPanelShiftLayoutProps) {
  return (
    <div
      style={{ maxWidth: '100vw', overflowX: 'hidden', ...props.style }}
      className={props.className ?? ''}
    >
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 50vw)',
          height: '100vh',
          width: '150%',
          transition: 'transform 1s cubic-bezier(0.215, 0.61, 0.355, 1)',
          transform: props.isShifted ? 'translateX(-50vw)' : 'none',
        }}
      >
        <div>{props.panelStart}</div>
        <div>{props.panelCenter}</div>
        <div>{props.panelEnd}</div>
      </div>
    </div>
  )
}

export default TriPanelShiftLayout