fix: logistration hide user menu icon on mobile screens (#84)

VAN-227

.env.development

@@ -13,3 +13,7 @@ REFRESH_ACCESS_TOKEN_ENDPOINT=http://localhost:18000/login_refresh
 SEGMENT_KEY=null
 SITE_NAME=Open edX
 USER_INFO_COOKIE_NAME=edx-user-info
+LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
+LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
+LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
+FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico

.github/workflows/ci.yml

@@ -0,0 +1,26 @@
+name: Default CI
+on: [push, pull_request]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v2
+      with:
+        fetch-depth: 0
+    - name: Setup Nodejs
+      uses: actions/setup-node@v1
+      with:
+        node-version: 12
+    - name: Install dependencies
+      run: npm ci
+    - name: Validate package-lock.json changes
+      run: make validate-no-uncommitted-package-lock-changes
+    - name: Lint
+      run: npm run lint
+    - name: Test
+      run: npm run test
+    - name: i18n_extract
+      run: npm run i18n_extract
+    - name: Coverage
+      uses: codecov/codecov-action@v1

.github/workflows/release.yml

@@ -0,0 +1,37 @@
+name: Release CI
+on:
+  push:
+    branches:
+      - master
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - name: Setup Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - name: Install dependencies
+        run: npm ci
+      - name: Validate package-lock.json changes
+        run: make validate-no-uncommitted-package-lock-changes
+      - name: Lint
+        run: npm run lint
+      - name: Test
+        run: npm run test
+      - name: i18n_extract
+        run: npm run i18n_extract
+      - name: Coverage
+        uses: codecov/codecov-action@v1
+      - name: Build
+        run: npm run build
+      - name: Release
+        env:
+          GITHUB_TOKEN: ${{ secrets.SEMANTIC_RELEASE_GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.SEMANTIC_RELEASE_NPM_TOKEN }}
+        run: npx semantic-release

.gitignore

@@ -5,3 +5,4 @@ dist
 node_modules
 temp
 src/i18n/transifex_input.json
+module.config.js

.travis.yml

@@ -1,17 +0,0 @@
-language: node_js
-node_js: 12
-install:
-- npm install
-script:
-- npm run lint
-- npm run test
-- npm run build
-after_success:
-- npx semantic-release
-- codecov
-env:
-  global:
-  # GH_TOKEN
-  - secure: CFN/uOByWC+7S+AAXECLQ0mNgoiyCDl1ZB5AT5+/qP+xEVs0ysFKDWrD9W8KeQqHqCMPUKNt23nrgxwvFCkSx+n1MAnxZmOdVJWbzGbUB9TsqrwVUALkqof1MrRB8UFVEzIRaO60iRN/L3zVXML+4GsycYX6rHyptbAypxplpljDyKrY8tc/mM7AGZ9eVFGSq+7CXXmdvkhP9kLkH1tIYvR7wjTKvZHbHf6YRjIVCiyzxM4S/E9l8JRnbERp02XosRD62PUJXXk6EJVn6Qoub6CaPnpew5crW0iRF1UJs54U29zWd/S+LuW66WkLfJu7rDq6AFJNMtMNusJxwVkOv4X+p0oJDWZEhojW+/Wm10UAu8/g5oAqeePZEGiSbT3Hp1VqOc4FY/kmOLiM+L6oq/AA2XX6iiE8lA64IH5R8ApQamF4GTUYTvKHeLPgXnGJH7A95Xy9/+jmX9I9wJREMrHrkyPjoX/NTRdG+RrebB1+An9Bt9vAbG862gbOZfgTcuWHDOlG5gcA964Fr7RqR5a62yr45Gw+Q0lTrLj5mGAjjSpMRIAQzi9e7oXmoMZnvenu/WJAe5M+u+/gv82HeXcMwLvNNGSvz+0i1xNUOoX1zHG046oGKiX0Zu+l0JfNwihJTO7vJlaITmjhfOyufwpk74xEyrhf8nLF9e5Frec=
-  # NPM_TOKEN
-  - secure: fuV04Ctf0mgbw6nTJhsTzGZ6dyafZtGVj30ZkvSWsB9hUU8KDtl7wWVW9EayCQsSyyFgPY9RVav5olgC/zljAjDGg0nfF7n8uKIABA0TXdP683WZd06bVOmDXfL26B3yM83aW2xgHZN6VCCvCE8bLP1V6eV8nsr38gDgxVbHa0YasDMmvtYrog+IjxwjcJx7fD0RbYyi7iJC++pdw9kcFqOad28Us7L/jCn+rC3CmUT4kOwPjP5g1v5sB2FA7ouN5s1hUUTKuttV32VJgRP7wbZzoHeHX5BRGSqijdXNSaK5UwzqRnM1sGZkuNDZhJbSB3q90SQrPRgV+fRizwN8zs8Htb+Kk8+wGY6zNhmi9C+lUIv7UpDYbstMWYIf39+P/24Oj+vJBjMY30M9NWB8gt1OQ0dJUoK53v1+BMVmDB0doL6I53xwzUjQetvqOF0Wm3E3OrqJP00OJdzIcAeh2DzcIRW1SrBhI4HAsl7QJZNpRw11QzJ3K2iQSiWNd8qIuX+XJjzQdn1v09gCstvbP33Vn8tP1x0XTSi8wIhTDqE0bII/Sc80Jh76nu0ItQ8pmX4lGsER4C0N3Dp7Zz51yW7E70AWWLsUrMNdF0oHoP437ZRGPhYs5OI6x5AM2jlU8fJ5aUroEsYFCwkH0OO37THohpAQpApe9zL10miTEbw=

example/index.js

@@ -4,8 +4,9 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { initialize, getConfig, subscribe, APP_READY } from '@edx/frontend-platform';
 import { AppContext, AppProvider } from '@edx/frontend-platform/react';
+import Header from '@edx/frontend-component-header';
+
 import './index.scss';
-import Header from '../src/';
 
 subscribe(APP_READY, () => {
   ReactDOM.render(

example/index.scss

@@ -1,2 +1,6 @@
-@import "~@edx/paragon/scss/core/core.scss";
-@import '../src/index.scss';
+@import "@edx/brand/paragon/fonts";
+@import "@edx/brand/paragon/variables";
+@import "@edx/paragon/scss/core/core";
+@import "@edx/brand/paragon/overrides";
+
+@import "@edx/frontend-component-header/index";

package.json

@@ -38,9 +38,10 @@
     "@commitlint/config-angular": "8.2.0",
     "@commitlint/prompt": "8.2.0",
     "@commitlint/prompt-cli": "8.2.0",
-    "@edx/frontend-build": "^2.0.4",
-    "@edx/frontend-platform": "1.1.14",
-    "@edx/paragon": "7.1.5",
+    "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
+    "@edx/frontend-build": "5.4.0",
+    "@edx/frontend-platform": "1.8.0",
+    "@edx/paragon": "12.0.5",
     "codecov": "3.7.2",
     "enzyme": "3.10.0",
     "enzyme-adapter-react-16": "1.14.0",
@@ -48,12 +49,12 @@
     "prop-types": "15.7.2",
     "react": "16.9.0",
     "react-dom": "16.9.0",
-    "react-redux": "^7.1.1",
-    "react-router-dom": "^5.1.2",
+    "react-redux": "7.1.1",
+    "react-router-dom": "5.1.2",
     "react-test-renderer": "16.9.0",
     "reactifex": "1.1.1",
-    "redux": "^4.0.4",
-    "redux-saga": "^1.1.1"
+    "redux": "4.0.4",
+    "redux-saga": "1.1.1"
   },
   "dependencies": {
     "babel-polyfill": "6.26.0",
@@ -61,7 +62,7 @@
     "react-transition-group": "4.3.0"
   },
   "peerDependencies": {
-    "@edx/frontend-platform": "^1.1.4",
+    "@edx/frontend-platform": "^1.8.0",
     "@edx/paragon": "^7.0.0",
     "prop-types": "^15.5.10",
     "react": "^16.9.0",

src/Avatar.jsx

@@ -12,7 +12,7 @@ function Avatar({
   const avatar = src ? (
     <img className="d-block w-100 h-100" src={src} alt={alt} />
   ) : (
-    <AvatarIcon className="text-muted" style={{ width: size, height: size }} role="img" aria-hidden focusable="false" />
+    <AvatarIcon style={{ width: size, height: size }} role="img" aria-hidden focusable="false" />
   );
 
   return (

src/DesktopHeader.jsx

@@ -22,7 +22,9 @@ class DesktopHeader extends React.Component {
     const { mainMenu } = this.props;
 
     // Nodes are accepted as a prop
-    if (!Array.isArray(mainMenu)) return mainMenu;
+    if (!Array.isArray(mainMenu)) {
+      return mainMenu;
+    }
 
     return mainMenu.map((menuItem) => {
       const {
@@ -64,7 +66,7 @@ class DesktopHeader extends React.Component {
         <MenuTrigger
           tag="button"
           aria-label={intl.formatMessage(messages['header.label.account.menu.for'], { username })}
-          className="btn btn-light d-inline-flex align-items-center pl-2 pr-3"
+          className="btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3"
         >
           <Avatar size="1.5em" src={avatar} alt="" className="mr-2" />
           {username} <CaretIcon role="img" aria-hidden focusable="false" />
@@ -106,7 +108,7 @@ class DesktopHeader extends React.Component {
       <header className="site-header-desktop">
         <div className="container-fluid">
           <div className="nav-container position-relative d-flex align-items-center">
-            { logoDestination === null ? <Logo className="logo" src={logo} alt={logoAltText} /> : <LinkedLogo className="logo" {...logoProps} />}
+            {logoDestination === null ? <Logo className="logo" src={logo} alt={logoAltText} /> : <LinkedLogo className="logo" {...logoProps} />}
             <nav
               aria-label={intl.formatMessage(messages['header.label.main.nav'])}
               className="nav main-nav"

src/Header.jsx

@@ -2,13 +2,17 @@ import React, { useContext } from 'react';
 import Responsive from 'react-responsive';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { AppContext } from '@edx/frontend-platform/react';
-import { ensureConfig } from '@edx/frontend-platform/config';
+import {
+  APP_CONFIG_INITIALIZED,
+  ensureConfig,
+  mergeConfig,
+  getConfig,
+  subscribe,
+} from '@edx/frontend-platform';
 
 import DesktopHeader from './DesktopHeader';
 import MobileHeader from './MobileHeader';
 
-import LogoSVG from './logo.svg';
-
 import messages from './Header.messages';
 
 ensureConfig([
@@ -16,8 +20,15 @@ ensureConfig([
   'LOGOUT_URL',
   'LOGIN_URL',
   'SITE_NAME',
+  'LOGO_URL',
 ], 'Header component');
 
+subscribe(APP_CONFIG_INITIALIZED, () => {
+  mergeConfig({
+    LOGISTRATION_MINIMAL_HEADER: !!process.env.LOGISTRATION_MINIMAL_HEADER,
+  }, 'Header additional config');
+});
+
 function Header({ intl }) {
   const { authenticatedUser, config } = useContext(AppContext);
 
@@ -66,27 +77,27 @@ function Header({ intl }) {
   ];
 
   const props = {
-    logo: LogoSVG,
+    logo: config.LOGO_URL,
     logoAltText: config.SITE_NAME,
     siteName: config.SITE_NAME,
     logoDestination: `${config.LMS_BASE_URL}/dashboard`,
     loggedIn: authenticatedUser !== null,
     username: authenticatedUser !== null ? authenticatedUser.username : null,
     avatar: authenticatedUser !== null ? authenticatedUser.avatar : null,
-    mainMenu,
-    userMenu,
-    loggedOutItems,
+    mainMenu: getConfig().LOGISTRATION_MINIMAL_HEADER ? [] : mainMenu,
+    userMenu: getConfig().LOGISTRATION_MINIMAL_HEADER ? [] : userMenu,
+    loggedOutItems: getConfig().LOGISTRATION_MINIMAL_HEADER ? [] : loggedOutItems,
   };
 
   return (
-    <React.Fragment>
+    <>
       <Responsive maxWidth={768}>
         <MobileHeader {...props} />
       </Responsive>
       <Responsive minWidth={769}>
         <DesktopHeader {...props} />
       </Responsive>
-    </React.Fragment>
+    </>
   );
 }
 

src/Header.messages.jsx

@@ -67,7 +67,7 @@ const messages = defineMessages({
     description: 'The aria label for the account menu trigger',
   },
   'header.label.account.menu.for': {
-    id: 'header.label.account.menu',
+    id: 'header.label.account.menu.for',
     defaultMessage: 'Account menu for {username}',
     description: 'The aria label for the account menu trigger when the username is displayed in it',
   },

src/Header.test.jsx

@@ -11,14 +11,16 @@ describe('<Header />', () => {
     const component = (
       <ResponsiveContext.Provider value={{ width: 1280 }}>
         <IntlProvider locale="en" messages={{}}>
-          <AppContext.Provider value={{
-            authenticatedUser: null,
-            config: {
-              LMS_BASE_URL: process.env.LMS_BASE_URL,
-              SITE_NAME: process.env.SITE_NAME,
-              LOGIN_URL: process.env.LOGIN_URL,
-              LOGOUT_URL: process.env.LOGOUT_URL,
-            },
+          <AppContext.Provider
+            value={{
+              authenticatedUser: null,
+              config: {
+                LMS_BASE_URL: process.env.LMS_BASE_URL,
+                SITE_NAME: process.env.SITE_NAME,
+                LOGIN_URL: process.env.LOGIN_URL,
+                LOGOUT_URL: process.env.LOGOUT_URL,
+                LOGO_URL: process.env.LOGO_URL,
+              },
             }}
           >
             <Header />
@@ -36,19 +38,21 @@ describe('<Header />', () => {
     const component = (
       <ResponsiveContext.Provider value={{ width: 1280 }}>
         <IntlProvider locale="en" messages={{}}>
-          <AppContext.Provider value={{
-            authenticatedUser: {
-              userId: 'abc123',
-              username: 'edX',
-              roles: [],
-              administrator: false,
-            },
-            config: {
-              LMS_BASE_URL: process.env.LMS_BASE_URL,
-              SITE_NAME: process.env.SITE_NAME,
-              LOGIN_URL: process.env.LOGIN_URL,
-              LOGOUT_URL: process.env.LOGOUT_URL,
-            },
+          <AppContext.Provider
+            value={{
+              authenticatedUser: {
+                userId: 'abc123',
+                username: 'edX',
+                roles: [],
+                administrator: false,
+              },
+              config: {
+                LMS_BASE_URL: process.env.LMS_BASE_URL,
+                SITE_NAME: process.env.SITE_NAME,
+                LOGIN_URL: process.env.LOGIN_URL,
+                LOGOUT_URL: process.env.LOGOUT_URL,
+                LOGO_URL: process.env.LOGO_URL,
+              },
             }}
           >
             <Header />
@@ -66,14 +70,16 @@ describe('<Header />', () => {
     const component = (
       <ResponsiveContext.Provider value={{ width: 500 }}>
         <IntlProvider locale="en" messages={{}}>
-          <AppContext.Provider value={{
-            authenticatedUser: null,
-            config: {
-              LMS_BASE_URL: process.env.LMS_BASE_URL,
-              SITE_NAME: process.env.SITE_NAME,
-              LOGIN_URL: process.env.LOGIN_URL,
-              LOGOUT_URL: process.env.LOGOUT_URL,
-            },
+          <AppContext.Provider
+            value={{
+              authenticatedUser: null,
+              config: {
+                LMS_BASE_URL: process.env.LMS_BASE_URL,
+                SITE_NAME: process.env.SITE_NAME,
+                LOGIN_URL: process.env.LOGIN_URL,
+                LOGOUT_URL: process.env.LOGOUT_URL,
+                LOGO_URL: process.env.LOGO_URL,
+              },
             }}
           >
             <Header />
@@ -91,19 +97,21 @@ describe('<Header />', () => {
     const component = (
       <ResponsiveContext.Provider value={{ width: 500 }}>
         <IntlProvider locale="en" messages={{}}>
-          <AppContext.Provider value={{
-            authenticatedUser: {
-              userId: 'abc123',
-              username: 'edX',
-              roles: [],
-              administrator: false,
-            },
-            config: {
-              LMS_BASE_URL: process.env.LMS_BASE_URL,
-              SITE_NAME: process.env.SITE_NAME,
-              LOGIN_URL: process.env.LOGIN_URL,
-              LOGOUT_URL: process.env.LOGOUT_URL,
-            },
+          <AppContext.Provider
+            value={{
+              authenticatedUser: {
+                userId: 'abc123',
+                username: 'edX',
+                roles: [],
+                administrator: false,
+              },
+              config: {
+                LMS_BASE_URL: process.env.LMS_BASE_URL,
+                SITE_NAME: process.env.SITE_NAME,
+                LOGIN_URL: process.env.LOGIN_URL,
+                LOGOUT_URL: process.env.LOGOUT_URL,
+                LOGO_URL: process.env.LOGO_URL,
+              },
             }}
           >
             <Header />

src/Logo.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-
 function Logo({ src, alt, ...attributes }) {
   return (
     <img src={src} alt={alt} {...attributes} />

src/Menu/Menu.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { CSSTransition } from 'react-transition-group';
 import PropTypes from 'prop-types';
 
-
 function MenuTrigger({ tag, className, ...attributes }) {
   return React.createElement(tag, {
     className: `menu-trigger ${className}`,
@@ -19,7 +18,6 @@ MenuTrigger.defaultProps = {
 };
 const MenuTriggerType = <MenuTrigger />.type;
 
-
 function MenuContent({ tag, className, ...attributes }) {
   return React.createElement(tag, {
     className: ['menu-content', className].join(' '),
@@ -35,6 +33,17 @@ MenuContent.defaultProps = {
   className: null,
 };
 
+const menuPropTypes = {
+  tag: PropTypes.string,
+  onClose: PropTypes.func,
+  onOpen: PropTypes.func,
+  closeOnDocumentClick: PropTypes.bool,
+  respondToPointerEvents: PropTypes.bool,
+  className: PropTypes.string,
+  transitionTimeout: PropTypes.number,
+  transitionClassName: PropTypes.string,
+  children: PropTypes.arrayOf(PropTypes.node).isRequired,
+};
 
 class Menu extends React.Component {
   constructor(props) {
@@ -66,10 +75,14 @@ class Menu extends React.Component {
 
   // Event handlers
   onDocumentClick(e) {
-    if (!this.props.closeOnDocumentClick) return;
+    if (!this.props.closeOnDocumentClick) {
+      return;
+    }
 
     const clickIsInMenu = this.menu.current === e.target || this.menu.current.contains(e.target);
-    if (clickIsInMenu) return;
+    if (clickIsInMenu) {
+      return;
+    }
 
     this.close();
   }
@@ -77,7 +90,9 @@ class Menu extends React.Component {
   onTriggerClick(e) {
     // Let the browser follow the link of the trigger if the menu
     // is already expanded and the trigger has an href attribute
-    if (this.state.expanded && e.target.getAttribute('href')) return;
+    if (this.state.expanded && e.target.getAttribute('href')) {
+      return;
+    }
 
     e.preventDefault();
     this.toggle();
@@ -89,7 +104,9 @@ class Menu extends React.Component {
   }
 
   onKeyDown(e) {
-    if (!this.state.expanded) return;
+    if (!this.state.expanded) {
+      return;
+    }
     switch (e.key) {
       case 'Escape': {
         e.preventDefault();
@@ -131,16 +148,19 @@ class Menu extends React.Component {
   }
 
   onMouseEnter() {
-    if (!this.props.respondToPointerEvents) return;
+    if (!this.props.respondToPointerEvents) {
+      return;
+    }
     this.open();
   }
 
   onMouseLeave() {
-    if (!this.props.respondToPointerEvents) return;
+    if (!this.props.respondToPointerEvents) {
+      return;
+    }
     this.close();
   }
 
-
   // Internal functions
 
   getFocusableElements() {
@@ -151,7 +171,7 @@ class Menu extends React.Component {
     // Any extra props are attributes for the menu
     const attributes = {};
     Object.keys(this.props)
-      .filter(property => Menu.propTypes[property] === undefined)
+      .filter(property => menuPropTypes[property] === undefined)
       .forEach((property) => {
         attributes[property] = this.props[property];
       });
@@ -173,7 +193,9 @@ class Menu extends React.Component {
   }
 
   open() {
-    if (this.props.onOpen) this.props.onOpen();
+    if (this.props.onOpen) {
+      this.props.onOpen();
+    }
     this.setState({ expanded: true });
     // Listen to touchend and click events to ensure the menu
     // can be closed on mobile, pointer, and mixed input devices
@@ -182,7 +204,9 @@ class Menu extends React.Component {
   }
 
   close() {
-    if (this.props.onClose) this.props.onClose();
+    if (this.props.onClose) {
+      this.props.onClose();
+    }
     this.setState({ expanded: false });
     document.removeEventListener('touchend', this.onDocumentClick, true);
     document.removeEventListener('click', this.onDocumentClick, true);
@@ -240,18 +264,7 @@ class Menu extends React.Component {
   }
 }
 
-
-Menu.propTypes = {
-  tag: PropTypes.string,
-  onClose: PropTypes.func,
-  onOpen: PropTypes.func,
-  closeOnDocumentClick: PropTypes.bool,
-  respondToPointerEvents: PropTypes.bool,
-  className: PropTypes.string,
-  transitionTimeout: PropTypes.number,
-  transitionClassName: PropTypes.string,
-  children: PropTypes.arrayOf(PropTypes.node).isRequired,
-};
+Menu.propTypes = menuPropTypes;
 Menu.defaultProps = {
   tag: 'div',
   className: null,
@@ -263,5 +276,4 @@ Menu.defaultProps = {
   transitionClassName: 'menu-content',
 };
 
-
 export { Menu, MenuTrigger, MenuContent };

src/MobileHeader.jsx

@@ -22,7 +22,9 @@ class MobileHeader extends React.Component {
     const { mainMenu } = this.props;
 
     // Nodes are accepted as a prop
-    if (!Array.isArray(mainMenu)) return mainMenu;
+    if (!Array.isArray(mainMenu)) {
+      return mainMenu;
+    }
 
     return mainMenu.map((menuItem) => {
       const {
@@ -89,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' : '';
@@ -99,7 +103,7 @@ class MobileHeader extends React.Component {
         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 ? (
             <Menu className="position-static">
               <MenuTrigger
                 tag="button"
@@ -116,25 +120,28 @@ class MobileHeader extends React.Component {
               >
                 {this.renderMainMenu()}
               </MenuContent>
-            </Menu> : null }
+            </Menu>
+          ) : null}
         </div>
         <div className="w-100 d-flex justify-content-center">
           { 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>
     );

src/__snapshots__/Header.test.jsx.snap

@@ -17,7 +17,7 @@ exports[`<Header /> renders correctly for anonymous desktop 1`] = `
         <img
           alt="edX"
           className="d-block"
-          src="icon/mock/path"
+          src="https://edx-cdn.org/v3/default/logo.svg"
         />
       </a>
       <nav
@@ -126,7 +126,7 @@ exports[`<Header /> renders correctly for anonymous mobile 1`] = `
       <img
         alt="edX"
         className="d-block"
-        src="icon/mock/path"
+        src="https://edx-cdn.org/v3/default/logo.svg"
       />
     </a>
   </div>
@@ -159,7 +159,6 @@ exports[`<Header /> renders correctly for anonymous mobile 1`] = `
         >
           <svg
             aria-hidden={true}
-            className="text-muted"
             focusable="false"
             height="24px"
             role="img"
@@ -202,7 +201,7 @@ exports[`<Header /> renders correctly for authenticated desktop 1`] = `
         <img
           alt="edX"
           className="d-block"
-          src="icon/mock/path"
+          src="https://edx-cdn.org/v3/default/logo.svg"
         />
       </a>
       <nav
@@ -230,7 +229,7 @@ exports[`<Header /> renders correctly for authenticated desktop 1`] = `
             aria-expanded={false}
             aria-haspopup="menu"
             aria-label="Account menu for edX"
-            className="menu-trigger btn btn-light d-inline-flex align-items-center pl-2 pr-3"
+            className="menu-trigger btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3"
             onClick={[Function]}
           >
             <span
@@ -244,7 +243,6 @@ exports[`<Header /> renders correctly for authenticated desktop 1`] = `
             >
               <svg
                 aria-hidden={true}
-                className="text-muted"
                 focusable="false"
                 height="24px"
                 role="img"
@@ -362,7 +360,7 @@ exports[`<Header /> renders correctly for authenticated mobile 1`] = `
       <img
         alt="edX"
         className="d-block"
-        src="icon/mock/path"
+        src="https://edx-cdn.org/v3/default/logo.svg"
       />
     </a>
   </div>
@@ -395,7 +393,6 @@ exports[`<Header /> renders correctly for authenticated mobile 1`] = `
         >
           <svg
             aria-hidden={true}
-            className="text-muted"
             focusable="false"
             height="24px"
             role="img"

src/index.scss

@@ -32,6 +32,8 @@ $white: #fff;
 }
 
 .site-header-mobile {
+  height: 3rem;
+
   .nav-link {
     text-decoration: none;
     cursor: pointer;
@@ -43,7 +45,6 @@ $white: #fff;
 
 
 .site-header-desktop {
-  height: 3.75rem;
   box-shadow: 0 1px 0 0 rgba(0,0,0,.1);
   background: $white;
   .nav-link {

src/setupTest.js

@@ -23,3 +23,7 @@ process.env.REFRESH_ACCESS_TOKEN_ENDPOINT = 'http://localhost:18000/login_refres
 process.env.SEGMENT_KEY = 'segment_whoa';
 process.env.SITE_NAME = 'edX';
 process.env.USER_INFO_COOKIE_NAME = 'edx-user-info';
+process.env.LOGO_URL = 'https://edx-cdn.org/v3/default/logo.svg';
+process.env.LOGO_TRADEMARK_URL = 'https://edx-cdn.org/v3/default/logo-trademark.svg';
+process.env.LOGO_WHITE_URL = 'https://edx-cdn.org/v3/default/logo-white.svg';
+process.env.FAVICON_URL = 'https://edx-cdn.org/v3/default/favicon.ico';

webpack.dev.config.js

@@ -7,4 +7,9 @@ module.exports = createConfig('webpack-dev', {
     path: path.resolve(__dirname, 'example/dist'),
     publicPath: '/',
   },
+  resolve: {
+    alias: {
+      '@edx/frontend-component-header': path.resolve(__dirname, 'src'),
+    },
+  },
 });