Merge pull request #7 from carolabadeer/navbar-design

improved navbar design and added new navbar component

src/App.js

@@ -1,27 +1,22 @@
 import React from 'react';
 import {
   Route,
-  Link,
   BrowserRouter as Router,
   Switch
 } from 'react-router-dom';
 import About from './components/routes/About';
 import TestMatrixView from './components/routes/TestMatrixView';
 import HistoryMatrixView from './components/routes/HistoryMatrixView';
-import Header from './components/common/Header';
 import Footer from './components/common/Footer';
+import Navbar from './components/common/navbar';
 import './App.scss';
 
 function App() {
   return (
     <div className='app'>
-      <Header title="Morpheus"/>
+
       <Router>
-        <nav>
-          <Link to="/about">About</Link>
-          <Link to="/visualization">Visualization</Link>
-          <Link to="/history">History</Link>
-        </nav>
+        <Navbar />
         <div className="component">
           <Switch>
             <Route exact path="/" component={About} />

src/App.scss

@@ -8,14 +8,6 @@ body {
   margin: 0;
   text-align: left;
   display: block;
-  nav {
-    background-color: #ddd;
-    color: #222;
-    padding: 0.5%;
-    a {
-      padding-right: 1rem;
-    }
-  }
 
   .component {
     height: 85%;

src/components/common/Header.scss

@@ -1,16 +1,16 @@
 body {
-    margin: 0 0 0 0;
-    padding: 0 0 0 0;
+  margin: 0 0 0 0;
+  padding: 0 0 0 0;
 }
 
 div {
-    .header {
-        background-color: #222;
-        color: #ddd;
-        h1 {
-            text-align: left;
-            margin: 0 0 0 0;
-            padding: 1% 1% 1% 1%;
-        }
+  .header {
+    background-color: #222;
+    color: #ddd;
+    h1 {
+      text-align: left;
+      margin: 0 0 0 0;
+      padding: 1% 1% 1% 1%;
     }
-}
+  }
+}

src/components/common/navbar.js

@@ -0,0 +1,27 @@
+import React from "react";
+import "./navbar.scss";
+import { Link } from "react-router-dom";
+import Header from "./Header";
+
+const Navbar = () => {
+  return (
+    <nav>
+      <Link to="/">
+        <Header title="Morpheus" />
+      </Link>
+      <ul>
+        <li>
+          <Link to="/about">About</Link>
+        </li>
+        <li>
+          <Link to="/visualization">Visualization</Link>
+        </li>
+        <li>
+          <Link to="/history">History</Link>
+        </li>
+      </ul>
+    </nav>
+  );
+};
+
+export default Navbar;

src/components/common/navbar.scss

@@ -0,0 +1,25 @@
+nav {
+  background-color: #222;
+  color: #ddd;
+  padding: 0.5%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  z-index: 1;
+  width: 100%;
+  opacity: 0.9;
+  margin-bottom: 1rem;
+  a {
+    padding-right: 1rem;
+    color: #fff;
+    margin: 0 0.25rem;
+    text-decoration: none;
+  }
+  ul {
+    display: flex;
+    list-style: none;
+  }
+  a:hover {
+    color: grey;
+  }
+}

src/components/routes/TestMatrixView.scss

@@ -1,38 +1,37 @@
 .test-visualization {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  height: 100%;
 
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
+  #visualization {
+    width: 80%;
     height: 100%;
+    min-width: 500px;
+    overflow: hidden;
+  }
 
-    #visualization {
-        width: 80%;
-        height: 100%;
-        min-width: 500px;
-        overflow: hidden;
-    }
-
-    #toolbox {
-        height: 100%;
-        width: 19%;
-        padding-left: .5%;
-        padding-right: .5%;
-        margin:0;
-        min-width: 100px;
-        text-align: left;
-        background-color: grey;
+  #toolbox {
+    height: 100%;
+    width: 19%;
+    padding-left: 0.5%;
+    padding-right: 0.5%;
+    margin: 0;
+    min-width: 100px;
+    text-align: left;
+    background-color: grey;
 
-        .accordion-block {
-            display: block;
-        }
+    .accordion-block {
+      display: block;
+    }
 
-        #control-tools {
-            text-align: center;
-            button {
-                display: inline-block;
-                margin-left: 5%;
-                margin-right: 5%;
-            }
-        }
+    #control-tools {
+      text-align: center;
+      button {
+        display: inline-block;
+        margin-left: 5%;
+        margin-right: 5%;
+      }
     }
+  }
 }