From f6280e53ba599f65474a5168042834a20247b10b Mon Sep 17 00:00:00 2001
From: Unknown <nikolabjelo@gmail.com>
Date: Thu, 8 Nov 2018 11:43:37 +0100
Subject: [PATCH] Using a toggle instead of a hover (for mobile), and autoclose

---
 client/src/views/layout/header/LoggedIn.js |   8 +-
 client/src/views/layout/header/imports.js  |   4 +-
 client/src/views/layout/header/index.js    |  32 ++++-
 client/src/views/layout/header/styles.scss | 153 +++++++++++++--------
 4 files changed, 130 insertions(+), 67 deletions(-)

diff --git a/client/src/views/layout/header/LoggedIn.js b/client/src/views/layout/header/LoggedIn.js
index 2bda15736..902257382 100644
--- a/client/src/views/layout/header/LoggedIn.js
+++ b/client/src/views/layout/header/LoggedIn.js
@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom'
 import { isDefined } from '../../../utils/js-helpers'
 
 export const LoggedIn = props => {
-  let { user, auth } = props
+  let { user, auth, openedMenu, toggleMenuOpen, closeAll } = props
   let displayName = 'No Display Name'
 
   if (isDefined(user.alias)) {
@@ -25,10 +25,10 @@ export const LoggedIn = props => {
 
   return (
 
-    <li className='primaryLink hasChildren'>
-      <Link to='/users/user'> {displayName} </Link>
+    <li className={openedMenu === 42 ? 'selected primaryLink hasChildren' : 'primaryLink hasChildren'}>
+      <Link to='/users/user' onClick={() => toggleMenuOpen(42)}> {displayName} </Link>
       <ul className='subMenu'>
-        <li><Link to='/users/user' > Profile </Link></li>
+        <li><Link to='/users/user' onClick={() => closeAll()}> Profile </Link></li>
         <li><a href='#' onClick={() => auth.logout()}> Logout </a></li>
       </ul>
     </li>
diff --git a/client/src/views/layout/header/imports.js b/client/src/views/layout/header/imports.js
index e94c51fc1..77205f165 100644
--- a/client/src/views/layout/header/imports.js
+++ b/client/src/views/layout/header/imports.js
@@ -7,7 +7,7 @@ import {
 
 const usersMenus = {
   title: 'Users',
-  to: '/events',
+  to: '/users',
   submenus: [
     { title: 'Your profile', to: '/users/user', icon: Search },
     { title: 'Directory', to: '/users/browse', icon: GamepadRounded },
@@ -42,7 +42,7 @@ const eventsMenus = {
 
 const keyvaultMenus = {
   title: 'Key Vault',
-  to: '/events',
+  to: '/key-vault',
   submenus: [
     { title: 'Manage keys', to: '/key-vault/browse', icon: Search },
     { title: 'Add key', to: '/key-vault/addKey', icon: GamepadRounded },
diff --git a/client/src/views/layout/header/index.js b/client/src/views/layout/header/index.js
index b3a3e88d9..9112d0673 100644
--- a/client/src/views/layout/header/index.js
+++ b/client/src/views/layout/header/index.js
@@ -21,6 +21,7 @@ class Header extends Component {
     this.state = {
       onTop: true,
       mobileOpen: false,
+      openedMenu: null,
       user: null
     }
   }
@@ -37,6 +38,18 @@ class Header extends Component {
     this.setState({ mobileOpen: !this.state.mobileOpen })
   }
 
+  toggleMenuOpen (index) {
+    if (this.state.openedMenu === index) {
+      this.setState({ openedMenu: null })
+    } else {
+      this.setState({ openedMenu: index })
+    }
+  }
+
+  closeAll () {
+    this.setState({ openedMenu: null, mobileOpen: false })
+  }
+
   componentDidMount () {
     window.addEventListener('scroll', () => this.handleScroll())
     const user = window.localStorage.getItem('user')
@@ -49,8 +62,7 @@ class Header extends Component {
 
   render () {
     let { auth } = this.props
-    let { onTop, mobileOpen } = this.state
-
+    let { onTop, mobileOpen, openedMenu } = this.state
     if (window.localStorage.getItem('access_token')) {
       if (jwtDecode(window.localStorage.getItem('access_token')).exp < new Date().getTime() / 1000) {
         window.localStorage.clear()
@@ -61,13 +73,13 @@ class Header extends Component {
 
     const menus = allMenus.map(({ to, title, submenus }, index) => {
       return (
-        <li key={index} className='primaryLink hasChildren'>
-          <Link to={to}> {title} </Link>
+        <li key={index} className={openedMenu === index ? 'primaryLink hasChildren selected' : 'primaryLink hasChildren'}>
+          <Link to={to} onClick={() => this.toggleMenuOpen(index)}> {title} </Link>
           <ul className='subMenu'>
             {
               submenus.map(({ icon: Icon, to: subTo, title: subTitle }, subindex) => {
                 return (
-                  <li key={subindex}><Link to={subTo}> <Icon /> {subTitle} </Link></li>
+                  <li key={subindex}><Link to={subTo} onClick={() => this.closeAll(index)}> <Icon /> {subTitle} </Link></li>
                 )
               })}
           </ul>
@@ -82,7 +94,7 @@ class Header extends Component {
           <div className={mobileOpen ? 'mobileHandle openedMobile' : 'mobileHandle'} onClick={() => this.toggleMobileOpen()}>
             Menu
           </div>
-          <nav className='links'>
+          <nav className={mobileOpen ? 'links openedMobile' : 'links'}>
             <ul className='primaryMenu'>
               <li className='primaryLink'>
                 <Link to='/'> Charts </Link>
@@ -92,7 +104,13 @@ class Header extends Component {
                 <a href='https://www.advancedalgos.net/documentation-quick-start.shtml'> Docs </a>
               </li>
               {this.state.user !== undefined && this.state.user !== null ? (
-                <LoggedIn user={user} auth={auth} />
+                <LoggedIn
+                  user={user}
+                  auth={auth}
+                  openedMenu={openedMenu}
+                  toggleMenuOpen={(keyValue) => this.toggleMenuOpen(keyValue)}
+                  closeAll={() => this.closeAll()}
+                />
               ) : (
 
                 <li className='primaryLink'>
diff --git a/client/src/views/layout/header/styles.scss b/client/src/views/layout/header/styles.scss
index bc5cfd999..182fc9e6b 100644
--- a/client/src/views/layout/header/styles.scss
+++ b/client/src/views/layout/header/styles.scss
@@ -57,10 +57,12 @@ header.menu{
         margin-bottom: ( $height-not-top - $mobile-handle-height ) / 2 ;
       }
       nav.links{
-        ul.primaryMenu{
-          li.primaryLink{
-            padding-top: ( $height-not-top - $text-height ) / 2;
-            padding-bottom: ( $height-not-top - $text-height ) / 2;
+        @media screen and (min-width: $break-big) {
+          ul.primaryMenu{
+            li.primaryLink{
+              padding-top: ( $height-not-top - $text-height ) / 2;
+              padding-bottom: ( $height-not-top - $text-height ) / 2;
+            }
           }
         }
       }
@@ -98,7 +100,7 @@ header.menu{
       margin-top: ( $height-large-device - $image-height-big ) / 2 ;
       height: $image-height-big;
     }
-    .openedMobile{
+    .mobileHandle.openedMobile{
       &:before{
         content: "";
         position: absolute;
@@ -158,61 +160,104 @@ header.menu{
     nav.links{
       @media screen and (max-width: $break-big) {
         display: none;
-        &.mobileShow{
+        &.openedMobile{
           display: block;
         }
-      }
-      float: right;
-      ul.primaryMenu{
-        margin: 0 4px 0 0;
-        list-style: none;
-
-        font-family: 'Saira';
-        font-size: 12px;
-        font-weight: 700;
-        line-height: $text-height;
-        text-transform: uppercase;
-        li.primaryLink{
-          transition: $transition-time;
-          display: block;
-          float: left;
-          position: relative;
-          padding-top: ( $height-large-device - $text-height ) / 2;
-          padding-bottom: ( $height-large-device - $text-height ) / 2;
-          padding-right: 21px;
-          padding-left: 21px;
-          a{
-            color: white;
-            text-decoration: none;
-            &:hover{
-              color: $advanced-algos-red;
-            }
-          }
-          ul.subMenu{
-            display: none;
-            position: absolute;
-            top: 100%;
-            left: 0;
-
-            padding: 18px 30px;
-            list-style: none;
-            font-family: 'Saira';
-            font-size: 12px;
-            font-weight: 300;
-            line-height: $text-height;
-
+        ul.primaryMenu{
+          padding-left: 20px;
+          padding-right: 20px;
+          background-color: rgba(0, 0, 0, 0.6);
+          font-family: 'Saira';
+          font-size: 12px;
+          font-weight: 700;
+          line-height: $text-height;
+          text-transform: uppercase;
+          list-style: none;
+          li.primaryLink{
             min-width: 240px;
-            background-color: rgba(0, 0, 0, 0.6);
-            li{
-              height: 30px;
+            min-height: 50px;
+            border-bottom: 1px solid white;
+            &:last-child{
+              border-bottom: 0;
             }
-          }
-          &:hover{
-            &>a{
-              color: $advanced-algos-red;
+            a{
+              text-transform: uppercase;
+              display: block;
+              font-size: 13px;
+              height: 50px;
+              line-height: 50px;
+              font-weight: 700;
+              letter-spacing: 1px;
+              padding: 0 40px 0 30px;
+              text-decoration: none;
+              color: white;
             }
             ul.subMenu{
-              display: block;
+              display: none;
+              list-style: none;
+            }
+            &.selected{
+              ul.subMenu{
+                display: block;
+              }
+            }
+          }
+        }
+      }
+      @media screen and (min-width: $break-big) {
+        display: block;
+        float: right;
+        ul.primaryMenu{
+          margin: 0 4px 0 0;
+          list-style: none;
+
+          font-family: 'Saira';
+          font-size: 12px;
+          font-weight: 700;
+          line-height: $text-height;
+          text-transform: uppercase;
+          li.primaryLink{
+            transition: $transition-time;
+            display: block;
+            float: left;
+            position: relative;
+            padding-top: ( $height-large-device - $text-height ) / 2;
+            padding-bottom: ( $height-large-device - $text-height ) / 2;
+            padding-right: 21px;
+            padding-left: 21px;
+            a{
+              color: white;
+              text-decoration: none;
+              &.selected{
+                color: $advanced-algos-red;
+              }
+            }
+            ul.subMenu{
+              display: none;
+              position: absolute;
+              top: 100%;
+              left: 0;
+
+              padding: 18px 30px;
+              list-style: none;
+              font-family: 'Saira';
+              font-size: 12px;
+              font-weight: 300;
+              line-height: $text-height;
+
+              min-width: 240px;
+              background-color: rgba(0, 0, 0, 0.6);
+              li{
+                height: 30px;
+              }
+            }
+            &.selected{
+              &>a{
+                color: $advanced-algos-red;
+              }
+              ul.subMenu{
+                display: block;
+              }
             }
           }
         }