{"size": 3206, "ext": "js", "max_stars_repo_path": "client/src/containers/Navbar.js", "max_stars_repo_name": "ml-heroes/movie-recom", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "client/src/containers/Navbar.js", "max_issues_repo_name": "ml-heroes/movie-recom", "max_issues_repo_issues_event_min_datetime": "2021-03-11T03:59:10.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-27T09:25:34.000Z", "max_forks_repo_path": "client/src/containers/Navbar.js", "max_forks_repo_name": "ml-heroes/movie-recom", "max_forks_repo_forks_event_min_datetime": "2020-08-05T19:56:52.000Z", "max_forks_repo_forks_event_max_datetime": "2020-09-20T03:08:13.000Z"}
{"max_stars_count": null, "max_issues_count": 2, "max_forks_count": 3, "avg_line_length": 27.6379310345, "max_line_length": 88, "alphanum_fraction": 0.6191515908}
import React, { useState } from "react";
import axios from 'axios';
import NavigationItem from "../components/NavigationItem";
import { ReactComponent as SearchLogo } from "../static/images/search-icon.svg";
import NetflixLogo from "../static/images/Netflix_Logo_RGB.png";
import { ReactComponent as BellLogo } from "../static/images/bell-logo.svg";
import { ReactComponent as DropdownArrow } from "../static/images/drop-down-arrow.svg";
import DropdownContent from "../components/DropdownContent";

function Navigation(props){
  const [scrolling, setScrolling] = useState(false);

  const handleScroll = (event) => {
    if (window.scrollY === 0) {
      setScrolling(false);
    } else if (window.scrollY > 50) {
      setScrolling(true);
    }
  }

return(
      <nav className={"navigation " + (scrolling ? "black" : "")}>
        <ul className="navigation__container">
          <NavigationItem link="/" exact>
            <img
              className="navigation__container--logo"
              src={NetflixLogo}
              alt=""
            />
          </NavigationItem>
          <DropdownArrow className="navigation__container--downArrow-2"></DropdownArrow>
          <div className="navigation__container-link pseudo-link">Home</div>
          <div className="navigation__container-link pseudo-link">TV Shows</div>
          <div className="navigation__container-link pseudo-link">Movies</div>
          <div className="navigation__container-link pseudo-link">
            Recently Added
          </div>
          <div className="navigation__container-link pseudo-link">My List</div>

          <div className="navigation__container--left">

            <input
              onChange={props.inputChange}
              className="navigation__container--left__input"
              type="text"
              placeholder="Title" />

              <button>
                <SearchLogo onClick={props.showMovies} className="logo" />
              </button>

          </div>

          <div className="navigation__container-link pseudo-link">KIDS</div>
          <div className="navigation__container-link pseudo-link">DVD</div>
          <BellLogo className="navigation__container--bellLogo" />

          <DropdownContent />
          <DropdownArrow className="navigation__container--downArrow" />
        </ul>
      </nav>
)}






/*class navigation extends Component {

  state = {
    scrolling: false,
    title:""
  };

  componentDidMount() {
    window.addEventListener("scroll", this.handleScroll);
  }

  componentWillUnmount() {
    window.removeEventListener("scroll", this.handleScroll);
  }

  /** changes the scrolling state depending on the Y-position */
  /*handleScroll = (event) => {
    if (window.scrollY === 0) {
      this.setState({ scrolling: false });
    } else if (window.scrollY > 50) {
      this.setState({ scrolling: true });
    }
  };



  onTitleChange = (e) => {
    const titleV = e.target.value
    this.setState({title : titleV});
  };

  contentBased = (e)=>{
      console.log("searched clicked")
  };


  render() {
    const { scrolling } = this.state;
    const { showMovies } = this.props;

    return (

    );
  }
}*/

export default Navigation;
