Merge pull request #12 from andela/ft-create-navbar-165180332

#165180332 Create Navbar component

package.json

@@ -8,13 +8,14 @@
     "enzyme-adapter-react-16": "^1.9.1",
     "enzyme-to-json": "^3.3.5",
     "react": "^16.8.6",
+    "react-bootstrap": "^1.0.0-beta.6",
     "react-dom": "^16.8.6",
-    "watch": "^1.0.2",
     "react-redux": "^6.0.1",
-    "react-scripts": "2.1.8",
     "react-router-dom": "^5.0.0",
+    "react-scripts": "2.1.8",
     "redux": "^4.0.1",
-    "redux-thunk": "^2.3.0"
+    "redux-thunk": "^2.3.0",
+    "watch": "^1.0.2"
   },
   "jest": {
     "snapshotSerializers": [

src/components/Home/Home.js

@@ -1,9 +1,12 @@
 import React from 'react';
+import NavbarInstance from '../Navbar/Navbar';
 import '../../App.css';
+import '../../css/bootstrap.min.css';
 
 const App = () => (
   <div className="App">
     <header className="App-header">
+      <NavbarInstance />
       <p>WELCOME TO AUTHORS HAVEN</p>
     </header>
   </div>

src/components/Navbar/Navbar.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import {
+  Button, Container, Form, FormControl, Image, Nav, Navbar, Row,
+} from 'react-bootstrap';
+
+import authors from '../../img/authors.png';
+
+const NavbarInstance = () => (
+  <Navbar bg="light" expand="lg" className="navbar navbar-expand-lg navbar-dark bg-dark" fixed="top">
+    <Image src={authors} alt="logo" width="90" responsive="true" />
+    <Navbar.Toggle aria-controls="basic-navbar-nav" />
+    <Navbar.Collapse id="basic-navbar-nav">
+      <Container>
+        <Row>
+          <Nav className="mr-auto">
+            <Nav.Link href="#home">Home</Nav.Link>
+            <Nav.Link href="#top">Newest</Nav.Link>
+            <Nav.Link href="#top">Technology</Nav.Link>
+            <Nav.Link href="#top">Local</Nav.Link>
+          </Nav>
+          <Form inline>
+            <FormControl type="text" placeholder="Search" className="mr-sm-2" />
+            <Button variant="outline-success">Search</Button>
+          </Form>
+        </Row>
+      </Container>
+
+    </Navbar.Collapse>
+  </Navbar>
+);
+
+export default NavbarInstance;

src/components/Navbar/__snapshots__/navbar.test.js.snap

@@ -0,0 +1,87 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Should render Navbar 1`] = `
+<Bootstrap(undefined)
+  bg="light"
+  className="navbar navbar-expand-lg navbar-dark bg-dark"
+  expand="lg"
+  fixed="top"
+>
+  <Bootstrap(Image)
+    alt="logo"
+    responsive="true"
+    src="authors.png"
+    width="90"
+  />
+  <NavbarToggle
+    aria-controls="basic-navbar-nav"
+    as="button"
+    label="Toggle navigation"
+  />
+  <NavbarCollapse
+    id="basic-navbar-nav"
+  >
+    <Container
+      as="div"
+      fluid={false}
+    >
+      <Bootstrap(Row)>
+        <Nav
+          as="div"
+          className="mr-auto"
+          fill={false}
+          justify={false}
+        >
+          <NavLink
+            as={[Function]}
+            disabled={false}
+            href="#home"
+          >
+            Home
+          </NavLink>
+          <NavLink
+            as={[Function]}
+            disabled={false}
+            href="#top"
+          >
+            Newest
+          </NavLink>
+          <NavLink
+            as={[Function]}
+            disabled={false}
+            href="#top"
+          >
+            Technology
+          </NavLink>
+          <NavLink
+            as={[Function]}
+            disabled={false}
+            href="#top"
+          >
+            Local
+          </NavLink>
+        </Nav>
+        <Form
+          as="form"
+          inline={true}
+        >
+          <FormControl
+            as="input"
+            className="mr-sm-2"
+            placeholder="Search"
+            type="text"
+          />
+          <Button
+            active={false}
+            disabled={false}
+            type="button"
+            variant="outline-success"
+          >
+            Search
+          </Button>
+        </Form>
+      </Bootstrap(Row)>
+    </Container>
+  </NavbarCollapse>
+</Bootstrap(undefined)>
+`;

src/components/Navbar/navbar.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import NavbarInstance from './Navbar';
+
+test('Should render Navbar', () => {
+  const wrapper = shallow(<NavbarInstance />);
+  expect(wrapper).toMatchSnapshot();
+});