refactor(examples): simplify markup

example/src/index.css

@@ -3,14 +3,10 @@ body {
   color: #111;
 }
 
-html,
-body {
-  margin: 0;
-}
-
 html,
 body,
 #root {
+  margin: 0;
   height: 100%;
 }
 
@@ -44,86 +40,8 @@ header a:hover {
   color: #333;
 }
 
-.menu {
+header select {
   margin-left: auto;
-  background: #f3f3f3;
-  color: #333;
-  border: none;
-  padding: 5px 12px;
-  border-radius: 5px;
-}
-
-nav {
-  font-weight: 400;
-  display: none;
-  position: absolute;
-  width: 94%;
-  top: 46px;
-  z-index: 10;
-  left: 0;
-  padding: 3%;
-  background: rgba(255, 255, 255, 0.9);
-}
-
-nav.is-open {
-  display: block;
-}
-
-nav a {
-  text-decoration: none;
-  font-size: 14px;
-  background: #f3f3f3;
-  color: white;
-  padding: 6px 12px;
-  border-radius: 5px;
-  position: relative;
-  display: block;
-  margin-bottom: 5px;
-  text-align: center;
-}
-
-nav a,
-nav a:focus,
-nav a:active,
-nav a:visited {
-  color: #333;
-}
-
-nav a:hover {
-  color: #333;
-  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.08);
-}
-
-nav a.active:before {
-  content: '';
-  position: absolute;
-  width: 6px;
-  height: 6px;
-  background: white;
-  opacity: 0.8;
-  left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.sourcedisplay {
-  position: absolute;
-  top: 50px;
-  right: 15px;
-  z-index: 4;
-  text-decoration: none;
-  font-size: 12px;
-}
-
-.sourcedisplay,
-.sourcedisplay:focus,
-.sourcedisplay:active,
-.sourcedisplay:visited {
-  color: #777;
-}
-
-.sourcedisplay:hover {
-  color: #111;
 }
 
 .overview-example__add {
@@ -158,28 +76,6 @@ nav a.active:before {
 }
 
 @media screen and (min-width: 768px) {
-  nav {
-    position: relative;
-    display: block;
-    margin-left: auto;
-    width: auto;
-    padding: 0;
-    top: auto;
-    left: auto;
-  }
-
-  nav a {
-    margin-left: 10px;
-    font-size: 12px;
-    display: inline-block;
-    margin-bottom: 0;
-    padding: 5px 12px;
-  }
-
-  .menu {
-    display: none;
-  }
-
   .overview-example__add {
     display: block;
   }

example/src/index.js

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
+import React from 'react';
 import ReactDOM from 'react-dom';
-import { BrowserRouter as Router, Route, Switch, NavLink } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Switch, withRouter } from 'react-router-dom';
 
 import Overview from './Overview';
 import Basic from './Basic';
@@ -25,37 +25,30 @@ const routes = [
   {
     path: '/',
     component: Overview,
-    label: 'Overview',
   },
   {
     path: '/edges',
     component: Edges,
-    label: 'Edges',
   },
   {
     path: '/custom-node',
     component: CustomNode,
-    label: 'CustomNode',
   },
   {
     path: '/validation',
     component: Validation,
-    label: 'Validation',
   },
   {
     path: '/provider',
     component: Provider,
-    label: 'Provider',
   },
   {
     path: '/stress',
     component: Stress,
-    label: 'Stress',
   },
   {
     path: '/interaction',
     component: Interaction,
-    label: 'Interaction',
   },
   {
     path: '/basic',
@@ -84,43 +77,35 @@ const routes = [
   {
     path: '/updatable-edge',
     component: UpdatableEdge,
-    label: 'Updatable Edge',
   },
   {
     path: '/update-node',
     component: UpdateNode,
-    label: 'Update Node',
   },
   {
     path: '/save-restore',
     component: SaveRestore,
-    label: 'Save Restore',
   },
 ];
 
-const navLinks = routes.filter((route) => route.label);
+const Header = withRouter(({ history, location }) => {
-
+  const onChange = (event) => history.push(event.target.value);
-const Header = () => {
-  const [menuOpen, setMenuOpen] = useState();
 
   return (
     <header>
       <a className="logo" href="https://github.com/wbkd/react-flow">
         React Flow Dev
       </a>
-      <nav className={menuOpen ? 'is-open' : ''}>
+      <select defaultValue={location.pathname} onChange={onChange}>
-        {navLinks.map((route) => (
+        {routes.map((route) => (
-          <NavLink to={route.path} key={route.label} exact>
+          <option value={route.path} key={route.path}>
-            {route.label}
+            {route.path === '/' ? 'overview' : route.path.substr(1, route.path.length)}
-          </NavLink>
+          </option>
         ))}
-      </nav>
+      </select>
-      <button className="menu" onClick={() => setMenuOpen(!menuOpen)}>
-        Menu
-      </button>
     </header>
   );
-};
+});
 
 ReactDOM.render(
   <Router forceRefresh={true}>