From 917e748fc56dea430da0c477f2a2fa1bf25bd70d Mon Sep 17 00:00:00 2001
From: uzairr <uzairr@yahoo.com>
Date: Sat, 6 Feb 2021 17:51:17 +0500
Subject: [PATCH] fix: align logo to left on authn mfe

---
 .gitignore                             |  1 +
 src/DesktopHeader.jsx                  |  4 +++-
 src/MobileHeader.jsx                   | 21 ++++++++++++---------
 src/__snapshots__/Header.test.jsx.snap |  4 ++--
 4 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/.gitignore b/.gitignore
index 372d4f6..fe91cca 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,3 +6,4 @@ node_modules
 temp
 src/i18n/transifex_input.json
 module.config.js
+.idea/
diff --git a/src/DesktopHeader.jsx b/src/DesktopHeader.jsx
index d75f5df..e583831 100644
--- a/src/DesktopHeader.jsx
+++ b/src/DesktopHeader.jsx
@@ -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';
@@ -103,10 +104,11 @@ class DesktopHeader extends React.Component {
       intl,
     } = this.props;
     const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
+    const logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'mw-100' : null;
 
     return (
       <header className="site-header-desktop">
-        <div className="container-fluid">
+        <div className={`container-fluid ${logoClasses}`}>
           <div className="nav-container position-relative d-flex align-items-center">
             {logoDestination === null ? <Logo className="logo" src={logo} alt={logoAltText} /> : <LinkedLogo className="logo" {...logoProps} />}
             <nav
diff --git a/src/MobileHeader.jsx b/src/MobileHeader.jsx
index c465c8c..e8f7f6b 100644
--- a/src/MobileHeader.jsx
+++ b/src/MobileHeader.jsx
@@ -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>
     );
   }
diff --git a/src/__snapshots__/Header.test.jsx.snap b/src/__snapshots__/Header.test.jsx.snap
index e8f79e0..9c47d0b 100644
--- a/src/__snapshots__/Header.test.jsx.snap
+++ b/src/__snapshots__/Header.test.jsx.snap
@@ -5,7 +5,7 @@ exports[`<Header /> renders correctly for anonymous desktop 1`] = `
   className="site-header-desktop"
 >
   <div
-    className="container-fluid"
+    className="container-fluid null"
   >
     <div
       className="nav-container position-relative d-flex align-items-center"
@@ -189,7 +189,7 @@ exports[`<Header /> renders correctly for authenticated desktop 1`] = `
   className="site-header-desktop"
 >
   <div
-    className="container-fluid"
+    className="container-fluid null"
   >
     <div
       className="nav-container position-relative d-flex align-items-center"