Add Navigation and styling

src/components/Navigation.js

@@ -1,11 +1,19 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faFilter } from '@fortawesome/free-solid-svg-icons';
+import '../styles/navigation/Navigation.css';
 
 const Navigation = () => (
   <>
-    <Link to="/">Popular</Link>
-    <Link to="/top">Top Rated</Link>
-    <Link to="/upcoming">Upcoming</Link>
+    <div className="navigation-cont d-flex justify-content-between">
+      <div className="navigation">
+        <Link to="/">Popular</Link>
+        <Link to="/top">Top Rated</Link>
+        <Link to="/upcoming">Upcoming</Link>
+      </div>
+      <button type="button"><FontAwesomeIcon icon={faFilter}>Filter</FontAwesomeIcon></button>
+    </div>
   </>
 );
 

src/styles/navigation/Navigation.scss

@@ -0,0 +1,25 @@
+@import '../globals';
+
+.navigation-cont {
+  padding: 20px 30px 10px;
+  font-size: 1.1em;
+
+  button {
+    margin: 0 10px;
+    font-size: 1.1em;
+
+    svg {
+      path {
+        color: $gray;
+      }
+    }
+  }
+}
+
+.navigation {
+  color: $yellow;
+
+  a {
+    margin-right: 20px;
+  }
+}