Andal.LND/frontend-component-header
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: align logo to left on authn mfe

Browse Source
This commit is contained in:
uzairr
2021-02-06 17:51:17 +05:00
parent 0d64b19ac4
commit 917e748fc5
4 changed files with 18 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/MobileHeader.jsx
View File

@@ -1,6 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { getConfig } from '@edx/frontend-platform';
// Local Components
import { Menu, MenuTrigger, MenuContent } from './Menu';
@@ -96,14 +97,16 @@ class MobileHeader extends React.Component {
} = this.props;
const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
const stickyClassName = stickyOnMobile ? 'sticky-top' : '';
const logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'justify-content-left pl-3' : 'justify-content-center';
return (
<header
aria-label={intl.formatMessage(messages['header.label.main.header'])}
className={`site-header-mobile d-flex justify-content-between align-items-center shadow ${stickyClassName}`}
>
<div className="w-100 d-flex justify-content-start">
{mainMenu.length > 0 ? (
{mainMenu.length > 0 ? (
<div className="w-100 d-flex justify-content-start">
<Menu className="position-static">
<MenuTrigger
tag="button"
@@ -121,13 +124,13 @@ class MobileHeader extends React.Component {
{this.renderMainMenu()}
</MenuContent>
</Menu>
) : null}
</div>
<div className="w-100 d-flex justify-content-center">
</div>
) : null}
<div className={`w-100 d-flex ${logoClasses}`}>
{ 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">
{userMenu.length > 0 || loggedOutItems.length > 0 ? (
{userMenu.length > 0 || loggedOutItems.length > 0 ? (
<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"
@@ -141,8 +144,8 @@ class MobileHeader extends React.Component {
{loggedIn ? this.renderUserMenuItems() : this.renderLoggedOutItems()}
</MenuContent>
</Menu>
) : null}
</div>
</div>
) : null}
</header>
);
}