Made main navbar mobile friendly.

Fixes #2

package.json

@@ -6,9 +6,11 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.4.0",
     "@testing-library/user-event": "^7.2.1",
+    "bootstrap": "^4.4.1",
     "dotenv": "^8.2.0",
     "node-sass": "^4.13.1",
     "react": "^16.13.1",
+    "react-bootstrap": "^1.0.1",
     "react-dom": "^16.12.0",
     "react-hook-form": "^4.10.1",
     "react-redux": "^7.1.3",

src/components/Admin.scss

@@ -3,17 +3,18 @@
 
 .admin-wrapper{
 	display: flex;
-	width: "90%" 
+	width: 90%;
+    margin-top: 30px;
 }
 
 .admin-choice-container {
 	border: 1px solid darkgray;
 	border-radius: 4px;
-	height:180px;
 	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 	cursor: pointer;
 	flex:1 0 200px;
 	max-width:200px;
+    height: 210px;
 
 	ul {
 		list-style-type: none;

src/components/Header.js

@@ -1,31 +1,54 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
+import Navbar from 'react-bootstrap/Navbar';
+import Nav from 'react-bootstrap/Nav';
 import './Header.scss';
 
 const Header = () => {
   return (
     <div className="header-container">
-      <header className="main-header">
-        <div className="logo"><p>Testimony Database</p></div>
-        <nav className="main-navigation">
-          <ul>
-            <li>
-              <NavLink to="/victims" activeClassName="active">Victims</NavLink>
-            </li>
-            <li>
-              <NavLink to="/submit" activeClassName="active">Submit</NavLink>
-            </li>
-            <li>
-              <NavLink exact to="/" activeClassName="active">About</NavLink>
-            </li>
-            <li>
-              <NavLink exact to="/admin" activeClassName="active">Admin</NavLink>
-            </li>
-          </ul>
-        </nav>
-      </header>
+    <Navbar expand="lg" className="main-header navbar-dark">
+        <Navbar.Brand className="logo" href="#">Testimony Database</Navbar.Brand>
+        <Navbar.Toggle aria-controls="basic-navbar-nav" />
+            <Navbar.Collapse id="basic-navbar-nav">
+                <Nav className="">
+                <li>
+          <NavLink className="nav-link"  to="/victims" activeClassName="active">Victims</NavLink>
+      </li>
+      <li to="/submit" activeClassName="active">
+          <NavLink className="nav-link" to="/submit" activeClassName="active">Submit</NavLink>
+      </li>
+      <li>
+          <NavLink className="nav-link"  exact to="/" activeClassName="active">About</NavLink>
+      </li>
+      <li>
+          <NavLink className="nav-link"  exact to="/admin" activeClassName="active">Admin</NavLink>
+      </li>
+    </Nav>
+  </Navbar.Collapse>
+</Navbar>
     </div>
   );
 };
 
 export default Header;
+
+    //   <header className="main-header">
+    //     <div className="logo"><p>Testimony Database</p></div>
+    //     <nav className="main-navigation">
+    //       <ul>
+    //         <li>
+    //           <NavLink to="/victims" activeClassName="active">Victims</NavLink>
+    //         </li>
+    //         <li>
+    //           <NavLink to="/submit" activeClassName="active">Submit</NavLink>
+    //         </li>
+    //         <li>
+    //           <NavLink exact to="/" activeClassName="active">About</NavLink>
+    //         </li>
+    //         <li>
+    //           <NavLink exact to="/admin" activeClassName="active">Admin</NavLink>
+    //         </li>
+    //       </ul>
+    //     </nav>
+    //   </header>