fix: initial commit

src/Avatar.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { AvatarIcon } from './Icons';
+
+function Avatar({
+  size,
+  src,
+  alt,
+  className,
+}) {
+  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" />
+  );
+
+  return (
+    <span
+      style={{ height: size, width: size }}
+      className={`avatar overflow-hidden d-inline-flex rounded-circle ${className}`}
+    >
+      {avatar}
+    </span>
+  );
+}
+
+Avatar.propTypes = {
+  src: PropTypes.string,
+  size: PropTypes.string,
+  alt: PropTypes.string,
+  className: PropTypes.string,
+};
+
+Avatar.defaultProps = {
+  src: null,
+  size: '2rem',
+  alt: null,
+  className: null,
+};
+
+export default Avatar;

src/DesktopHeader.jsx

@@ -0,0 +1,167 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape } from '@edx/frontend-i18n';
+
+// Local Components
+import { Menu, MenuTrigger, MenuContent } from './Menu';
+import Avatar from './Avatar';
+import { LinkedLogo, Logo } from './Logo';
+
+// i18n
+import messages from './SiteHeader.messages';
+
+// Assets
+import { CaretIcon } from './Icons';
+
+class DesktopHeader extends React.Component {
+  constructor(props) { // eslint-disable-line no-useless-constructor
+    super(props);
+  }
+
+  renderMainMenu() {
+    const { mainMenu } = this.props;
+
+    // Nodes are accepted as a prop
+    if (!Array.isArray(mainMenu)) return mainMenu;
+
+    return mainMenu.map((menuItem) => {
+      const {
+        type,
+        href,
+        content,
+        submenuContent,
+      } = menuItem;
+
+      if (type === 'item') {
+        return (
+          <a key={`${type}-${content}`} className="nav-link" href={href}>{content}</a>
+        );
+      }
+
+      return (
+        <Menu key={`${type}-${content}`} tag="div" className="nav-item" respondToPointerEvents>
+          <MenuTrigger tag="a" className="nav-link d-inline-flex align-items-center" href={href}>
+            {content} <CaretIcon role="img" aria-hidden focusable="false" />
+          </MenuTrigger>
+          <MenuContent className="pin-left pin-right shadow py-2">
+            {submenuContent}
+          </MenuContent>
+        </Menu>
+      );
+    });
+  }
+
+  renderUserMenu() {
+    const {
+      userMenu,
+      avatar,
+      username,
+      intl,
+    } = this.props;
+
+    return (
+      <Menu transitionClassName="menu-dropdown" transitionTimeout={250}>
+        <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"
+        >
+          <Avatar size="1.5em" src={avatar} alt="" className="mr-2" />
+          {username} <CaretIcon role="img" aria-hidden focusable="false" />
+        </MenuTrigger>
+        <MenuContent className="mb-0 dropdown-menu show dropdown-menu-right pin-right shadow py-2">
+          {userMenu.map(({ type, href, content }) => (
+            <a className={`dropdown-${type}`} key={`${type}-${content}`} href={href}>{content}</a>
+          ))}
+        </MenuContent>
+      </Menu>
+    );
+  }
+
+  renderLoggedOutItems() {
+    const { loggedOutItems } = this.props;
+
+    return loggedOutItems.map((item, i, arr) => (
+      <a
+        key={`${item.type}-${item.content}`}
+        className={i < arr.length - 1 ? 'btn mr-2 btn-link' : 'btn mr-2 btn-outline-primary'}
+        href={item.href}
+      >
+        {item.content}
+      </a>
+    ));
+  }
+
+  render() {
+    const {
+      logo,
+      logoAltText,
+      logoDestination,
+      loggedIn,
+      intl,
+    } = this.props;
+    const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
+
+    return (
+      <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} />}
+            <nav
+              aria-label={intl.formatMessage(messages['header.label.main.nav'])}
+              className="nav main-nav"
+            >
+              {this.renderMainMenu()}
+            </nav>
+            <nav
+              aria-label={intl.formatMessage(messages['header.label.secondary.nav'])}
+              className="nav secondary-menu-container align-items-center ml-auto"
+            >
+              {loggedIn ? this.renderUserMenu() : this.renderLoggedOutItems()}
+            </nav>
+          </div>
+        </div>
+      </header>
+    );
+  }
+}
+
+DesktopHeader.propTypes = {
+  mainMenu: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.array,
+  ]),
+  userMenu: PropTypes.arrayOf(PropTypes.shape({
+    type: PropTypes.oneOf(['item', 'menu']),
+    href: PropTypes.string,
+    content: PropTypes.string,
+  })),
+  loggedOutItems: PropTypes.arrayOf(PropTypes.shape({
+    type: PropTypes.oneOf(['item', 'menu']),
+    href: PropTypes.string,
+    content: PropTypes.string,
+  })),
+  logo: PropTypes.string,
+  logoAltText: PropTypes.string,
+  logoDestination: PropTypes.string,
+  avatar: PropTypes.string,
+  username: PropTypes.string,
+  loggedIn: PropTypes.bool,
+
+  // i18n
+  intl: intlShape.isRequired,
+};
+
+DesktopHeader.defaultProps = {
+  mainMenu: [],
+  userMenu: [],
+  loggedOutItems: [],
+  logo: null,
+  logoAltText: null,
+  logoDestination: null,
+  avatar: null,
+  username: null,
+  loggedIn: false,
+};
+
+export default injectIntl(DesktopHeader);

src/Icons.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+export const MenuIcon = props => (
+  <svg
+    width="24px"
+    height="24px"
+    viewBox="0 0 24 24"
+    version="1.1"
+    {...props}
+  >
+    <rect fill="currentColor" x="2" y="5" width="20" height="2" />
+    <rect fill="currentColor" x="2" y="11" width="20" height="2" />
+    <rect fill="currentColor" x="2" y="17" width="20" height="2" />
+  </svg>
+);
+
+export const AvatarIcon = props => (
+  <svg
+    width="24px"
+    height="24px"
+    viewBox="0 0 24 24"
+    version="1.1"
+    {...props}
+  >
+    <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>
+);
+
+export const CaretIcon = props => (
+  <svg
+    width="16px"
+    height="16px"
+    viewBox="0 0 16 16"
+    version="1.1"
+    {...props}
+  >
+    <path
+      d="M7,4 L7,8 L11,8 L11,10 L5,10 L5,4 L7,4 Z"
+      fill="currentColor"
+      transform="translate(8.000000, 7.000000) rotate(-45.000000) translate(-8.000000, -7.000000) "
+    />
+  </svg>
+);

src/Logo.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+
+function Logo({ src, alt, ...attributes }) {
+  return (
+    <img src={src} alt={alt} {...attributes} />
+  );
+}
+
+Logo.propTypes = {
+  src: PropTypes.string.isRequired,
+  alt: PropTypes.string.isRequired,
+};
+
+function LinkedLogo({
+  href,
+  src,
+  alt,
+  ...attributes
+}) {
+  return (
+    <a href={href} {...attributes}>
+      <img className="d-block" src={src} alt={alt} />
+    </a>
+  );
+}
+
+LinkedLogo.propTypes = {
+  href: PropTypes.string.isRequired,
+  src: PropTypes.string.isRequired,
+  alt: PropTypes.string.isRequired,
+};
+
+export { LinkedLogo, Logo };
+export default Logo;

src/Menu/Menu.jsx

@@ -0,0 +1,267 @@
+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}`,
+    ...attributes,
+  });
+}
+MenuTrigger.propTypes = {
+  tag: PropTypes.string,
+  className: PropTypes.string,
+};
+MenuTrigger.defaultProps = {
+  tag: 'div',
+  className: null,
+};
+const MenuTriggerType = <MenuTrigger />.type;
+
+
+function MenuContent({ tag, className, ...attributes }) {
+  return React.createElement(tag, {
+    className: ['menu-content', className].join(' '),
+    ...attributes,
+  });
+}
+MenuContent.propTypes = {
+  tag: PropTypes.string,
+  className: PropTypes.string,
+};
+MenuContent.defaultProps = {
+  tag: 'div',
+  className: null,
+};
+
+
+class Menu extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.menu = React.createRef();
+    this.state = {
+      expanded: false,
+    };
+
+    this.onTriggerClick = this.onTriggerClick.bind(this);
+    this.onCloseClick = this.onCloseClick.bind(this);
+    this.onKeyDown = this.onKeyDown.bind(this);
+    this.onDocumentClick = this.onDocumentClick.bind(this);
+    this.onMouseEnter = this.onMouseEnter.bind(this);
+    this.onMouseLeave = this.onMouseLeave.bind(this);
+  }
+
+  // Lifecycle Events
+  componentWillUnmount() {
+    document.removeEventListener('touchend', this.onDocumentClick, true);
+    document.removeEventListener('click', this.onDocumentClick, true);
+
+    // Call onClose callback when unmounting and open
+    if (this.state.expanded && this.props.onClose) {
+      this.props.onClose();
+    }
+  }
+
+  // Event handlers
+  onDocumentClick(e) {
+    if (!this.props.closeOnDocumentClick) return;
+
+    const clickIsInMenu = this.menu.current === e.target || this.menu.current.contains(e.target);
+    if (clickIsInMenu) return;
+
+    this.close();
+  }
+
+  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;
+
+    e.preventDefault();
+    this.toggle();
+  }
+
+  onCloseClick() {
+    this.getFocusableElements()[0].focus();
+    this.close();
+  }
+
+  onKeyDown(e) {
+    if (!this.state.expanded) return;
+    switch (e.key) {
+      case 'Escape': {
+        e.preventDefault();
+        e.stopPropagation();
+        this.getFocusableElements()[0].focus();
+        this.close();
+        break;
+      }
+      case 'Enter': {
+        // Using focusable elements instead of a ref to the trigger
+        // because Hyperlink and Button can handle refs as functional components
+        if (document.activeElement === this.getFocusableElements()[0]) {
+          e.preventDefault();
+          this.toggle();
+        }
+        break;
+      }
+      case 'Tab': {
+        e.preventDefault();
+        if (e.shiftKey) {
+          this.focusPrevious();
+        } else {
+          this.focusNext();
+        }
+        break;
+      }
+      case 'ArrowDown': {
+        e.preventDefault();
+        this.focusNext();
+        break;
+      }
+      case 'ArrowUp': {
+        e.preventDefault();
+        this.focusPrevious();
+        break;
+      }
+      default:
+    }
+  }
+
+  onMouseEnter() {
+    if (!this.props.respondToPointerEvents) return;
+    this.open();
+  }
+
+  onMouseLeave() {
+    if (!this.props.respondToPointerEvents) return;
+    this.close();
+  }
+
+
+  // Internal functions
+
+  getFocusableElements() {
+    return this.menu.current.querySelectorAll('button:not([disabled]), [href]:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled])');
+  }
+
+  getAttributesFromProps() {
+    // Any extra props are attributes for the menu
+    const attributes = {};
+    Object.keys(this.props)
+      .filter(property => Menu.propTypes[property] === undefined)
+      .forEach((property) => {
+        attributes[property] = this.props[property];
+      });
+    return attributes;
+  }
+
+  focusNext() {
+    const focusableElements = Array.from(this.getFocusableElements());
+    const activeIndex = focusableElements.indexOf(document.activeElement);
+    const nextIndex = (activeIndex + 1) % focusableElements.length;
+    focusableElements[nextIndex].focus();
+  }
+
+  focusPrevious() {
+    const focusableElements = Array.from(this.getFocusableElements());
+    const activeIndex = focusableElements.indexOf(document.activeElement);
+    const previousIndex = (activeIndex || focusableElements.length) - 1;
+    focusableElements[previousIndex].focus();
+  }
+
+  open() {
+    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
+    document.addEventListener('touchend', this.onDocumentClick, true);
+    document.addEventListener('click', this.onDocumentClick, true);
+  }
+
+  close() {
+    if (this.props.onClose) this.props.onClose();
+    this.setState({ expanded: false });
+    document.removeEventListener('touchend', this.onDocumentClick, true);
+    document.removeEventListener('click', this.onDocumentClick, true);
+  }
+
+  toggle() {
+    if (this.state.expanded) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+
+  renderTrigger(node) {
+    return React.cloneElement(node, {
+      onClick: this.onTriggerClick,
+      'aria-haspopup': 'menu',
+      'aria-expanded': this.state.expanded,
+    });
+  }
+
+  renderMenuContent(node) {
+    return (
+      <CSSTransition
+        in={this.state.expanded}
+        timeout={this.props.transitionTimeout}
+        classNames={this.props.transitionClassName}
+        unmountOnExit
+      >
+        {node}
+      </CSSTransition>
+    );
+  }
+
+  render() {
+    const { className } = this.props;
+
+    const wrappedChildren = React.Children.map(this.props.children, (child) => {
+      if (child.type === MenuTriggerType) {
+        return this.renderTrigger(child);
+      }
+      return this.renderMenuContent(child);
+    });
+
+    const rootClassName = this.state.expanded ? 'menu expanded' : 'menu';
+
+    return React.createElement(this.props.tag, {
+      className: `${rootClassName} ${className}`,
+      ref: this.menu,
+      onKeyDown: this.onKeyDown,
+      onMouseEnter: this.onMouseEnter,
+      onMouseLeave: this.onMouseLeave,
+      ...this.getAttributesFromProps(),
+    }, wrappedChildren);
+  }
+}
+
+
+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.defaultProps = {
+  tag: 'div',
+  className: null,
+  onClose: null,
+  onOpen: null,
+  respondToPointerEvents: false,
+  closeOnDocumentClick: true,
+  transitionTimeout: 250,
+  transitionClassName: 'menu-content',
+};
+
+
+export { Menu, MenuTrigger, MenuContent };

src/Menu/index.jsx

@@ -0,0 +1,3 @@
+import { Menu, MenuTrigger, MenuContent } from './Menu';
+
+export { Menu, MenuTrigger, MenuContent };

src/Menu/menu.scss

@@ -0,0 +1,45 @@
+.menu {
+  position: relative;
+}
+.menu-content {
+  position: absolute;
+  top: 100%;
+  z-index: 10;
+  background: #fff;
+  min-width: 10rem;
+  &.pin-left {
+    left: 0;
+  }
+  &.pin-right {
+    right: 0;
+  }
+}
+
+
+.menu-dropdown-enter {
+  opacity: 0;
+  transform-origin: 75% 0;
+  transform: scale3d(0.8, 0.8, 1);
+}
+.menu-dropdown-enter-active {
+  transform-origin: 75% 0;
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  transform: scale3d(1, 1, 1);
+  opacity: 1;
+}
+.menu-dropdown-enter-done {
+}
+
+.menu-dropdown-exit {
+  transform-origin: 75% 0;
+  transform: scale3d(1, 1, 1);
+  opacity: 1;
+}
+.menu-dropdown-exit-active {
+  transform-origin: 75% 0;
+  transform: scale3d(0.8, 0.8, 1);
+  transition: all 250ms cubic-bezier(0.8, 0, 0.6, 1);
+  opacity: 0;
+}
+.menu-dropdown-exit-done {
+}

src/MobileHeader.jsx

@@ -0,0 +1,186 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape } from '@edx/frontend-i18n';
+
+// Local Components
+import { Menu, MenuTrigger, MenuContent } from './Menu';
+import Avatar from './Avatar';
+import { LinkedLogo, Logo } from './Logo';
+
+// i18n
+import messages from './SiteHeader.messages';
+
+// Assets
+import { MenuIcon } from './Icons';
+
+class MobileHeader extends React.Component {
+  constructor(props) { // eslint-disable-line no-useless-constructor
+    super(props);
+  }
+
+  renderMainMenu() {
+    const { mainMenu } = this.props;
+
+    // Nodes are accepted as a prop
+    if (!Array.isArray(mainMenu)) return mainMenu;
+
+    return mainMenu.map((menuItem) => {
+      const {
+        type,
+        href,
+        content,
+        submenuContent,
+      } = menuItem;
+
+      if (type === 'item') {
+        return (
+          <a key={`${type}-${content}`} className="nav-link" href={href}>
+            {content}
+          </a>
+        );
+      }
+
+      return (
+        <Menu key={`${type}-${content}`} tag="div" className="nav-item">
+          <MenuTrigger tag="a" role="button" tabIndex="0" className="nav-link">
+            {content}
+          </MenuTrigger>
+          <MenuContent className="position-static pin-left pin-right py-2">
+            {submenuContent}
+          </MenuContent>
+        </Menu>
+      );
+    });
+  }
+
+  renderUserMenuItems() {
+    const { userMenu } = this.props;
+
+    return userMenu.map(({ type, href, content }) => (
+      <li className="nav-item" key={`${type}-${content}`}>
+        <a className="nav-link" href={href}>{content}</a>
+      </li>
+    ));
+  }
+
+  renderLoggedOutItems() {
+    const { loggedOutItems } = this.props;
+
+    return loggedOutItems.map(({ type, href, content }, i, arr) => (
+      <li className="nav-item px-3 my-2" key={`${type}-${content}`}>
+        <a
+          className={i < arr.length - 1 ? 'btn btn-block btn-outline-primary' : 'btn btn-block btn-primary'}
+          href={href}
+        >
+          {content}
+        </a>
+      </li>
+    ));
+  }
+
+  render() {
+    const {
+      logo,
+      logoAltText,
+      logoDestination,
+      loggedIn,
+      avatar,
+      username,
+      stickyOnMobile,
+      intl,
+      mainMenu,
+    } = this.props;
+    const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
+    const stickyClassName = stickyOnMobile ? 'sticky-top' : '';
+
+    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 ?
+            <Menu className="position-static">
+              <MenuTrigger
+                tag="button"
+                className="icon-button"
+                aria-label={intl.formatMessage(messages['header.label.main.menu'])}
+                title={intl.formatMessage(messages['header.label.main.menu'])}
+              >
+                <MenuIcon role="img" aria-hidden focusable="false" style={{ width: '1.5rem', height: '1.5rem' }} />
+              </MenuTrigger>
+              <MenuContent
+                tag="nav"
+                aria-label={intl.formatMessage(messages['header.label.main.nav'])}
+                className="nav flex-column pin-left pin-right border-top shadow py-2"
+              >
+                {this.renderMainMenu()}
+              </MenuContent>
+            </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>
+        </div>
+      </header>
+    );
+  }
+}
+
+MobileHeader.propTypes = {
+  mainMenu: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.array,
+  ]),
+
+  userMenu: PropTypes.arrayOf(PropTypes.shape({
+    type: PropTypes.oneOf(['item', 'menu']),
+    href: PropTypes.string,
+    content: PropTypes.string,
+  })),
+  loggedOutItems: PropTypes.arrayOf(PropTypes.shape({
+    type: PropTypes.oneOf(['item', 'menu']),
+    href: PropTypes.string,
+    content: PropTypes.string,
+  })),
+  logo: PropTypes.string,
+  logoAltText: PropTypes.string,
+  logoDestination: PropTypes.string,
+  avatar: PropTypes.string,
+  username: PropTypes.string,
+  loggedIn: PropTypes.bool,
+  stickyOnMobile: PropTypes.bool,
+
+  // i18n
+  intl: intlShape.isRequired,
+};
+
+MobileHeader.defaultProps = {
+  mainMenu: [],
+  userMenu: [],
+  loggedOutItems: [],
+  logo: null,
+  logoAltText: null,
+  logoDestination: null,
+  avatar: null,
+  username: null,
+  loggedIn: false,
+  stickyOnMobile: true,
+
+};
+
+export default injectIntl(MobileHeader);

src/SiteHeader.jsx

@@ -0,0 +1,103 @@
+import React, { useContext } from 'react';
+import Responsive from 'react-responsive';
+import { injectIntl, intlShape } from '@edx/frontend-i18n';
+import { App, AuthenticationContext } from '@edx/frontend-base';
+
+import DesktopHeader from './DesktopHeader';
+import MobileHeader from './MobileHeader';
+
+import LogoSVG from './logo.svg';
+
+import messages from './SiteHeader.messages';
+
+App.requireConfig([
+  'LMS_BASE_URL',
+  'LOGOUT_URL',
+  'LOGIN_URL',
+  'SITE_NAME',
+], 'Header component');
+
+const {
+  LMS_BASE_URL,
+  LOGOUT_URL,
+  LOGIN_URL,
+  SITE_NAME,
+} = App.config;
+
+function SiteHeader({ intl }) {
+  const { username, avatar } = useContext(AuthenticationContext);
+
+  const mainMenu = [
+    {
+      type: 'item',
+      href: `${LMS_BASE_URL}/dashboard`,
+      content: intl.formatMessage(messages['header.links.courses']),
+    },
+  ];
+
+  const userMenu = [
+    {
+      type: 'item',
+      href: `${LMS_BASE_URL}/dashboard`,
+      content: intl.formatMessage(messages['header.user.menu.dashboard']),
+    },
+    {
+      type: 'item',
+      href: `${LMS_BASE_URL}/u/${username}`,
+      content: intl.formatMessage(messages['header.user.menu.profile']),
+    },
+    {
+      type: 'item',
+      href: `${LMS_BASE_URL}/account/settings`,
+      content: intl.formatMessage(messages['header.user.menu.account.settings']),
+    },
+    {
+      type: 'item',
+      href: LOGOUT_URL,
+      content: intl.formatMessage(messages['header.user.menu.logout']),
+    },
+  ];
+
+  const loggedOutItems = [
+    {
+      type: 'item',
+      href: LOGIN_URL,
+      content: intl.formatMessage(messages['header.user.menu.login']),
+    },
+    {
+      type: 'item',
+      href: `${LMS_BASE_URL}/register`,
+      content: intl.formatMessage(messages['header.user.menu.register']),
+    },
+  ];
+
+  const props = {
+    logo: LogoSVG,
+    logoAltText: SITE_NAME,
+    siteName: SITE_NAME,
+    logoDestination: `${LMS_BASE_URL}/dashboard`,
+    loggedIn: !!username,
+    username,
+    avatar,
+    mainMenu,
+    userMenu,
+    loggedOutItems,
+  };
+
+  return (
+    <React.Fragment>
+      <Responsive maxWidth={768}>
+        <MobileHeader {...props} />
+      </Responsive>
+      <Responsive minWidth={769}>
+        <DesktopHeader {...props} />
+      </Responsive>
+    </React.Fragment>
+  );
+}
+
+SiteHeader.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(SiteHeader);

src/SiteHeader.messages.jsx

@@ -0,0 +1,96 @@
+import { defineMessages } from '@edx/frontend-i18n';
+
+const messages = defineMessages({
+  'header.links.courses': {
+    id: 'header.links.courses',
+    defaultMessage: 'Courses',
+    description: 'Link to the learner course dashboard',
+  },
+  'header.links.programs': {
+    id: 'header.links.programs',
+    defaultMessage: 'Programs',
+    description: 'Link to the learner program dashboard',
+  },
+  'header.links.content.search': {
+    id: 'header.links.content.search',
+    defaultMessage: 'Discover New',
+    description: 'Link to the content search page',
+  },
+  'header.links.schools': {
+    id: 'header.links.schools',
+    defaultMessage: 'Schools & Partners',
+    description: 'Link to the schools and partners landing page',
+  },
+  'header.user.menu.dashboard': {
+    id: 'header.user.menu.dashboard',
+    defaultMessage: 'Dashboard',
+    description: 'Link to the user dashboard',
+  },
+  'header.user.menu.profile': {
+    id: 'header.user.menu.profile',
+    defaultMessage: 'Profile',
+    description: 'Link to the user profile',
+  },
+  'header.user.menu.account.settings': {
+    id: 'header.user.menu.account.settings',
+    defaultMessage: 'Account',
+    description: 'Link to account settings',
+  },
+  'header.user.menu.order.history': {
+    id: 'header.user.menu.order.history',
+    defaultMessage: 'Order History',
+    description: 'Link to order history',
+  },
+  'header.user.menu.logout': {
+    id: 'header.user.menu.logout',
+    defaultMessage: 'Logout',
+    description: 'Logout link',
+  },
+  'header.user.menu.login': {
+    id: 'header.user.menu.login',
+    defaultMessage: 'Login',
+    description: 'Login link',
+  },
+  'header.user.menu.register': {
+    id: 'header.user.menu.register',
+    defaultMessage: 'Sign Up',
+    description: 'Link to registration',
+  },
+  'header.label.account.nav': {
+    id: 'header.label.account.nav',
+    defaultMessage: 'Account',
+    description: 'The aria label for the account menu nav',
+  },
+  'header.label.account.menu': {
+    id: 'header.label.account.menu',
+    defaultMessage: 'Account Menu',
+    description: 'The aria label for the account menu trigger',
+  },
+  'header.label.account.menu.for': {
+    id: 'header.label.account.menu',
+    defaultMessage: 'Account menu for {username}',
+    description: 'The aria label for the account menu trigger when the username is displayed in it',
+  },
+  'header.label.main.nav': {
+    id: 'header.label.main.nav',
+    defaultMessage: 'Main',
+    description: 'The aria label for the main menu nav',
+  },
+  'header.label.main.menu': {
+    id: 'header.label.main.menu',
+    defaultMessage: 'Main Menu',
+    description: 'The aria label for the main menu trigger',
+  },
+  'header.label.main.header': {
+    id: 'header.label.main.header',
+    defaultMessage: 'Main',
+    description: 'The aria label for the main header',
+  },
+  'header.label.secondary.nav': {
+    id: 'header.label.secondary.nav',
+    defaultMessage: 'Secondary',
+    description: 'The aria label for the seconary nav',
+  },
+});
+
+export default messages;

src/SiteHeader.test.jsx

@@ -0,0 +1,54 @@
+
+import React from 'react';
+import { IntlProvider } from '@edx/frontend-i18n';
+import TestRenderer from 'react-test-renderer';
+import { AuthenticationContext } from '@edx/frontend-base';
+import { Context as ResponsiveContext } from 'react-responsive';
+
+import SiteHeader from './index';
+
+describe('<SiteHeader />', () => {
+  it('renders correctly for desktop', () => {
+    const component = (
+      <ResponsiveContext.Provider value={{ width: 1280 }}>
+        <IntlProvider locale="en" messages={{}}>
+          <AuthenticationContext.Provider
+            value={{
+              userId: null,
+              username: null,
+              administrator: false,
+            }}
+          >
+            <SiteHeader />
+          </AuthenticationContext.Provider>
+        </IntlProvider>
+      </ResponsiveContext.Provider>
+    );
+
+    const wrapper = TestRenderer.create(component);
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly for mobile', () => {
+    const component = (
+      <ResponsiveContext.Provider value={{ width: 500 }}>
+        <IntlProvider locale="en" messages={{}}>
+          <AuthenticationContext.Provider
+            value={{
+              userId: null,
+              username: null,
+              administrator: false,
+            }}
+          >
+            <SiteHeader />
+          </AuthenticationContext.Provider>
+        </IntlProvider>
+      </ResponsiveContext.Provider>
+    );
+
+    const wrapper = TestRenderer.create(component);
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+});

src/__mocks__/fileMock.js

@@ -0,0 +1,3 @@
+// __mocks__/fileMock.js
+
+module.exports = 'test-file-stub';

src/__snapshots__/SiteHeader.test.jsx.snap

@@ -0,0 +1,186 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SiteHeader /> renders correctly for desktop 1`] = `
+<header
+  className="site-header-desktop"
+>
+  <div
+    className="container-fluid"
+  >
+    <div
+      className="nav-container position-relative d-flex align-items-center"
+    >
+      <a
+        className="logo"
+        href="http://localhost:18000/dashboard"
+      >
+        <img
+          alt="edX"
+          className="d-block"
+          src="test-file-stub"
+        />
+      </a>
+      <nav
+        aria-label="Main"
+        className="nav main-nav"
+      >
+        <a
+          className="nav-link"
+          href="http://localhost:18000/dashboard"
+        >
+          Courses
+        </a>
+      </nav>
+      <nav
+        aria-label="Secondary"
+        className="nav secondary-menu-container align-items-center ml-auto"
+      >
+        <a
+          className="btn mr-2 btn-link"
+          href="http://localhost:18000/login"
+        >
+          Login
+        </a>
+        <a
+          className="btn mr-2 btn-outline-primary"
+          href="http://localhost:18000/register"
+        >
+          Sign Up
+        </a>
+      </nav>
+    </div>
+  </div>
+</header>
+`;
+
+exports[`<SiteHeader /> renders correctly for mobile 1`] = `
+<header
+  aria-label="Main"
+  className="site-header-mobile d-flex justify-content-between align-items-center shadow sticky-top"
+>
+  <div
+    className="w-100 d-flex justify-content-start"
+  >
+    <div
+      className="menu position-static"
+      onKeyDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+    >
+      <button
+        aria-expanded={false}
+        aria-haspopup="menu"
+        aria-label="Main Menu"
+        className="menu-trigger icon-button"
+        onClick={[Function]}
+        title="Main 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"
+        >
+          <rect
+            fill="currentColor"
+            height="2"
+            width="20"
+            x="2"
+            y="5"
+          />
+          <rect
+            fill="currentColor"
+            height="2"
+            width="20"
+            x="2"
+            y="11"
+          />
+          <rect
+            fill="currentColor"
+            height="2"
+            width="20"
+            x="2"
+            y="17"
+          />
+        </svg>
+      </button>
+    </div>
+  </div>
+  <div
+    className="w-100 d-flex justify-content-center"
+  >
+    <a
+      className="logo"
+      href="http://localhost:18000/dashboard"
+      itemType="http://schema.org/Organization"
+    >
+      <img
+        alt="edX"
+        className="d-block"
+        src="test-file-stub"
+      />
+    </a>
+  </div>
+  <div
+    className="w-100 d-flex justify-content-end align-items-center"
+  >
+    <nav
+      aria-label="Secondary"
+      className="menu position-static"
+      onKeyDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+    >
+      <button
+        aria-expanded={false}
+        aria-haspopup="menu"
+        aria-label="Account Menu"
+        className="menu-trigger icon-button"
+        onClick={[Function]}
+        title="Account Menu"
+      >
+        <span
+          className="avatar overflow-hidden d-inline-flex rounded-circle null"
+          style={
+            Object {
+              "height": "1.5rem",
+              "width": "1.5rem",
+            }
+          }
+        >
+          <svg
+            aria-hidden={true}
+            className="text-muted"
+            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>
+      </button>
+    </nav>
+  </div>
+</header>
+`;

src/index.jsx

@@ -0,0 +1,6 @@
+import SiteHeader from './SiteHeader';
+import messages from './SiteHeader.messages';
+
+export { messages };
+
+export default SiteHeader;

src/index.scss

@@ -0,0 +1,95 @@
+$spacer: 1rem;
+$blue: #007db8;
+$white: #fff;
+
+@import './Menu/menu.scss';
+
+.dropdown-item a {
+  text-decoration: none;
+}
+
+.icon-button {
+  display: inline-flex;
+  line-height: 3rem;
+  background: transparent;
+  vertical-align: middle;
+  text-align: center;
+  border: none;
+  height: 3rem;
+  width: 3rem;
+  padding: .75rem;
+  justify-content: center;
+  align-items:center;
+  &:hover, &:focus {
+    background: rgba(0,0,0,.1);
+  }
+}
+
+.site-header-mobile,
+.site-header-desktop {
+  position: relative;
+  z-index: 1000;
+}
+
+.site-header-mobile {
+  .nav-link {
+    text-decoration: none;
+    cursor: pointer;
+  }
+  img {
+    height: 1.5rem;
+  }
+}
+
+
+.site-header-desktop {
+  height: 3.75rem;
+  box-shadow: 0 1px 0 0 rgba(0,0,0,.1);
+  background: $white;
+  .nav-link {
+    text-decoration: none;
+  }
+  .logo {
+    display: block;
+    box-sizing: content-box;
+    position: relative;
+    top: -.05em;
+    height: 1.75rem;
+    padding: 1rem 0;
+    margin-right: 1rem;
+    img {
+      display: block;
+      height: 100%;
+    }
+  }
+  .main-nav {
+    .nav-link {
+      padding: 1.125rem 1rem;
+      text-decoration: none;
+      font-weight: 500;
+      letter-spacing: .01em;
+    }
+    .nav-link:hover,
+    .nav-link:focus,
+    .nav-link.active,
+    .expanded .nav-link {
+      background: $component-active-bg;
+      color: $component-active-color;
+    }
+    .menu {
+      position: static;
+      .menu-content {
+        border-top: solid 2px $component-active-bg;
+        left: 0;
+        right: 0;
+        box-shadow: 0 1px 2px rgba(0,0,0,.25);
+        border-bottom-left-radius: 2px;
+        border-bottom-right-radius: 2px;
+        padding: 1rem;
+      }
+    }
+  }
+  .search-input {
+    border-radius: $rounded-pill;
+  }
+}