Redesigned routing configuration; modified navbar to create buttons

according to routes

src/components/Navbar/index.js

@@ -1,10 +1,11 @@
 // @flow
-import React from "react"
+import * as React from "react"
 import { NavLink } from "react-router-dom"
 import FontAwesomeIcon from "@fortawesome/react-fontawesome"
 import faBars from "@fortawesome/fontawesome-free-solid/faBars"
 
 import "./index.css"
+import { routes } from "../../routes/routes.js"
 
 const changeMenu = 800
 
@@ -15,6 +16,8 @@ type State = {
 }
 
 class Navbar extends React.Component<Props, State> {
+  buttons: Array<NavLink<string>>
+
   constructor(props: Props) {
     super(props)
 
@@ -23,25 +26,40 @@ class Navbar extends React.Component<Props, State> {
     } else {
       this.state = { showMenu: true }
     }
+
+    this.buttons = routes.map(route => (
+      <NavLink
+        key={route.name}
+        className="navbar-menu-button"
+        activeClassName="active-button"
+        exact={route.exact}
+        to={route.path}
+        onClick={this.closeMenu}
+      >
+        {route.name}
+      </NavLink>
+    ))
   }
 
+  isMobile = () => window.innerWidth <= changeMenu
+
   closeMenu = () => {
     window.scrollTo(0, 0)
-    if (window.innerWidth <= changeMenu) {
+    if (this.isMobile()) {
       this.setState({ showMenu: false })
     }
   }
 
   toggleMenu = () => {
-    if (window.innerWidth <= changeMenu || !this.state.showMenu) {
+    if (this.isMobile() || !this.state.showMenu) {
       this.setState(prev => ({ showMenu: !prev.showMenu }))
     }
   }
 
   render() {
-    let menuButton = null
+    let menuButton: ?React.Element<string>
 
-    if (window.innerWidth <= changeMenu) {
+    if (this.isMobile()) {
       menuButton = (
         <div
           className={
@@ -60,41 +78,7 @@ class Navbar extends React.Component<Props, State> {
       <div className="navbar">
         {menuButton}
         {this.state.showMenu ? (
-          <div className="navbar-menu">
+          <div className="navbar-menu">{this.buttons}</div>
-            <NavLink
-              className="navbar-menu-button"
-              activeClassName="active-button"
-              exact
-              to="/"
-              onClick={this.closeMenu}
-            >
-              Home
-            </NavLink>
-            <NavLink
-              className="navbar-menu-button"
-              activeClassName="active-button"
-              to="/projects"
-              onClick={this.closeMenu}
-            >
-              Projects
-            </NavLink>
-            <NavLink
-              className="navbar-menu-button"
-              activeClassName="active-button"
-              to="/experience"
-              onClick={this.closeMenu}
-            >
-              Experience
-            </NavLink>
-            <NavLink
-              className="navbar-menu-button"
-              activeClassName="active-button"
-              to="/contact"
-              onClick={this.closeMenu}
-            >
-              Contact
-            </NavLink>
-          </div>
         ) : null}
       </div>
     )

src/routes/index.js

@@ -2,27 +2,36 @@
 import React from "react"
 import { Route, Switch } from "react-router-dom"
 
-import Home from "../containers/Home"
+import { routes, redirects } from "./routes.js"
-import Projects from "../containers/Projects"
-import Experience from "../containers/Experience"
-import Contact from "../containers/Contact"
 
 type Props = {}
 
 class Routes extends React.Component<Props> {
+  routes: Array<Route>
+  redirects: Array<Route>
+
+  constructor(props: Props) {
+    super(props)
+
+    this.routes = routes.map(route => (
+      <Route
+        key={route.name}
+        exact={route.exact}
+        path={route.path}
+        component={route.component}
+      />
+    ))
+
+    this.redirects = redirects.map(route => (
+      <Route key={route.path} path={route.path} render={route.func} />
+    ))
+  }
+
   render() {
     return (
       <Switch>
-        <Route exact path="/" component={Home} />
+        {this.routes}
-        <Route path="/projects" component={Projects} />
+        {this.redirects}
-        <Route path="/experience" component={Experience} />
-        <Route path="/contact" component={Contact} />
-        <Route
-          path="/linkedin"
-          render={() =>
-            (window.location = "https://linkedin.com/in/mitchelljfsimon")
-          }
-        />
       </Switch>
     )
   }

src/routes/routes.js

@@ -0,0 +1,41 @@
+// @flow
+import Home from "../containers/Home"
+import Projects from "../containers/Projects"
+import Experience from "../containers/Experience"
+import Contact from "../containers/Contact"
+
+const routes = [
+  {
+    path: "/",
+    name: "Home",
+    component: Home,
+    exact: true
+  },
+  {
+    path: "/projects",
+    name: "Projects",
+    component: Projects,
+    exact: false
+  },
+  {
+    path: "/experience",
+    name: "Experience",
+    component: Experience,
+    exact: false
+  },
+  {
+    path: "/contact",
+    name: "Contact",
+    component: Contact,
+    exact: false
+  }
+]
+
+const redirects = [
+  {
+    path: "/linkedin",
+    func: () => (window.location = "https://linkedin.com/in/mitchelljfsimon")
+  }
+]
+
+export { routes, redirects }