feat: Style desktop and mobile header for account and profile mfe (#10)

* feat: style desktop and mobile header * chore: update indigo footer class * fix: test pass --------- Co-authored-by: “tanveer65” <[email protected]>
edly-io · Apr 8, 2024 · 65b6fe1 · 65b6fe1
1 parent e43ddf1
commit 65b6fe1
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 77 deletions.
diff --git a/src/Header.jsx b/src/Header.jsx
@@ -102,10 +102,10 @@ const Header = ({ intl }) => {
 
   return (
     <>
-      <Responsive maxWidth={768}>
+      <Responsive maxWidth={991}>
         <MobileHeader {...props} />
       </Responsive>
-      <Responsive minWidth={769}>
+      <Responsive minWidth={992}>
         <DesktopHeader {...props} />
       </Responsive>
     </>

diff --git a/src/MobileHeader.jsx b/src/MobileHeader.jsx
@@ -5,7 +5,6 @@ import { getConfig } from '@edx/frontend-platform';
 
 // Local Components
 import { Menu, MenuTrigger, MenuContent } from './Menu';
-import Avatar from './Avatar';
 import { LinkedLogo, Logo } from './Logo';
 
 // i18n
@@ -87,8 +86,6 @@ class MobileHeader extends React.Component {
       logoAltText,
       logoDestination,
       loggedIn,
-      avatar,
-      username,
       stickyOnMobile,
       intl,
       mainMenu,
@@ -106,7 +103,7 @@ class MobileHeader extends React.Component {
       >
         <a className="nav-skip sr-only sr-only-focusable" href="#main">{intl.formatMessage(messages['header.label.skip.nav'])}</a>
         {mainMenu.length > 0 ? (
-          <div className="w-100 d-flex justify-content-start">
+          <div className="w-100 d-flex justify-content-start sr-only">
 
             <Menu className="position-static">
               <MenuTrigger
@@ -127,19 +124,23 @@ class MobileHeader extends React.Component {
             </Menu>
           </div>
         ) : null}
-        <div className={`w-100 d-flex ${logoClasses}`}>
+        <div className={`logo-holder ${logoClasses}`}>
           { logoDestination === null ? <Logo className="logo" src={logo} alt={logoAltText} /> : <LinkedLogo className="logo" {...logoProps} itemType="http://schema.org/Organization" />}
         </div>
         {userMenu.length > 0 || loggedOutItems.length > 0 ? (
-          <div className="w-100 d-flex justify-content-end align-items-center">
+          <div className="mobile-menu">
             <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} />
+                <div className="hamburger-menu">
+                  <span className="line" />
+                  <span className="line" />
+                  <span className="line" />
+                  <span className="line" />
+                </div>
               </MenuTrigger>
               <MenuContent tag="ul" className="nav flex-column pin-left pin-right border-top shadow py-2">
                 {loggedIn ? this.renderUserMenuItems() : this.renderLoggedOutItems()}

diff --git a/src/__snapshots__/Header.test.jsx.snap b/src/__snapshots__/Header.test.jsx.snap
@@ -71,7 +71,7 @@ exports[`<Header /> renders correctly for anonymous mobile 1`] = `
     Skip to main content
   </a>
   <div
-    className="w-100 d-flex justify-content-start"
+    className="w-100 d-flex justify-content-start sr-only"
   >
     <div
       className="menu position-static"
@@ -128,7 +128,7 @@ exports[`<Header /> renders correctly for anonymous mobile 1`] = `
     </div>
   </div>
   <div
-    className="w-100 d-flex justify-content-center"
+    className="logo-holder justify-content-center"
   >
     <a
       className="logo"
@@ -143,7 +143,7 @@ exports[`<Header /> renders correctly for anonymous mobile 1`] = `
     </a>
   </div>
   <div
-    className="w-100 d-flex justify-content-end align-items-center"
+    className="mobile-menu"
   >
     <nav
       aria-label="Secondary"
@@ -156,40 +156,26 @@ exports[`<Header /> renders correctly for anonymous mobile 1`] = `
         aria-expanded={false}
         aria-haspopup="menu"
         aria-label="Account Menu"
-        className="menu-trigger icon-button"
+        className="menu-trigger null"
         onClick={[Function]}
         title="Account Menu"
       >
-        <span
-          className="avatar overflow-hidden d-inline-flex rounded-circle null"
-          style={
-            Object {
-              "height": "1.5rem",
-              "width": "1.5rem",
-            }
-          }
+        <div
+          className="hamburger-menu"
         >
-          <svg
-            aria-hidden={true}
-            focusable="false"
-            height="24px"
-            role="img"
-            style={
-              Object {
-                "height": "1.5rem",
-                "width": "1.5rem",
-              }
-            }
-            version="1.1"
-            viewBox="0 0 24 24"
-            width="24px"
-          >
-            <path
-              d="M4.10255106,18.1351061 C4.7170266,16.0581859 8.01891846,14.4720277 12,14.4720277 C15.9810815,14.4720277 19.2829734,16.0581859 19.8974489,18.1351061 C21.215206,16.4412566 22,14.3122775 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,14.3122775 2.78479405,16.4412566 4.10255106,18.1351061 Z M12,24 C5.372583,24 0,18.627417 0,12 C0,5.372583 5.372583,0 12,0 C18.627417,0 24,5.372583 24,12 C24,18.627417 18.627417,24 12,24 Z M12,13 C9.790861,13 8,11.209139 8,9 C8,6.790861 9.790861,5 12,5 C14.209139,5 16,6.790861 16,9 C16,11.209139 14.209139,13 12,13 Z"
-              fill="currentColor"
-            />
-          </svg>
-        </span>
+          <span
+            className="line"
+          />
+          <span
+            className="line"
+          />
+          <span
+            className="line"
+          />
+          <span
+            className="line"
+          />
+        </div>
       </button>
     </nav>
   </div>
@@ -317,7 +303,7 @@ exports[`<Header /> renders correctly for authenticated mobile 1`] = `
     Skip to main content
   </a>
   <div
-    className="w-100 d-flex justify-content-start"
+    className="w-100 d-flex justify-content-start sr-only"
   >
     <div
       className="menu position-static"
@@ -374,7 +360,7 @@ exports[`<Header /> renders correctly for authenticated mobile 1`] = `
     </div>
   </div>
   <div
-    className="w-100 d-flex justify-content-center"
+    className="logo-holder justify-content-center"
   >
     <a
       className="logo"
@@ -389,7 +375,7 @@ exports[`<Header /> renders correctly for authenticated mobile 1`] = `
     </a>
   </div>
   <div
-    className="w-100 d-flex justify-content-end align-items-center"
+    className="mobile-menu"
   >
     <nav
       aria-label="Secondary"
@@ -402,40 +388,26 @@ exports[`<Header /> renders correctly for authenticated mobile 1`] = `
         aria-expanded={false}
         aria-haspopup="menu"
         aria-label="Account Menu"
-        className="menu-trigger icon-button"
+        className="menu-trigger null"
         onClick={[Function]}
         title="Account Menu"
       >
-        <span
-          className="avatar overflow-hidden d-inline-flex rounded-circle null"
-          style={
-            Object {
-              "height": "1.5rem",
-              "width": "1.5rem",
-            }
-          }
+        <div
+          className="hamburger-menu"
         >
-          <svg
-            aria-hidden={true}
-            focusable="false"
-            height="24px"
-            role="img"
-            style={
-              Object {
-                "height": "1.5rem",
-                "width": "1.5rem",
-              }
-            }
-            version="1.1"
-            viewBox="0 0 24 24"
-            width="24px"
-          >
-            <path
-              d="M4.10255106,18.1351061 C4.7170266,16.0581859 8.01891846,14.4720277 12,14.4720277 C15.9810815,14.4720277 19.2829734,16.0581859 19.8974489,18.1351061 C21.215206,16.4412566 22,14.3122775 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,14.3122775 2.78479405,16.4412566 4.10255106,18.1351061 Z M12,24 C5.372583,24 0,18.627417 0,12 C0,5.372583 5.372583,0 12,0 C18.627417,0 24,5.372583 24,12 C24,18.627417 18.627417,24 12,24 Z M12,13 C9.790861,13 8,11.209139 8,9 C8,6.790861 9.790861,5 12,5 C14.209139,5 16,6.790861 16,9 C16,11.209139 14.209139,13 12,13 Z"
-              fill="currentColor"
-            />
-          </svg>
-        </span>
+          <span
+            className="line"
+          />
+          <span
+            className="line"
+          />
+          <span
+            className="line"
+          />
+          <span
+            className="line"
+          />
+        </div>
       </button>
     </nav>
   </div>

diff --git a/src/learning-header/LearningHeader.jsx b/src/learning-header/LearningHeader.jsx
@@ -40,7 +40,7 @@ const LearningHeader = ({
   );
 
   return (
-    <header className="learning-header">
+    <header className="learning-header customise">
       <a className="sr-only sr-only-focusable" href="#main-content">{intl.formatMessage(messages.skipNavLink)}</a>
       <div className="container-xl py-2 d-flex align-items-center">
         {headerLogo}