<commit_before>import React, { Component } from 'react'
import { Row, Col } from 'reactstrap'
import Link from 'gatsby-link'
import MediaQuery from 'react-responsive'

import resume from '../styles/Assets/Paul Simon Ongpin-Resume.pdf'

export default class Header extends Component {
  constructor(props) {
    super(props)

    this.toggle = this.toggle.bind(this)
    this.toggleClose = this.toggleClose.bind(this)
    this.state = {
      isOpen: false
    }
  }
  toggle() {
    this.setState({
      isOpen: !this.state.isOpen
    })
  }

  toggleClose() {
    this.setState({
      isOpen: false
    })
  }

  render() {
    return(
      <header className='header'>
        <div className='container-fluid'>
          <Row className='align-items-center'>
            <Col className='logo-col text-left' xs="8" md="6" lg="3">
              <Link className='logo-link' exact to='/' activeClassName='active'>
                <span className='logo'>P<span>.</span>S<span>.</span> Ongpin</span>
              </Link>
            </Col>

            <MediaQuery minWidth={992}>
              <Col className='mid-menu-col text-center d-xs-none' lg='6'>
                <PrimaryNav />
              </Col>
            </MediaQuery>

            <Col className='right-menu-col text-right' xs="4"md="6" lg="3">
              <nav>
                <MediaQuery minWidth={768}>
                  <a target="_blank" href={resume} className='btn btn-rounded'>View Resume</a>
                </MediaQuery>

                <MediaQuery maxWidth={991}>
                  <button className="btn mobile-menu-toggle" onClick={this.toggle}><span className="fa fa-bars"></span></button>  
                </MediaQuery>
              </nav>
            </Col>
          </Row>
        </div>

        <MediaQuery maxWidth={991}>
          <PrimaryNav isOpen={this.state.isOpen} toggleClose={this.toggleClose} />
        </MediaQuery>
      </header>
    )
  }
}

const PrimaryNav = ({ isOpen, toggleClose }) => (
  <nav className={'primary-nav ' + (isOpen ? 'open' : '' )}>
    <ul>
      <li>
        <Link exact to='/' activeClassName='active'>Home</Link>
      </li>
      <li>
        <Link to='/404' activeClassName='active'>About</Link>
      </li>
      <li>
        <Link to='/404' activeClassName='active'>Portfolio</Link>
      </li>
      <li>
        <Link to='/404' activeClassName='active'>Contact</Link>
      </li>
    </ul>

    <MediaQuery maxWidth={767}>
      <div className="text-center">
        <div style={{marginTop: '2rem'}}>
          <a target="_blank" href={resume} className='btn btn-rounded'>View Resume</a>
        </div>
        <div  style={{marginTop: '1rem'}}>
          <button className='btn btn-rounded' style={{backgroundColor: '#e5007e'}} onClick={toggleClose}><span className="fa fa-close"></span>  Close</button>
        </div>
      </div>
    </MediaQuery>
    
  </nav>
)<commit_msg>add Tablet Menu Fixes<commit_after>import React, { Component } from 'react'
import { Row, Col } from 'reactstrap'
import Link from 'gatsby-link'
import MediaQuery from 'react-responsive'

import resume from '../styles/Assets/<NAME>-Resume.pdf'

export default class Header extends Component {
  constructor(props) {
    super(props)

    this.toggle = this.toggle.bind(this)
    this.toggleClose = this.toggleClose.bind(this)
    this.state = {
      isOpen: false
    }
  }
  toggle() {
    this.setState({
      isOpen: !this.state.isOpen
    })
  }

  toggleClose() {
    this.setState({
      isOpen: false
    })
  }

  render() {
    return(
      <header className='header'>
        <div className='container-fluid'>
          <Row className='align-items-center'>
            <Col className='logo-col text-left' xs="8" md="6" lg="3">
              <Link className='logo-link' exact to='/' activeClassName='active'>
                <span className='logo'>P<span>.</span>S<span>.</span> Ongpin</span>
              </Link>
            </Col>

            <MediaQuery minWidth={992}>
              <Col className='mid-menu-col text-center d-xs-none' lg='6'>
                <PrimaryNav />
              </Col>
            </MediaQuery>

            <Col className='right-menu-col text-right' xs="4"md="6" lg="3">
              <nav>
                <MediaQuery minWidth={768}>
                  <a target="_blank" href={resume} className='btn btn-rounded'>View Resume</a>
                </MediaQuery>

                <MediaQuery maxWidth={991}>
                  <button className="btn mobile-menu-toggle" onClick={this.toggle}><span className="fa fa-bars"></span></button>  
                </MediaQuery>
              </nav>
            </Col>
          </Row>
        </div>

        <MediaQuery maxWidth={991}>
          <PrimaryNav isOpen={this.state.isOpen} toggleClose={this.toggleClose} />
        </MediaQuery>
      </header>
    )
  }
}

const PrimaryNav = ({ isOpen, toggleClose }) => (
  <nav className={'primary-nav ' + (isOpen ? 'open' : '' )}>
    <ul>
      <li>
        <Link exact to='/' activeClassName='active'>Home</Link>
      </li>
      <li>
        <Link to='/404' activeClassName='active'>About</Link>
      </li>
      <li>
        <Link to='/404' activeClassName='active'>Portfolio</Link>
      </li>
      <li>
        <Link to='/404' activeClassName='active'>Contact</Link>
      </li>
    </ul>

    <MediaQuery maxWidth={991} minWidth={768}>
      <div className="text-center">
        <div  style={{marginTop: '1rem'}}>
          <button className='btn btn-rounded' style={{backgroundColor: '#e5007e'}} onClick={toggleClose}><span className="fa fa-close"></span>  Close</button>
        </div>
      </div>
    </MediaQuery>
    
    <MediaQuery maxWidth={767}>
      <div className="text-center">
        <div style={{marginTop: '2rem'}}>
          <a target="_blank" href={resume} className='btn btn-rounded'>View Resume</a>
        </div>
        <div  style={{marginTop: '1rem'}}>
          <button className='btn btn-rounded' style={{backgroundColor: '#e5007e'}} onClick={toggleClose}><span className="fa fa-close"></span>  Close</button>
        </div>
      </div>
    </MediaQuery>
  </nav>
)
{'fraction_non_alphanumeric': 0.16693758127438232, 'fraction_numerical': 0.013816644993498049, 'mean_word_length': 2.1847826086956523, 'pattern_counts': {'":': 0, '<': 158, '<?xml version=': 0, '>': 160, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1172381', 'n_tokens_mistral': 1946, 'n_tokens_neox': 1872, 'n_words': 375}