Merge pull request #7 from InnoD-WebTier/ar-home_page_&_navbar

Home page & navbar progress

Author: egosti

src/components/Header/index.js

@@ -1,36 +1,64 @@
 import React from 'react'
 import Link from 'gatsby-link'
 
+import Button from 'react-bootstrap/lib/Button'
 import MenuItem from 'react-bootstrap/lib/MenuItem';
 import Nav from 'react-bootstrap/lib/Nav';
 import Navbar from 'react-bootstrap/lib/Navbar';
-import NavDropdown from 'react-bootstrap/lib/NavDropdown';
 import NavItem from 'react-bootstrap/lib/NavItem';
 
+const links = [
+  {
+    name: "About Us",
+    link: "",
+  },
+  {
+    name: "About Us",
+    link: "",
+  },
+  {
+    name: "Awards",
+    link: "",
+  },
+  {
+    name: "News and Events",
+    link: "",
+  },
+  {
+    name: "Membership",
+    link: "",
+  },
+  {
+    name: "Stay Connected",
+    link: "",
+  },
+  {
+    name: "Merchandise",
+    link: "",
+  },
+]
 
 const Header = () => (
-    <div>
-      <Navbar>
+  <div>
+    <Navbar fixedTop className="dnav">
       <Navbar.Header>
-        <Navbar.Brand>
-          <Link to="/">DCEF</Link>
-        </Navbar.Brand>
+          <Navbar.Brand>
+            <Link to="/">DCEF</Link>
+          </Navbar.Brand>
+        <Navbar.Toggle />
       </Navbar.Header>
-      <Nav>
-        <NavItem eventKey={1} href="#">
-          Link
-        </NavItem>
-        <NavItem eventKey={2} href="#">
-          Link
-        </NavItem>
-        <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
-          <MenuItem eventKey={3.1}>Action</MenuItem>
-          <MenuItem eventKey={3.2}>Another action</MenuItem>
-          <MenuItem eventKey={3.3}>Something else here</MenuItem>
-          <MenuItem divider />
-          <MenuItem eventKey={3.4}>Separated link</MenuItem>
-        </NavDropdown>
-      </Nav>
+      <Navbar.Collapse>
+        <Nav pullRight>
+          {links.map(item =>
+            <NavItem href="#">
+              <div className="dnav__item">{item.name}</div>
+            </NavItem>
+          )}
+          <NavItem eventKey={7} href="#">
+            <Button className="dnav__button">Donate</Button>
+          </NavItem>
+        </Nav>
+      </Navbar.Collapse>
     </Navbar>
   </div>
 )