From f9dd20271320284840d6f5d440216cdb1ab9529d Mon Sep 17 00:00:00 2001
From: Anthony Laibe <anthony@laibe.cc>
Date: Fri, 19 Oct 2018 09:57:10 +0100
Subject: [PATCH] Apply header and sidebar layout navigation

---
 embark-ui/src/components/Layout.js       | 168 +++++++++++++----------
 embark-ui/src/containers/AppContainer.js |   6 +-
 2 files changed, 99 insertions(+), 75 deletions(-)

diff --git a/embark-ui/src/components/Layout.js b/embark-ui/src/components/Layout.js
index d5b8ea92..3e17e69d 100644
--- a/embark-ui/src/components/Layout.js
+++ b/embark-ui/src/components/Layout.js
@@ -1,6 +1,7 @@
 import React from 'react';
+import {Link} from 'react-router-dom';
 import PropTypes from 'prop-types';
-import { DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem, NavLink, Container } from 'reactstrap';
+import {DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem, NavLink, Container} from 'reactstrap';
 import {LIGHT_THEME, DARK_THEME} from '../constants';
 import FontAwesome from 'react-fontawesome';
 
@@ -23,99 +24,120 @@ import SearchBar from './SearchBar';
 
 import logo from '../images/logo-new.svg';
 
-const sidebarNavItems = {items: [
-  {name: "Dashboard", url: "/embark", icon: 'fa fa-tachometer'},
-  {name: "Deployment", url: "/embark/deployment", icon: "fa fa-arrow-up"},
-  {name: "Contracts", url: "/embark/contracts", icon: "fa fa-file-text"},
-  {name: "Explorer", url: "/embark/explorer", icon: "fa fa-compass", children: [
+const HEADER_NAV_ITEMS = [
+  {name: "Dashboard", to: "/embark", icon: 'tachometer'},
+  {name: "Deployment", to: "/embark/deployment", icon: "arrow-up"},
+  {name: "Contracts", to: "/embark/contracts", icon: "file-text"},
+  {name: "Explorer", to: "/embark/explorer/overview", icon: "compass"},
+  {name: "Editor", to: "/embark/editor", icon: "codepen"},
+  {name: "Utils", to: "/embark/utilities/converter", icon: "cog"}
+];
+
+const SIDEBAR_NAV_ITEMS = {
+  "/embark/explorer" : {items: [
     {url: "/embark/explorer/overview", icon: "fa fa-signal", name: "Overview"},
     {url: "/embark/explorer/accounts", icon: "fa fa-users", name: "Accounts"},
     {url: "/embark/explorer/blocks", icon: "fa fa-stop", name: "Blocks"},
     {url: "/embark/explorer/transactions", icon: "fa fa-tree", name: "Transactions"}
   ]},
-  {name: "Editor", url: "/embark/editor", icon: "fa fa-codepen"},
-  {name: "Documentation", url: "/embark/documentation", icon: "fa fa-book"},
-  {name: "Utils", url: "/embark/utilities/converter", icon: "fa fa-cog", children: [
+  "/embark/utilities/": {items: [
     {url: "/embark/utilities/converter", icon: "fa fa-plug", name: "Converter"},
     {url: "/embark/utilities/communication", icon: "fa fa-phone", name: "Communication"},
     {url: "/embark/utilities/ens", icon: "fa fa-circle", name: "ENS"},
     {url: "/embark/utilities/sign-and-verify", icon: "fa fa-edit", name: "Sign & Verify"},
     {url: "/embark/utilities/transaction-decoder", icon: "fa fa-edit", name: "Transaction Decoder"}
   ]}
-]};
+};
+
+const removeCssClasses = () => {
+  document.body.classList.remove('sidebar-fixed');
+  document.body.classList.remove('sidebar-lg-show');
+}
+
+const getSidebar = (location) => {
+  const currentItem = Object.keys(SIDEBAR_NAV_ITEMS).find(path => location.pathname.startsWith(path));
+  return currentItem && SIDEBAR_NAV_ITEMS[currentItem];
+}
 
 function searchTheExplorer(value) {
   // TODO: search
 }
 
-const Layout = ({children, logout, credentials, location, toggleTheme, currentTheme}) => (
-  <div className="app animated fadeIn">
-    <AppHeader fixed>
-      <AppSidebarToggler className="d-lg-none" display="md" mobile />
-      <AppNavbarBrand
-        full={{ src: logo, width: 50, height: 50, alt: 'Embark Logo' }}
-        minimized={{ src: logo, width: 30, height: 30, alt: 'Embark Logo' }}
-      />
-      <AppSidebarToggler className="d-md-down-none" display="lg" />
-      <Nav className="d-md-down-none" navbar>
-        {sidebarNavItems.items.map((item) => {
-          return (
-            <NavItem className="px-3" key={item.url}>
-              <NavLink href={item.url}>
-                <i className={item.icon}>&nbsp;</i>
-                {item.name}
-              </NavLink>
-            </NavItem>
-          )
-        })}
-      </Nav>
-      <Nav className="ml-auto" navbar>
-        <SearchBar searchSubmit={searchValue => searchTheExplorer(searchValue)}/>
-        <AppHeaderDropdown direction="down">
-          <DropdownToggle nav>
-            <i className="icon-settings" />
-          </DropdownToggle>
-          <DropdownMenu right style={{ right: 'auto' }}>
-            <DropdownItem className="text-capitalize" onClick={() => toggleTheme()}>
-              <FontAwesome name={currentTheme === DARK_THEME ? 'sun-o' : 'moon-o'} />
-              {currentTheme === DARK_THEME ? LIGHT_THEME : DARK_THEME} Mode
-            </DropdownItem>
-            <DropdownItem onClick={logout}><FontAwesome name="lock" /> Logout</DropdownItem>
-          </DropdownMenu>
-        </AppHeaderDropdown>
-      </Nav>
-    </AppHeader>
-    <div className="app-body">
-      <AppSidebar fixed display="lg">
-        <AppSidebarHeader />
-        <AppSidebarForm />
-        <AppSidebarNav navConfig={sidebarNavItems} location={location} />
-        <AppSidebarFooter />
-        <AppSidebarMinimizer />
-      </AppSidebar>
-      <main className="main">
-        <Container fluid className="h-100" style={{marginTop: '24px'}}>
-          {children}
-        </Container>
-      </main>
-      <AppAside fixed>
-      </AppAside>
+const Layout = ({children, logout, location, toggleTheme, currentTheme}) => {
+  const sidebar = getSidebar(location);
+  if (!sidebar) {
+    removeCssClasses();
+  }
+  return (
+    <div className="app animated fadeIn">
+      <AppHeader fixed>
+        <AppSidebarToggler className="d-lg-none" display="md" mobile />
+        <AppNavbarBrand
+          full={{ src: logo, width: 50, height: 50, alt: 'Embark Logo' }}
+          minimized={{ src: logo, width: 30, height: 30, alt: 'Embark Logo' }}
+        />
+        {sidebar && <AppSidebarToggler className="d-md-down-none" display="lg" />}
+        <Nav className="d-md-down-none" navbar>
+          {HEADER_NAV_ITEMS.map((item) => {
+            return (
+              <NavItem className="px-3" key={item.to}>
+                <NavLink exact tag={Link} to={item.to}>
+                  <FontAwesome className="mr-2" name={item.icon} />
+                  {item.name}
+                </NavLink>
+              </NavItem>
+            )
+          })}
+        </Nav>
+        <Nav className="ml-auto" navbar>
+          <SearchBar searchSubmit={searchValue => searchTheExplorer(searchValue)}/>
+          <AppHeaderDropdown direction="down">
+            <DropdownToggle nav>
+              <i className="icon-settings" />
+            </DropdownToggle>
+            <DropdownMenu right style={{ right: 'auto' }}>
+              <DropdownItem className="text-capitalize" onClick={() => toggleTheme()}>
+                <FontAwesome name={currentTheme === DARK_THEME ? 'sun-o' : 'moon-o'} />
+                {currentTheme === DARK_THEME ? LIGHT_THEME : DARK_THEME} Mode
+              </DropdownItem>
+              <DropdownItem onClick={logout}><FontAwesome name="lock" /> Logout</DropdownItem>
+            </DropdownMenu>
+          </AppHeaderDropdown>
+        </Nav>
+      </AppHeader>
+      <div className="app-body">
+        {sidebar &&
+          <AppSidebar fixed display="lg">
+            <AppSidebarHeader />
+            <AppSidebarForm />
+            <AppSidebarNav navConfig={sidebar} location={location} />
+            <AppSidebarFooter />
+            <AppSidebarMinimizer />
+          </AppSidebar>
+        }
+        <main className="main">
+          <Container fluid className="h-100" style={{marginTop: '24px'}}>
+            {children}
+          </Container>
+        </main>
+        <AppAside fixed>
+        </AppAside>
+      </div>
+      <AppFooter>
+        <span className="ml-auto">
+          Embark&nbsp;
+          <a href="https://embark.status.im" title="Documentation" rel="noopener noreferrer" target="_blank">Documentation</a>
+          &nbsp;|&nbsp;
+          <a href="https://github.com/embark-framework" title="Github" rel="noopener noreferrer" target="_blank">Github</a>
+        </span>
+      </AppFooter>
     </div>
-    <AppFooter>
-      <span className="ml-auto">
-        Embark&nbsp;
-        <a href="https://embark.status.im" title="Documentation" rel="noopener noreferrer" target="_blank">Documentation</a>
-        &nbsp;|&nbsp;
-        <a href="https://github.com/embark-framework" title="Github" rel="noopener noreferrer" target="_blank">Github</a>
-      </span>
-    </AppFooter>
-  </div>
-);
+  );
+}
 
 Layout.propTypes = {
   children: PropTypes.element,
   tabs: PropTypes.arrayOf(PropTypes.object),
-  credentials: PropTypes.object,
   location: PropTypes.object,
   logout: PropTypes.func,
   toggleTheme: PropTypes.func,
diff --git a/embark-ui/src/containers/AppContainer.js b/embark-ui/src/containers/AppContainer.js
index d5a47e02..6af1115a 100644
--- a/embark-ui/src/containers/AppContainer.js
+++ b/embark-ui/src/containers/AppContainer.js
@@ -80,8 +80,10 @@ class AppContainer extends Component {
     if (this.shouldRenderLogin()) {
       content = <Login credentials={this.props.credentials} authenticate={this.props.authenticate} error={this.props.authenticationError} />;
     } else {
-      content = <Layout location={this.props.location} logout={this.props.logout} credentials={this.props.credentials}
-                        toggleTheme={() => this.toggleTheme()} currentTheme={this.props.theme}>
+      content = <Layout location={this.props.location} 
+                        logout={this.props.logout}
+                        toggleTheme={() => this.toggleTheme()} 
+                        currentTheme={this.props.theme}>
         <React.Fragment>{routes}</React.Fragment>
       </Layout>;
     }