search icon functionality

src/components/MovieRow/MovieRow.js

@@ -6,14 +6,6 @@ const movieRow = (props) => (
          <div className="movie__column-poster">
             <img src={props.movie.posterSrc} alt="" className="movie__poster" />
          </div>
-      
-      {/* <div className={"movie__column-overview " + (props.val % 2 == 0 ? 'even' : 'odd')}>
-            <h1 className="movie__column-overview-heading">{props.movie.title}</h1>
-            <p className="movie__column-overview-text">{props.movie.overview}</p>
-            <a className="movie__column-overview-btn"
-               onClick={() => { window.location.href = "https://www.themoviedb.org/movie/" + props.movie.id; }}>
-               view</a>
-         </div> */}
    </div> 
 );
 

src/components/NavigationItems/NavigationItems.js

@@ -43,12 +43,6 @@ class NavigationItems extends Component {
 
      <div className="navigation__container--left">
        <SearchLogo className="logo"/>
-       {/* <SearchMovie show={this.myF}/> */}
-       {/* <input 
-        placeholder="Title, people, genres" 
-         type="text" /> */}
-       {/* <p>hello</p>
-       <p>hello</p> */}
      </div>
    </ul>
     ); 

src/containers/Navigation/Navigation.js

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
-
-import NavigationItems from '../../components/NavigationItems/NavigationItems';
-
+import NavigationItem from '../../components/NavigationItems/NavigationItem/NavigationItem'
+import SearchLogo from '../../static/images/search-icon.svg'; 
 
 class navigation extends Component {
  state = {
@@ -32,15 +31,24 @@ class navigation extends Component {
 
     return (
       <nav className={"navigation " + (this.state.scrolling ? "black" : "")} >
-       
-        <input
-          onKeyDown={this.props.showMan}
-          // onClick={this.props.showMan}
-          // onChange={props.onSearch}
-          // onClick={props.onShow}
-          type="text"
-          placeholder="Title, genres, people" />
-        <NavigationItems />
+      
+        <ul className="navigation__container">
+          <NavigationItem link="/" exact>Netflix</NavigationItem>
+          <NavigationItem link="/">Home</NavigationItem>
+          <NavigationItem link="/">TV Shows</NavigationItem>
+          <NavigationItem link="/">Movies</NavigationItem>
+          <NavigationItem link="/">Recently Added</NavigationItem>
+          <NavigationItem link="/">My List</NavigationItem>
+
+          <div className="navigation__container--left">
+            <SearchLogo className="logo" />
+            <input
+              onKeyDown={this.props.showMan}
+              type="text"
+              placeholder="Title, genres, people" />
+          </div>
+        </ul>
+        {/* <NavigationItems /> */}
       </nav>
     )
   }

src/containers/SearchMovie/SearchMovie.js

@@ -1,75 +0,0 @@
-// import React, { Component } from 'react';
-// import axios from "axios"; 
-// // import Search from '../../components/Search/Search'; 
-// import MovieRow from '../../components/MovieRow/MovieRow'; 
-// import Layout from '../Layout/Layout';
-
-
-// class SearchMovie extends Component {
-
-//  state = {
-//       // an array that will hold all of our movies component 
-//       rows: [],
-//       myVal: false      
-//    }
-
-//    makeAipCall = (searchItem) => {
-//       const url = "https://api.themoviedb.org/3/search/movie?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&page=1&query=" + searchItem;
-//       axios.get(url)
-//          .then(res => {
-//             // extract the data from json object 
-//             const movies = res.data.results;
-//             // Holds our movieComponent. 
-//             let movieRows = [];
-//             let total = 0; 
-//             movies.forEach((movie) => {
-//                // manually build our image url and set it on the movie object 
-//                movie.posterSrc = "https://image.tmdb.org/t/p/w185" + movie.poster_path;
-//               total+= 1; 
-//                // pass in the movie object to our MovieRow component and keep it in a variable called 
-//                // movieComponent 
-//                const movieComponent = <MovieRow 
-//                                           val={total}
-//                                           key={movie.id} 
-//                                           movie={movie} 
-//                                           />
-//                // push our movieComponent to our movieRows array; 
-//                movieRows.push(movieComponent);
-//             })
-//             // update state 
-//             this.setState({ rows: movieRows });
-//          }).catch(error => {
-//             console.log(error);
-//          });
-//    }
-
-
-
-//    // get the user input and pass it to the makeAPICall function 
-//    searchHandler = (event) => {
-//       // const searchItem = event.target.value; 
-//       // this.makeAipCall(searchItem); 
-//       alert("Hello");
-//    }
-
-
-//    render() {
-
-
-
-//       return (
-//       <div>
-//                   <input
-//                         onKeyPress={this.searchHandler}
-//                         onClick={this.props.show}
-//                         type="text"
-//                         placeholder="Title, genres, people" />
-//         {/* <Search onSearch={this.searchHandler} onShow={this.onChangeHandler} showAll={this.state.myVal}/> */}
-//         {event.key}
-//       </div>
-         
-//       );
-//    }
-// }
-
-// export default SearchMovie; 

src/static/sass/base/_base.scss

@@ -69,7 +69,7 @@ html {
 	background-color: $color-background;
 	height: 150%;
 	padding-bottom: 10rem;
-	
+	padding-left: 4rem;
 	
 
 }

src/static/sass/components/_movie.scss

@@ -5,7 +5,8 @@
 
    &__column-poster {
       height: 25rem;
-      width: 18rem;
+      width: 17.5rem;
+
    }
 
     &__poster {
@@ -16,12 +17,3 @@
 div.movie:first-child {
    padding-top: 15rem;
 }
-
-.even {
-   background-color: $color-purple;
-}
-
-.odd {
-   background-color: $color-light-blue-2;
-
-}

src/static/sass/layout/_navigation.scss

@@ -54,11 +54,11 @@ input[type="text"] {
    font-size: 1.4rem;
    border: none;
    outline: none;
-   background-color: red;
+   // background-color: red;
    width: 0px;
    padding: 10px;
    padding-right: 2rem;
-   // background: none;
+   background: none;
    transition: width .5s cubic-bezier(0.000, 0.795, 0.000, 1.000);
    cursor: pointer;
 }