diff --git a/example/src/index.css b/example/src/index.css
index 10b22e56c..082156ead 100644
--- a/example/src/index.css
+++ b/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;
}
diff --git a/example/src/index.js b/example/src/index.js
index 5f953f9b1..15b194533 100644
--- a/example/src/index.js
+++ b/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 = () => {
- const [menuOpen, setMenuOpen] = useState();
+const Header = withRouter(({ history, location }) => {
+ const onChange = (event) => history.push(event.target.value);
return (
React Flow Dev
-
-
+
);
-};
+});
ReactDOM.render(