{"size": 945, "ext": "js", "max_stars_repo_path": "src/components/layout/page.js", "max_stars_repo_name": "ryanfiller/portfolio-gatsby", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/layout/page.js", "max_issues_repo_name": "ryanfiller/portfolio-gatsby", "max_issues_repo_issues_event_min_datetime": "2018-02-05T18:23:12.000Z", "max_issues_repo_issues_event_max_datetime": "2019-01-07T01:34:19.000Z", "max_forks_repo_path": "src/components/layout/page.js", "max_forks_repo_name": "ryanfiller/portfolio-gatsby", "max_forks_repo_forks_event_min_datetime": "2018-02-05T10:42:05.000Z", "max_forks_repo_forks_event_max_datetime": "2018-02-05T10:42:05.000Z"}
{"max_stars_count": null, "max_issues_count": 2, "max_forks_count": 1, "avg_line_length": 21.976744186, "max_line_length": 88, "alphanum_fraction": 0.6042328042}
import React, { useContext, useLayoutEffect, useRef } from 'react'

import { NavContext } from './layout'

// todo
// import SkipToContent from './skip-to-content';
import OffCanvas from './off-canvas';
import Overlay from './overlay';
import Header from './header'

const Page = (props) => {
  
  const nav = useContext(NavContext)

  const clientSideRef = useRef(null)

  // layout effect wil run before first paint
  useLayoutEffect(() => {
    clientSideRef.current.classList.add("client-side-js")
  }, []);


  return (
    <div
      ref={clientSideRef}
      className={`site ${nav.offCanvasOpen === true ? 'open' : ''} ${props.className}`} 
      id="site"
      tabIndex="0"
    >
      {/* <SkipToContent /> */}

      {nav.offCanvasOpen ? <Overlay /> : null}

      <div id="content">
        {nav.offCanvasOpen ? <OffCanvas /> : null}
        <Header />
        {props.pageContent}
      </div>
    </div>
  )
}

export default Page;