Compare commits

...

1 Commits

Author SHA1 Message Date
Waheed Ahmed
7de6ba4381 fix: logistration hide user menu icon on mobile screens (#84)
VAN-227
2020-12-22 13:02:55 +05:00
3 changed files with 20 additions and 14 deletions

View File

@@ -85,7 +85,7 @@ function Header({ intl }) {
username: authenticatedUser !== null ? authenticatedUser.username : null, username: authenticatedUser !== null ? authenticatedUser.username : null,
avatar: authenticatedUser !== null ? authenticatedUser.avatar : null, avatar: authenticatedUser !== null ? authenticatedUser.avatar : null,
mainMenu: getConfig().LOGISTRATION_MINIMAL_HEADER ? [] : mainMenu, mainMenu: getConfig().LOGISTRATION_MINIMAL_HEADER ? [] : mainMenu,
userMenu, userMenu: getConfig().LOGISTRATION_MINIMAL_HEADER ? [] : userMenu,
loggedOutItems: getConfig().LOGISTRATION_MINIMAL_HEADER ? [] : loggedOutItems, loggedOutItems: getConfig().LOGISTRATION_MINIMAL_HEADER ? [] : loggedOutItems,
}; };

View File

@@ -91,6 +91,8 @@ class MobileHeader extends React.Component {
stickyOnMobile, stickyOnMobile,
intl, intl,
mainMenu, mainMenu,
userMenu,
loggedOutItems,
} = this.props; } = this.props;
const logoProps = { src: logo, alt: logoAltText, href: logoDestination }; const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
const stickyClassName = stickyOnMobile ? 'sticky-top' : ''; 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" />} { logoDestination === null ? <Logo className="logo" src={logo} alt={logoAltText} /> : <LinkedLogo className="logo" {...logoProps} itemType="http://schema.org/Organization" />}
</div> </div>
<div className="w-100 d-flex justify-content-end align-items-center"> <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"> {userMenu.length > 0 || loggedOutItems.length > 0 ? (
<MenuTrigger <Menu tag="nav" aria-label={intl.formatMessage(messages['header.label.secondary.nav'])} className="position-static">
tag="button" <MenuTrigger
className="icon-button" tag="button"
aria-label={intl.formatMessage(messages['header.label.account.menu'])} className="icon-button"
title={intl.formatMessage(messages['header.label.account.menu'])} 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> <Avatar size="1.5rem" src={avatar} alt={username} />
<MenuContent tag="ul" className="nav flex-column pin-left pin-right border-top shadow py-2"> </MenuTrigger>
{loggedIn ? this.renderUserMenuItems() : this.renderLoggedOutItems()} <MenuContent tag="ul" className="nav flex-column pin-left pin-right border-top shadow py-2">
</MenuContent> {loggedIn ? this.renderUserMenuItems() : this.renderLoggedOutItems()}
</Menu> </MenuContent>
</Menu>
) : null}
</div> </div>
</header> </header>
); );

View File

@@ -32,6 +32,8 @@ $white: #fff;
} }
.site-header-mobile { .site-header-mobile {
height: 3rem;
.nav-link { .nav-link {
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;