Moved routes to its own component and folder; changed navbar css to be

used as intended; changed exprience css; version bump

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-website",
-  "version": "0.2.18",
+  "version": "0.2.19",
   "private": true,
   "dependencies": {
     "@fortawesome/fontawesome": "^1.1.8",

src/Website.js

@@ -1,13 +1,9 @@
 // @flow
 import React from "react"
-import { Route, Switch } from "react-router-dom"
 
 import Header from "./components/Header"
 import Navbar from "./components/Navbar"
-import Home from "./containers/Home"
+import Routes from "./routes"
-import Projects from "./containers/Projects"
-import Experience from "./containers/Experience"
-import Contact from "./containers/Contact"
 
 import "./Website.css"
 
@@ -18,14 +14,9 @@ class Website extends React.Component<Props> {
     return (
       <div className="website">
         <div className="main-container">
-          <Header />
-          <Switch>
-            <Route exact path="/" component={Home} />
-            <Route path="/projects" component={Projects} />
-            <Route path="/experience" component={Experience} />
-            <Route path="/contact" component={Contact} />
-          </Switch>
           <Navbar />
+          <Header />
+          <Routes />
         </div>
       </div>
     )

src/components/Navbar/index.css

@@ -7,6 +7,12 @@
   top: 0;
 }
 
+.navbar-small {
+  bottom: 0;
+  padding-bottom: 5px;
+  top: auto;
+}
+
 .navbar-button {
   background-color: rgb(139, 191, 209);
   border-radius: 2px;
@@ -30,53 +36,48 @@
   width: 52.5%;
 }
 
-.navbar-menu div {
+.navbar-menu-button {
   border-radius: 3px;
   color: white;
   float: left;
   margin: 1% 2.5%;
   overflow: hidden;
   padding: 7px 0;
+  text-decoration: none;
   text-overflow: ellipsis;
   transition: background-color 0.2s, box-shadow 0.1s;
   width: 20%;
 }
 
-.navbar-menu div:hover {
+.navbar-menu-button:hover {
   background-color: rgb(86, 95, 118);
 }
 
-.active-button div {
+.active-button {
   background-color: rgb(130, 160, 196);
   box-shadow: 0 0 5px rgb(59, 64, 83) inset;
 }
 
-.active-button div:hover {
+.active-button:hover {
   background-color: rgb(139, 191, 209);
 }
 
 @media screen and (max-width: 500px) {
-  .navbar {
-    bottom: 0;
-    padding-bottom: 5px;
-    top: auto;
-  }
-
   .navbar-menu {
     margin: auto;
     width: 75%;
   }
-  .navbar-menu div {
+  .navbar-menu-button {
     margin: 5px 0;
     padding: 5px 0;
     width: 100%;
   }
 
-  .navbar-menu div:hover {
+  .navbar-menu-button:hover {
     background-color: inherit;
   }
 
-  .active-button div:hover {
+  .active-button:hover {
     background-color: rgb(130, 160, 196);
   }
 }

src/components/Navbar/index.js

@@ -25,20 +25,37 @@ class Navbar extends React.Component<Props> {
         }
         changeMenuOn="500px"
         largeMenuClassName="navbar"
-        smallMenuClassName="navbar"
+        smallMenuClassName="navbar navbar-small"
         menu={
           <div className="navbar-menu">
-            <NavLink activeClassName="active-button" exact to="/">
+            <NavLink
-              <div>Home</div>
+              className="navbar-menu-button"
+              activeClassName="active-button"
+              exact
+              to="/"
+            >
+              Home
             </NavLink>
-            <NavLink activeClassName="active-button" to="/projects">
+            <NavLink
-              <div>Projects</div>
+              className="navbar-menu-button"
+              activeClassName="active-button"
+              to="/projects"
+            >
+              Projects
             </NavLink>
-            <NavLink activeClassName="active-button" to="/experience">
+            <NavLink
-              <div>Experience</div>
+              className="navbar-menu-button"
+              activeClassName="active-button"
+              to="/experience"
+            >
+              Experience
             </NavLink>
-            <NavLink activeClassName="active-button" to="/contact">
+            <NavLink
-              <div>Contact</div>
+              className="navbar-menu-button"
+              activeClassName="active-button"
+              to="/contact"
+            >
+              Contact
             </NavLink>
           </div>
         }

src/containers/Experience/index.css

@@ -1,6 +1,6 @@
 .experience-container {
   display: flex;
-  flex-flow: row wrap;
+  flex-flow: column nowrap;
   margin: 2% 0;
 }
 

src/routes/index.js

@@ -0,0 +1,25 @@
+// @flow
+import React from "react"
+import { Route, Switch } from "react-router-dom"
+
+import Home from "../containers/Home"
+import Projects from "../containers/Projects"
+import Experience from "../containers/Experience"
+import Contact from "../containers/Contact"
+
+type Props = {}
+
+class Routes extends React.Component<Props> {
+  render() {
+    return (
+      <Switch>
+        <Route exact path="/" component={Home} />
+        <Route path="/projects" component={Projects} />
+        <Route path="/experience" component={Experience} />
+        <Route path="/contact" component={Contact} />
+      </Switch>
+    )
+  }
+}
+
+export default Routes