#20 react-netflix: nav component

react/netflix-app/src/App.js

@@ -1,7 +1,12 @@
 import "./App.css";
+import Nav from "./components/Nav";
 
 const App = () => {
-  return <div className="App"></div>;
+  return (
+    <div className="App">
+      <Nav />
+    </div>
+  );
 };
 
 export default App;

react/netflix-app/src/components/Nav.css

@@ -0,0 +1,31 @@
+.nav {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  height: 30px;
+  z-index: 1;
+  padding: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  transition-timing-function: ease-in;
+  transition: all 0.5s;
+}
+
+.nav__black {
+  background-color: #111;
+}
+
+.nav__logo {
+  position: fixed;
+  left: 40px;
+  width: 80px;
+  object-fit: contain;
+}
+
+.nav__avatar {
+  position: fixed;
+  right: 40px;
+  width: 30px;
+  object-fit: contain;
+}

react/netflix-app/src/components/Nav.js

@@ -0,0 +1,38 @@
+import React, { useEffect, useState } from "react";
+import "./Nav.css";
+
+const Nav = () => {
+  const [show, setShow] = useState(false);
+
+  useEffect(() => {
+    window.addEventListener("scroll", () => {
+      if (window.scrollY > 50) {
+        setShow(true);
+      } else {
+        setShow(false);
+      }
+    });
+
+    return () => {
+      window.removeEventListener("scroll", () => {});
+    };
+  }, []);
+
+  return (
+    <nav className={`nav ${show && "nav__black"}`}>
+      <img
+        alt="Netflix Logo"
+        src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/1597px-Netflix_2015_logo.svg.png"
+        className="nav__logo"
+        onClick={() => window.location.reload()}
+      />
+      <img
+        alt="User logged"
+        src="https://i.pinimg.com/originals/9a/07/ad/9a07ad321c82d6c20697570d970f002a.png"
+        className="nav__avatar"
+      />
+    </nav>
+  );
+};
+
+export default Nav;