{"size": 1931, "ext": "js", "max_stars_repo_path": "src/components/common/header/component.js", "max_stars_repo_name": "19101019/ETark.github.io", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/common/header/component.js", "max_issues_repo_name": "19101019/ETark.github.io", "max_issues_repo_issues_event_min_datetime": "2021-08-04T10:57:37.000Z", "max_issues_repo_issues_event_max_datetime": "2021-08-04T10:57:37.000Z", "max_forks_repo_path": "src/components/common/header/component.js", "max_forks_repo_name": "19101019/ETark.github.io", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 1, "max_forks_count": null, "avg_line_length": 32.7288135593, "max_line_length": 199, "alphanum_fraction": 0.5245986535}
import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";

const HeaderComponent = (props) => {
  const [offset, setOffset] = useState(0);

  useEffect(() => {
    window.addEventListener("scroll", getOffsetWindow)
  }, [])

  function getOffsetWindow() {
    setOffset(window.pageYOffset)
  }

  return (
    <nav className='navbar navbar-expand-lg '>
      <div className="container py-2 px-4">
        <Link to="/" className="navbar-brand">
        	ETark
        </Link>
        <button className="navbar-toggler custom-toggler btn" data-toggle="collapse" data-target="#CollapseNavbar" aria-controls="CollapseNavbar" aria-expanded="false" aria-label="Toggle navigation">
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse" id="CollapseNavbar">
          <ul className={`navbar-nav ml-auto text-center ${offset > 200 ? "move-right-with-join" : "move-right-without-join"}`}>
            <li className='nav-item px-sm-2' >
              <Link to='/' className="nav-link" >
               How to use
              </Link>
            </li>
            <li className='nav-item px-sm-2'>
              <Link to='/' className="nav-link" >
                About Us
              </Link>
            </li>
            <li className='nav-item px-sm-2' >
              <Link to='/' className="nav-link">
                Contact Us
              </Link>
            </li>
            <li className='nav-item px-sm-2' >
              <Link to='/' className="nav-link">
               Login
              </Link>
            </li>
            <li className='nav-item px-sm-3'>
              <a href="#" target="_blank" rel="noopener noreferrer" className="btn btn-violet">
                Get Started
              </a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  );
};

export default HeaderComponent;
