conflict in Layout

embark-ui/src/components/Layout.js

@@ -63,10 +63,6 @@ const getSidebar = (location) => {
   return currentItem && SIDEBAR_NAV_ITEMS[currentItem];
 }
 
-function searchTheExplorer(_value) {
-  // TODO: search
-}
-
 class Layout extends React.Component {
   constructor(props) {
     super(props);
@@ -105,18 +101,8 @@ class Layout extends React.Component {
     this.setState({loading: true});
   }
 
-  render() {
-    const {children, logout, location, toggleTheme, currentTheme, searchResult} = this.props;
-
-    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' }}
-        />
-        <AppSidebarToggler className="d-md-down-none" display="lg" />
-        <Nav className="d-md-down-none" navbar>
+  renderNav() {
+    return (<Nav className="d-md-down-none" navbar>
       {sidebarNavItems.items.map((item) => {
         return (
           <NavItem className="px-3" key={item.url}>
@@ -127,13 +113,24 @@ class Layout extends React.Component {
           </NavItem>
         );
       })}
-        </Nav>
-        <Nav className="ml-auto" navbar>
+    </Nav>);
+  }
+
+  renderRightNav() {
+    const searchResult = this.props.searchResult;
+    return (<Nav className="ml-auto" navbar>
       <SearchBar searchSubmit={searchValue => this.searchTheExplorer(searchValue)}/>
       {this.state.loading && <p>Searching...</p>}
       {searchResult.error && <Alert color="danger">{searchResult.error}</Alert>}
 
-          <AppHeaderDropdown direction="down">
+      {this.renderSettings()}
+    </Nav>);
+  }
+
+  renderSettings() {
+    const {logout, toggleTheme, currentTheme} = this.props;
+
+    return (<AppHeaderDropdown direction="down">
       <DropdownToggle nav>
         <i className="icon-settings" />
       </DropdownToggle>
@@ -144,35 +141,58 @@ class Layout extends React.Component {
         </DropdownItem>
         <DropdownItem onClick={logout}><FontAwesome name="lock" /> Logout</DropdownItem>
       </DropdownMenu>
-          </AppHeaderDropdown>
-        </Nav>
-      </AppHeader>
-      <div className="app-body">
-        {sidebar &&
-        <AppSidebar fixed display="lg">
+    </AppHeaderDropdown>);
+  }
+
+  renderSideBar() {
+    return (<AppSidebar fixed display="lg">
       <AppSidebarHeader />
       <AppSidebarForm />
-          <AppSidebarNav navConfig={sidebarNavItems} location={location} />
+      <AppSidebarNav navConfig={sidebarNavItems} location={this.props.location} />
       <AppSidebarFooter />
       <AppSidebarMinimizer />
-        </AppSidebar>
+    </AppSidebar>);
   }
-        <main className="main">
-          <Container fluid className="h-100" style={{marginTop: '24px'}}>
-            {children}
-          </Container>
-        </main>
-        <AppAside fixed>
-        </AppAside>
-      </div>
-      <AppFooter>
+
+  renderFooter() {
+    return (<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>
+    </AppFooter>);
+  }
+
+  render() {
+    const {children} = this.props;
+
+    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' }}
+        />
+        <AppSidebarToggler className="d-md-down-none" display="lg" />
+
+        {this.renderNav()}
+
+        {this.renderRightNav()}
+      </AppHeader>
+
+      <div className="app-body">
+        {this.renderSideBar()}
+
+        <main className="main">
+          <Container fluid className="h-100" style={{marginTop: '24px'}}>
+            {children}
+          </Container>
+        </main>
+      </div>
+
+      {this.renderFooter()}
     </div>);
   }
 }