Add tabler layout

embark-ui/package-lock.json

@@ -1873,6 +1873,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+    },
     "clean-css": {
       "version": "4.1.11",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.1.11.tgz",
@@ -2220,6 +2225,15 @@
         "sha.js": "^2.4.8"
       }
     },
+    "create-react-context": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.2.tgz",
+      "integrity": "sha512-KkpaLARMhsTsgp0d2NA/R94F/eDLbhXERdIq3LvX2biCAXcDvHYoOqHfWCHf1+OLj+HKBotLG3KqaOOf+C1C+A==",
+      "requires": {
+        "fbjs": "^0.8.0",
+        "gud": "^1.0.0"
+      }
+    },
     "cross-spawn": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
@@ -4514,6 +4528,11 @@
       "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
       "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE="
     },
+    "gud": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
+      "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
+    },
     "gzip-size": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-3.0.0.tgz",
@@ -7376,6 +7395,11 @@
       "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-7.0.0.tgz",
       "integrity": "sha512-ARhBOdzS3e41FbkW/XWrTEtukqqLoK5+Z/4UeDaLuSW+39JPeFgs4gCGqsrJHVZX0fUrx//4OF0K1CUGwlIFow=="
     },
+    "popper.js": {
+      "version": "1.14.3",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.3.tgz",
+      "integrity": "sha1-FDj5jQRqz3tNeM1QK/QYrGTU8JU="
+    },
     "portfinder": {
       "version": "1.0.13",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.13.tgz",
@@ -8848,6 +8872,29 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-4.0.0.tgz",
       "integrity": "sha512-FlsPxavEyMuR6TjVbSSywovXSEyOg6ZDj5+Z8nbsRl9EkOzAhEIcS+GLoQDC5fz/t9suhUXWmUrOBrgeUvrMxw=="
     },
+    "react-popper": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.0.0.tgz",
+      "integrity": "sha1-uZRSFE6P5KzHf6PZWajHngemUIQ=",
+      "requires": {
+        "babel-runtime": "6.x.x",
+        "create-react-context": "^0.2.1",
+        "popper.js": "^1.14.1",
+        "prop-types": "^15.6.1",
+        "typed-styles": "^0.0.5",
+        "warning": "^3.0.0"
+      },
+      "dependencies": {
+        "warning": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
+        }
+      }
+    },
     "react-redux": {
       "version": "5.0.7",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-5.0.7.tgz",
@@ -8875,6 +8922,19 @@
         "warning": "^4.0.1"
       }
     },
+    "react-router-dom": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-4.3.1.tgz",
+      "integrity": "sha512-c/MlywfxDdCp7EnB7YfPMOfMD3tOtIjrQlj/CKfNMBxdmpJP8xcz5P/UAFn3JbnQCNUxsHyVVqllF9LhgVyFCA==",
+      "requires": {
+        "history": "^4.7.2",
+        "invariant": "^2.2.4",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.6.1",
+        "react-router": "^4.3.1",
+        "warning": "^4.0.1"
+      }
+    },
     "react-scripts": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-1.1.4.tgz",
@@ -8936,6 +8996,14 @@
         }
       }
     },
+    "react-text-mask": {
+      "version": "5.4.3",
+      "resolved": "https://registry.npmjs.org/react-text-mask/-/react-text-mask-5.4.3.tgz",
+      "integrity": "sha1-mR77QpnjDC5sLEbRP2FxaUY+DS0=",
+      "requires": {
+        "prop-types": "^15.5.6"
+      }
+    },
     "read-pkg": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
@@ -10149,6 +10217,16 @@
         }
       }
     },
+    "tabler-react": {
+      "version": "1.18.0",
+      "resolved": "https://registry.npmjs.org/tabler-react/-/tabler-react-1.18.0.tgz",
+      "integrity": "sha512-X806m4s0YiVd5BC4rORlVsvhuatkc3sFegW5Y/XU7m5tSSFl4fJ5E+9xw9tiujcxcoZO1p5f9KDn25d1kE+I8A==",
+      "requires": {
+        "classnames": "^2.2.5",
+        "react-popper": "^1.0.0-beta.6",
+        "react-text-mask": "^5.4.1"
+      }
+    },
     "tapable": {
       "version": "0.2.8",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-0.2.8.tgz",
@@ -10345,6 +10423,11 @@
         "mime-types": "~2.1.18"
       }
     },
+    "typed-styles": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.5.tgz",
+      "integrity": "sha512-ht+rEe5UsdEBAa3gr64+QjUOqjOLJfWLvl5HZR5Ev9uo/OnD3p43wPeFSB1hNFc13GXQF/JU1Bn0YHLUqBRIlw=="
+    },
     "typedarray": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",

embark-ui/package.json

@@ -9,10 +9,11 @@
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
     "react-redux": "^5.0.7",
-    "react-router": "^4.3.1",
+    "react-router-dom": "^4.3.1",
     "react-scripts": "1.1.4",
     "redux": "^4.0.0",
-    "redux-saga": "^0.16.0"
+    "redux-saga": "^0.16.0",
+    "tabler-react": "^1.18.0"
   },
   "scripts": {
     "start": "react-scripts start",

embark-ui/src/components/Layout.js

@@ -1,9 +1,41 @@
 import React from 'react';
+import { NavLink, withRouter } from "react-router-dom";
+import { Site, Nav, Button } from "tabler-react";
+
+import logo from'../images/logo.png';
+
+const navBarItems = [
+  { value: "Home", to: "/embark", icon: "home", LinkComponent: withRouter(NavLink) },
+  { value: "Contracts", to: "/embark/contracts", icon: "box", LinkComponent: withRouter(NavLink) },
+  { value: "Explorer", to: "/embark/explorer/accounts", icon: "activity", LinkComponent: withRouter(NavLink) },
+  { value: "Documentation", to: "/embark/documentation", icon: "file-text", LinkComponent: withRouter(NavLink) },
+];
 
 const Layout = (props) => (
-  <div>
+  <Site.Wrapper
+    headerProps={{
+      href: "/embark",
+      alt: "Embark",
+      imageURL: logo,
+      navItems: (
+        <Nav.Item type="div" className="d-none d-md-flex">
+          <Button
+            href="https://github.com/embark-fraework/embark"
+            target="_blank"
+            outline
+            size="sm"
+            RootComponent="a"
+            color="primary"
+          >
+            Source code
+          </Button>
+        </Nav.Item>
+      )
+    }}
+    navProps={{ itemsObjects: navBarItems}}
+  >
     {props.children}
-  </div>
+  </Site.Wrapper>
 );
 
 export default Layout;

embark-ui/src/index.js

@@ -2,6 +2,8 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 
+import "tabler-react/dist/Tabler.css";
+
 import AppContainer from './containers/AppContainer';
 import registerServiceWorker from './registerServiceWorker';
 import configureStore from './store/configureStore';

embark-ui/src/routes.js

@@ -7,8 +7,8 @@ import NoMatch from './components/NoMatch';
 const routes = (
   <React.Fragment>
     <Switch>
-      <Route exact path="/" component={Home} />
-      <Route path="/explorer/accounts" component={AccountsContainer} />
+      <Route exact path="/embark" component={Home} />
+      <Route path="/embark/explorer/accounts" component={AccountsContainer} />
       <Route component={NoMatch} />
     </Switch>
   </React.Fragment>