Add Navigation component

Author: Sean Prashad

web/src/components/App.js

@@ -1,20 +1,13 @@
 import React from 'react';
-import { Container, Row, Col } from 'reactstrap';
 
-import './App.css';
+import './styles.scss';
+
+import Navigation from './Navigation';
 
 function App() {
   return (
     <div className="App">
-      <Container fluid>
-        <Col>
-          <Row>
-            <header>
-              <p>Coming soon to a theatre near you!</p>
-            </header>
-          </Row>
-        </Col>
-      </Container>
+      <Navigation />
     </div>
   );
 }

web/src/components/Navigation/index.js

@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import {
+  Collapse,
+  Container,
+  Nav,
+  Navbar,
+  NavbarBrand,
+  NavLink,
+  NavbarToggler,
+  NavItem,
+} from 'reactstrap';
+
+import './styles.scss';
+
+const Navigation = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggle = () => setIsOpen(!isOpen);
+
+  return (
+    <Navbar color="light" light expand="md" fixed="top">
+      <Container>
+        <NavbarBrand>Leetcode Patterns</NavbarBrand>
+        <NavbarToggler onClick={toggle} />
+        <Collapse isOpen={isOpen} navbar>
+          <Nav className="ml-auto" navbar>
+            <NavItem>Question List</NavItem>
+            <NavItem>
+              <NavLink
+                target="_blank"
+                href="https://github.com/SeanPrashad/leetcode-patterns"
+              >
+                GitHub
+              </NavLink>
+            </NavItem>
+          </Nav>
+        </Collapse>
+      </Container>
+    </Navbar>
+  );
+};
+
+export default Navigation;

web/src/components/Navigation/styles.scss

@@ -0,0 +1,34 @@
+.navbar-brand {
+  font-weight: 600;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+
+.navbar-brand:hover {
+  color: #ffc952 !important;
+}
+
+.navbar-nav {
+  .nav-item {
+    letter-spacing: 1px;
+    margin-left: 20px;
+    text-align: center;
+    text-transform: uppercase;
+    cursor: pointer;
+  }
+
+  .nav-item:hover {
+    color: #ffc952 !important;
+  }
+
+  a {
+    color: #212529 !important;
+    display: inline;
+    font-size: 1rem;
+  }
+
+  a:hover {
+    color: #ffc952 !important;
+  }
+}

web/src/index.js

@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import App from './components/App';
-
 import 'bootstrap/dist/css/bootstrap.min.css';
 
 ReactDOM.render(<App />, document.getElementById('root'));