Swapped out 3rd party responsive menu component and built out my own;

version bump

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-website",
-  "version": "0.2.20",
+  "version": "0.3.0",
   "private": true,
   "dependencies": {
     "@fortawesome/fontawesome": "^1.1.8",
@@ -8,7 +8,6 @@
     "@fortawesome/react-fontawesome": "^0.0.19",
     "react": "^16.3.2",
     "react-dom": "^16.3.2",
-    "react-responsive-navbar": "^1.0.11",
     "react-router-dom": "^4.2.2",
     "react-scripts": "1.1.4"
   },

src/Website.css

@@ -8,15 +8,16 @@
 .main-container {
   margin: auto;
   margin-top: 50px;
-  max-width: 500px;
+  min-width: 800px;
-  min-width: 50%;
+  width: 50%;
   text-align: center;
 }
 
-@media screen and (max-width: 500px) {
+@media screen and (max-width: 800px) {
   .main-container {
     margin-bottom: 50px;
     margin-top: auto;
+    min-width: 0;
     width: 100%;
   }
 }

src/Website.js

@@ -14,7 +14,7 @@ class Website extends React.Component<Props> {
     return (
       <div className="website">
         <div className="main-container">
-          <Navbar />
+          <Navbar changeMenu={800} />
           <Header />
           <Routes />
         </div>

src/components/Navbar/index.css

@@ -7,12 +7,6 @@
   top: 0;
 }
 
-.navbar-small {
-  bottom: 0;
-  padding-bottom: 5px;
-  top: auto;
-}
-
 .navbar-button {
   background-color: rgb(139, 191, 209);
   border-radius: 2px;
@@ -23,7 +17,7 @@
   transition: box-shadow 0.1s;
 }
 
-.navbar-button-close {
+.navbar-button-closed {
   background-color: rgb(173, 184, 209);
 }
 
@@ -32,7 +26,8 @@
 }
 
 .navbar-menu {
-  margin: 0 23.75%;
+  margin: auto;
+  min-width: 840px;
   width: 52.5%;
 }
 
@@ -62,9 +57,16 @@
   background-color: rgb(139, 191, 209);
 }
 
-@media screen and (max-width: 500px) {
+@media screen and (max-width: 800px) {
+  .navbar {
+    bottom: 0;
+    padding-bottom: 5px;
+    top: auto;
+  }
+
   .navbar-menu {
     margin: auto;
+    min-width: 0;
     width: 75%;
   }
   .navbar-menu-button {

src/components/Navbar/index.js

@@ -1,6 +1,5 @@
 // @flow
 import React from "react"
-import ResponsiveMenu from "react-responsive-navbar"
 import { NavLink } from "react-router-dom"
 import FontAwesomeIcon from "@fortawesome/react-fontawesome"
 import faBars from "@fortawesome/fontawesome-free-solid/faBars"
@@ -9,30 +8,60 @@ import "./index.css"
 
 type Props = {}
 
-class Navbar extends React.Component<Props> {
+type State = {
+  showMenu: boolean
+}
+
+class Navbar extends React.Component<Props, State> {
+  static defaultProps: Props
+  changeMenu: number
+
+  constructor(props: Props) {
+    super(props)
+    this.changeMenu = 800
+
+    if (window.innerWidth <= this.changeMenu) {
+      this.state = { showMenu: false }
+    } else {
+      this.state = { showMenu: true }
+    }
+  }
+
+  toggleMenu = () => {
+    if (window.innerWidth <= this.changeMenu || !this.state.showMenu) {
+      this.setState(prev => ({ showMenu: !prev.showMenu }))
+    }
+  }
+
   render() {
+    let menuButton = null
+
+    if (window.innerWidth <= this.changeMenu) {
+      menuButton = (
+        <div
+          className={
+            this.state.showMenu
+              ? "navbar-button navbar-button-closed"
+              : "navbar-button"
+          }
+          onClick={this.toggleMenu}
+        >
+          <FontAwesomeIcon icon={faBars} />
+        </div>
+      )
+    }
+
     return (
-      <ResponsiveMenu
+      <div className="navbar">
-        menuOpenButton={
+        {menuButton}
-          <div className="navbar-button">
+        {this.state.showMenu ? (
-            <FontAwesomeIcon icon={faBars} />
-          </div>
-        }
-        menuCloseButton={
-          <div className="navbar-button navbar-button-close">
-            <FontAwesomeIcon icon={faBars} />
-          </div>
-        }
-        changeMenuOn="500px"
-        largeMenuClassName="navbar"
-        smallMenuClassName="navbar navbar-small"
-        menu={
           <div className="navbar-menu">
             <NavLink
               className="navbar-menu-button"
               activeClassName="active-button"
               exact
               to="/"
+              onClick={this.toggleMenu}
             >
               Home
             </NavLink>
@@ -40,6 +69,7 @@ class Navbar extends React.Component<Props> {
               className="navbar-menu-button"
               activeClassName="active-button"
               to="/projects"
+              onClick={this.toggleMenu}
             >
               Projects
             </NavLink>
@@ -47,6 +77,7 @@ class Navbar extends React.Component<Props> {
               className="navbar-menu-button"
               activeClassName="active-button"
               to="/experience"
+              onClick={this.toggleMenu}
             >
               Experience
             </NavLink>
@@ -54,12 +85,13 @@ class Navbar extends React.Component<Props> {
               className="navbar-menu-button"
               activeClassName="active-button"
               to="/contact"
+              onClick={this.toggleMenu}
             >
               Contact
             </NavLink>
           </div>
-        }
+        ) : null}
-      />
+      </div>
     )
   }
 }