feat(examples): add nav bar

example/src/index.css

@@ -1,5 +1,8 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto@1,400;1,700&display=swap');
+
 body {
-  font-family: sans-serif;
+  font-family: 'Roboto', sans-serif;
+  color: #111;
 }
 
 html, body {
@@ -8,4 +11,53 @@ html, body {
 
 html, body, #root {
   height: 100%;
+}
+
+#root {
+  display: flex;
+  flex-direction: column;
+}
+
+header {
+  padding: 10px;
+  border-bottom: 1px solid #eee;
+  display: flex;
+  font-weight: 700;
+}
+
+header nav {
+  font-weight: 400;
+  margin-left: auto;
+}
+
+nav a {
+  margin-left: 10px;
+  text-decoration: none;
+  font-size: 12px;
+  background: rgb(255, 96, 96);
+  color: white;
+  padding: 5px 12px;
+  border-radius: 5px;
+  position: relative;
+}
+
+nav a, nav a:focus, nav a:active {
+  color: #fff;
+}
+
+nav a:hover {
+  color: #fff;
+  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.12);
+}
+
+nav a.active:before {
+  content: '';
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  background: white;
+  opacity: 0.5;
+  left:0;
+  top:50%;
+  transform: translateY(-50%);
 }

example/src/index.js

@@ -1,37 +1,59 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Switch, NavLink } from 'react-router-dom';
 
-import CustomNode from './CustomNode';
 import Rich from './Rich';
 import Basic from './Basic';
-import Empty from './Empty';
-import Inactive from './Inactive';
+import CustomNode from './CustomNode';
 import Stress from './Stress';
+import Inactive from './Inactive';
+import Empty from './Empty';
 
 import './index.css';
 
+const routes = [{
+  path: '/',
+  component: Rich,
+  label: 'Rich'
+}, {
+  path: '/basic',
+  component: Basic,
+  label: 'Basic'
+},{
+  path: '/custom-node',
+  component: CustomNode,
+  label: 'CustomNode'
+}, {
+  path: '/stress',
+  component: Stress,
+  label: 'StressTest'
+}, {
+  path: '/empty',
+  component: Empty
+},{
+  path: '/inactive',
+  component: Inactive
+}];
+
+const navLinks = routes.filter(route => route.label);
+
 ReactDOM.render((
-  <Router>
+  <Router forceRefresh={true}>
+    <header>
+      <div>React Flow Examples</div>
+      <nav>
+        {navLinks.map(route => (
+          <NavLink to={route.path} key={route.label} exact>
+            {route.label}
+          </NavLink>
+        ))}
+      </nav>
+    </header>
     <Switch>
-      <Route path="/basic">
-        <Basic />
-      </Route>
-      <Route path="/empty">
-        <Empty />
-      </Route>
-      <Route path="/inactive">
-        <Inactive />
-      </Route>
-      <Route path="/custom-node">
-        <CustomNode />
-      </Route>
-      <Route path="/stress">
-        <Stress />
-      </Route>
-      <Route path="/">
-        <Rich />
-      </Route>
+      {routes.map(route => (
+        <Route exact path={route.path} render={() => <route.component />} key={route.path} />
+      ))}
     </Switch>
   </Router>
 ), document.getElementById('root'));
+