From 7de6ba4381ba248abb4dd90d1c419cb58dc13b7c Mon Sep 17 00:00:00 2001
From: Waheed Ahmed <waheed.ahmed@arbisoft.com>
Date: Tue, 22 Dec 2020 13:02:55 +0500
Subject: [PATCH] fix: logistration hide user menu icon on mobile screens (#84)

VAN-227
---
 src/Header.jsx       |  2 +-
 src/MobileHeader.jsx | 30 +++++++++++++++++-------------
 src/index.scss       |  2 ++
 3 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/Header.jsx b/src/Header.jsx
index ee75d53..3ece47e 100644
--- a/src/Header.jsx
+++ b/src/Header.jsx
@@ -85,7 +85,7 @@ function Header({ intl }) {
     username: authenticatedUser !== null ? authenticatedUser.username : null,
     avatar: authenticatedUser !== null ? authenticatedUser.avatar : null,
     mainMenu: getConfig().LOGISTRATION_MINIMAL_HEADER ? [] : mainMenu,
-    userMenu,
+    userMenu: getConfig().LOGISTRATION_MINIMAL_HEADER ? [] : userMenu,
     loggedOutItems: getConfig().LOGISTRATION_MINIMAL_HEADER ? [] : loggedOutItems,
   };
 
diff --git a/src/MobileHeader.jsx b/src/MobileHeader.jsx
index ffcdf01..c465c8c 100644
--- a/src/MobileHeader.jsx
+++ b/src/MobileHeader.jsx
@@ -91,6 +91,8 @@ class MobileHeader extends React.Component {
       stickyOnMobile,
       intl,
       mainMenu,
+      userMenu,
+      loggedOutItems,
     } = this.props;
     const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
     const stickyClassName = stickyOnMobile ? 'sticky-top' : '';
@@ -125,19 +127,21 @@ class MobileHeader extends React.Component {
           { logoDestination === null ? <Logo className="logo" src={logo} alt={logoAltText} /> : <LinkedLogo className="logo" {...logoProps} itemType="http://schema.org/Organization" />}
         </div>
         <div className="w-100 d-flex justify-content-end align-items-center">
-          <Menu tag="nav" aria-label={intl.formatMessage(messages['header.label.secondary.nav'])} className="position-static">
-            <MenuTrigger
-              tag="button"
-              className="icon-button"
-              aria-label={intl.formatMessage(messages['header.label.account.menu'])}
-              title={intl.formatMessage(messages['header.label.account.menu'])}
-            >
-              <Avatar size="1.5rem" src={avatar} alt={username} />
-            </MenuTrigger>
-            <MenuContent tag="ul" className="nav flex-column pin-left pin-right border-top shadow py-2">
-              {loggedIn ? this.renderUserMenuItems() : this.renderLoggedOutItems()}
-            </MenuContent>
-          </Menu>
+          {userMenu.length > 0 || loggedOutItems.length > 0 ? (
+            <Menu tag="nav" aria-label={intl.formatMessage(messages['header.label.secondary.nav'])} className="position-static">
+              <MenuTrigger
+                tag="button"
+                className="icon-button"
+                aria-label={intl.formatMessage(messages['header.label.account.menu'])}
+                title={intl.formatMessage(messages['header.label.account.menu'])}
+              >
+                <Avatar size="1.5rem" src={avatar} alt={username} />
+              </MenuTrigger>
+              <MenuContent tag="ul" className="nav flex-column pin-left pin-right border-top shadow py-2">
+                {loggedIn ? this.renderUserMenuItems() : this.renderLoggedOutItems()}
+              </MenuContent>
+            </Menu>
+          ) : null}
         </div>
       </header>
     );
diff --git a/src/index.scss b/src/index.scss
index 497147e..637163c 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -32,6 +32,8 @@ $white: #fff;
 }
 
 .site-header-mobile {
+  height: 3rem;
+
   .nav-link {
     text-decoration: none;
     cursor: pointer;