Samuel workflow: Navbar Component Created (#9)

* navbar component created

* navbar test written

Author: Samuel Adebayo

README.md

@@ -16,7 +16,6 @@
 
 ## COntribution
 
-
 ## Acknowlegdement
 
 ## LICENSE

src/App.jsx

@@ -1,9 +1,12 @@
 import React from 'react';
 import './App.scss';
+import { Button } from 'reactstrap';
+import NavBarComponent from './components/navbar/navbar.jsx';
 
 function App() {
   return (
     <div className="app">
+      <NavBarComponent />
       <header className="app">
       <p>What he Do??</p>
       </header>
@@ -14,6 +17,8 @@ function App() {
           rel="noopener noreferrer">
           Learn React
         </a>
+
+        <Button color="danger">Danger!</Button>
     </div>
   );
 }

src/App.scss

@@ -1,16 +1,15 @@
 @import url('https://fonts.googleapis.com/css?family=Montserrat');
 @import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
-
 @import './variables';
 
 .app {
-	background-color: $background;
-	color: $primary-color;
-	min-width: 100vw;
-	min-height: 100vh;
-	padding: 4rem 2rem;
+  background-color: $background-color;
+  color: $primary-text-color;
 }
 
 * {
-	font-family: Montserrat;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: Montserrat, sans-serif;
 }

src/_variables.scss

@@ -1,6 +1,6 @@
-$background: #c4c4c4;
+$background-color: #fff;
+$primary-text-color: #000;
+$secondary-text-color: #fff;
 $primary-color: #ff4133;
-$primary-text-color: #121317;
 $secondary-color: #95969f;
-$navbar-height: 70px;
-$navbar-height-mobile: 90px;
+

src/components/navbar/navbar.jsx

@@ -0,0 +1,50 @@
+import React, { Fragment } from 'react';
+import './navbar.scss';
+
+class NavBarComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {isNavOpen: false};
+    this.handleNav = this.handleNav.bind(this);
+  }
+
+  handleNav() {
+    this.setState(state => ({
+      isNavOpen: !state.isNavOpen
+    }));
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  render() {
+    const MenuActive = this.state.isNavOpen? '': 'is-active';
+    const MenuOpen = this.state.isNavOpen? '': 'mobile-nav';
+    return (
+      <Fragment>
+        <div className="page-wrapper">
+        <div className="nav-wrapper">
+          <div className="grad-bar"></div>
+          <nav className="navbar">
+            <img src="https://upload.wikimedia.org/wikipedia/en/thumb/c/c8/Bluestar_%28bus_company%29_logo.svg/1280px-Bluestar_%28bus_company%29_logo.svg.png" alt="Company Logo"/>
+            <div className={`menu-toggle ${MenuActive}`} id="mobile-menu" onClick={this.handleNav}>  {/** add class is-active */}
+              <span className="bar"></span>
+              <span className="bar"></span>
+              <span className="bar"></span>
+            </div>
+            <ul className={`nav no-search ${MenuOpen}`}>  {/** add class mobile-nav */}
+              <li className="nav-item"><a href="https://reactjs.org">Home</a></li>
+              <li className="nav-item"><a href="https://reactjs.org">About</a></li>
+              <li className="nav-item"><a href="https://reactjs.org">Work</a></li>
+              <li className="nav-item"><a href="https://reactjs.org">Careers</a></li>
+              <li className="nav-item"><a href="https://reactjs.org">Contact Us</a></li>
+              {/* <i className="fas fa-search" id="search-icon"></i>
+              <input className="search-input" type="text" placeholder="Search.."> */}
+            </ul>
+          </nav>
+        </div>
+      </div>
+      </Fragment>
+    )
+  }
+}
+
+export default NavBarComponent;