From bc8702ea508f0aab2a51b80836f5e107439a7da1 Mon Sep 17 00:00:00 2001
From: Ivo Branco <ivo.branco@fccn.pt>
Date: Wed, 11 Dec 2024 15:55:04 +0000
Subject: [PATCH] feat: show mobile logo

---
 README.rst                             |  1 +
 src/learning-header/LearningHeader.jsx | 25 +++++++++++++++++++------
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/README.rst b/README.rst
index 1f421b8e8..6ce127417 100644
--- a/README.rst
+++ b/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
diff --git a/src/learning-header/LearningHeader.jsx b/src/learning-header/LearningHeader.jsx
index 387d89c3a..ff9445a86 100644
--- a/src/learning-header/LearningHeader.jsx
+++ b/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 (