Break out menu to clean up router

dev01d · Jan 14, 2019 · 09dee70 · 09dee70
1 parent 064c689
commit 09dee70
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 38 deletions.
diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
@@ -0,0 +1,44 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+import { stack as Menu } from 'react-burger-menu'
+import '../styles/Sidebar.css'
+
+export default class Sidebar extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      menuOpen: false
+    }
+  }
+  handleStateChange(state) {
+    this.setState({ menuOpen: state.isOpen })
+  }
+  closeMenu() {
+    this.setState({ menuOpen: false })
+  }
+  toggleMenu() {
+    this.setState({ menuOpen: !this.state.menuOpen })
+  }
+  render() {
+    return (
+      <Menu
+        width={140}
+        isOpen={false}
+        pageWrapId={'page-wrap'}
+        outerContainerId={'App'}
+        isOpen={this.state.menuOpen}
+        onStateChange={state => this.handleStateChange(state)}
+      >
+        <Link className="menu-item" to="/">
+          <a onClick={() => this.closeMenu()}>Home</a>
+        </Link>
+        <Link className="menu-item" to="/about">
+          <a onClick={() => this.closeMenu()}>About</a>
+        </Link>
+        <Link className="menu-item" to="/gallery">
+          <a onClick={() => this.closeMenu()}>Gallery</a>
+        </Link>
+      </Menu>
+    )
+  }
+}
diff --git a/src/router/AppRouter.jsx b/src/router/AppRouter.jsx
@@ -1,49 +1,17 @@
 import React, { Component } from 'react'
-import { BrowserRouter, Route, Link, Switch, Redirect } from 'react-router-dom'
-import { stack as Menu } from 'react-burger-menu'
-import App from '../components/App'
-import About from '../components/AboutPage'
-import Gallery from '../components/GalleryPage'
+import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom'
+import Sidebar from '../components/Sidebar'
+import App from '../views/HomePage'
+import About from '../views/AboutPage'
+import Gallery from '../views/GalleryPage'
 import '../styles/Sidebar.css'
 
 export default class AppRouter extends Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      menuOpen: false
-    }
-  }
-  handleStateChange(state) {
-    this.setState({ menuOpen: state.isOpen })
-  }
-  closeMenu() {
-    this.setState({ menuOpen: false })
-  }
-  toggleMenu() {
-    this.setState({ menuOpen: !this.state.menuOpen })
-  }
   render() {
     return (
       <BrowserRouter>
         <div id="outer-container">
-          <Menu
-            width={140}
-            isOpen={false}
-            pageWrapId={'page-wrap'}
-            outerContainerId={'App'}
-            isOpen={this.state.menuOpen}
-            onStateChange={state => this.handleStateChange(state)}
-          >
-            <Link className="menu-item" to="/">
-              <a onClick={() => this.closeMenu()}>Home</a>
-            </Link>
-            <Link className="menu-item" to="/about">
-              <a onClick={() => this.closeMenu()}>About</a>
-            </Link>
-            <Link className="menu-item" to="/gallery">
-              <a onClick={() => this.closeMenu()}>Gallery</a>
-            </Link>
-          </Menu>
+          <Sidebar />
           <Switch>
             <Route exact path="/" component={App} />
             <Route path="/about" component={About} />