feat: show mobile logo

README.rst

@@ -53,6 +53,7 @@ Environment Variables
   frontend-app-authentication in which these menus are considered distractions from the user's task.
 * ``ENABLE_HEADER_LANG_SELECTOR`` - A boolean to enable the language selector in the header component.
 * ``SITE_SUPPORTED_LANGUAGES`` - A list with all the languages to display in the selector.
+* ``LOGO_URL_MOBILE`` - The URL of the site's logo for mobile. This logo is displayed in the header.
 
 
 Installation

src/learning-header/LearningHeader.jsx

@@ -1,4 +1,5 @@
 import React, { useContext, useEffect, useState } from 'react';
+import Responsive from 'react-responsive';
 import PropTypes from 'prop-types';
 import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
@@ -40,12 +41,24 @@ const LearningHeader = ({
   });
 
   const headerLogo = (
-    <LinkedLogo
-      className="logo"
-      href={`${getConfig().LMS_BASE_URL}/dashboard`}
-      src={getConfig().LOGO_URL}
-      alt={getConfig().SITE_NAME}
-    />
+    <>
+      <Responsive maxWidth={769}>
+        <LinkedLogo
+          className="logo"
+          href={`${getConfig().LMS_BASE_URL}/dashboard`}
+          src={getConfig().LOGO_URL_MOBILE || getConfig().LOGO_URL}
+          alt={getConfig().SITE_NAME}
+        />
+      </Responsive>
+      <Responsive minWidth={769}>
+        <LinkedLogo
+            className="logo"
+            href={`${getConfig().LMS_BASE_URL}/dashboard`}
+            src={getConfig().LOGO_URL}
+            alt={getConfig().SITE_NAME}
+          />
+      </Responsive>
+    </>
   );
 
   return (