Adding a home button for mobile menu

client/src/styles/styles.scss

@@ -212,7 +212,7 @@ header.menu{
                 border: solid white;
                 border-width: 0 2px 2px 0;
                 padding: 3px;
-                margin-top: 18px;
+                margin-top: -32px;
                 margin-right: 7px;
                 transform: rotate(45deg);
                 -webkit-transform: rotate(45deg);

client/src/views/layout/header/imports.js

@@ -9,12 +9,14 @@ import {
   Group,
   Adb,
   VpnKey,
+  Home,
   AddCircleOutline
 } from '@material-ui/icons'
 
 const usersMenus = {
   title: 'Users',
   to: '/users',
+  icon: Home,
   submenus: [
     { title: 'Directory', to: '/users/browse', icon: ImportContacts },
     { title: 'Search', to: '/users/search', icon: Search },
@@ -26,6 +28,7 @@ const usersMenus = {
 const teamsMenus = {
   title: 'Teams',
   to: '/teams',
+  icon: Home,
   submenus: [
     { title: 'All teams', to: '/teams', icon: Search },
     { title: 'Your teams', to: '/teams/manage-teams', icon: Group, authenticated: true },
@@ -38,6 +41,7 @@ const teamsMenus = {
 const eventsMenus = {
   title: 'Events',
   to: '/events',
+  icon: Home,
   submenus: [
     { title: 'All events', to: '/events', icon: Search },
     { title: 'Your events', to: '/events/my', icon: GamepadRounded, authenticated: true },
@@ -50,6 +54,7 @@ const eventsMenus = {
 const keyvaultMenus = {
   title: 'Key Vault',
   to: '/key-vault',
+  icon: Home,
   authenticated: true,
   submenus: [
     { title: 'Manage keys', to: '/key-vault/browse', icon: VpnKey },

client/src/views/layout/header/index.js

@@ -80,7 +80,7 @@ class Header extends Component {
     }
     let user = JSON.parse(this.state.user)
 
-    const menus = allMenus.map(({ to, title, submenus, authenticated }, index) => {
+    const menus = allMenus.map(({ icon: Icon, to, title, submenus, authenticated }, index) => {
       if (authenticated && !(this.state.user !== undefined && this.state.user !== null)) {
         return
       }
@@ -91,20 +91,27 @@ class Header extends Component {
           key={index}
           className={openedMenu === index ? 'primaryLink hasChildren selected' : 'primaryLink hasChildren'}
         >
-          <Link to={to} onClick={() => this.toggleMenuOpen(index, true)}> {title} </Link>
+          { bigScreen
+            ? <Link to={to} onClick={() => this.toggleMenuOpen(index, true)}> {title} </Link>
+            : <a onClick={() => this.toggleMenuOpen(index, true)}> {title} </a>
+          }
           <ul className='subMenu'>
+            { bigScreen
+              ? ''
+              : <li key={index + 'home'}><a href={to}> <Icon /> Homepage </a></li>
+            }
             {
-              submenus.map(({ icon: Icon, to: subTo, title: subTitle, externalLink, authenticated: subAuthenticated }, subindex) => {
+              submenus.map(({ icon: SubIcon, to: subTo, title: subTitle, externalLink, authenticated: subAuthenticated }, subindex) => {
                 if (subAuthenticated && !(this.state.user !== undefined && this.state.user !== null)) {
                   return
                 }
                 if (externalLink) {
                   return (
-                    <li key={subindex}><a href={subTo}> <Icon /> {subTitle} </a></li>
+                    <li key={subindex}><a href={subTo}> <SubIcon /> {subTitle} </a></li>
                   )
                 }
                 return (
-                  <li key={subindex}><Link to={subTo} onClick={() => this.closeAll(index)}> <Icon /> {subTitle} </Link></li>
+                  <li key={subindex}><Link to={subTo} onClick={() => this.closeAll(index)}> <SubIcon /> {subTitle} </Link></li>
                 )
               })}
           </ul>