From 004592ace02d61ca72b814d91a9da56135acb410 Mon Sep 17 00:00:00 2001
From: Syed Sajjad  Hussain Shah <ssajjad@2u.com>
Date: Tue, 19 Mar 2024 15:10:35 +0500
Subject: [PATCH] fix: remove logo URL

---
 docs/using_custom_header.rst | 21 +++------------------
 src/Header.jsx               | 19 ++++++-------------
 src/index.scss               |  9 +++++++++
 3 files changed, 18 insertions(+), 31 deletions(-)

diff --git a/docs/using_custom_header.rst b/docs/using_custom_header.rst
index 091a15f1f..b555aa52a 100644
--- a/docs/using_custom_header.rst
+++ b/docs/using_custom_header.rst
@@ -6,9 +6,9 @@ Custom Header Component
 Overview
 --------
 
-The ``Header`` component is used to display a header with a provided ``logo``, ``mainMenuItems``,
+The ``Header`` component is used to display a header with a provided ``mainMenuItems``,
 ``secondaryMenuItems``, and ``userMenuItems`` props. If props are provided, the component will use them; otherwise,
-If any of the props ``(logo, mainMenuItems, secondaryMenuItems, userMenuItems)`` are not provided, default
+If any of the props ``(mainMenuItems, secondaryMenuItems, userMenuItems)`` are not provided, default
 items are displayed. This component provides flexibility in customization, making it suitable for a wide
 range of applications.
 
@@ -17,21 +17,6 @@ Props Details
 
 The `Header` component accepts the following **optional** props for customization:
 
-``logo``
-*******
-
-The logo prop is an object containing `src`, `alt`, and `href` properties. If not passed, LOGO_URL from config will be used.
-It is displayed on the left of the header in the desktop screen and in the center of the header on the mobile screen.
-
-Example:
-::
-
-   {
-       src: 'path/to/logo.png',
-       alt: 'Logo Alt Text',
-       href: '/home'
-   }
-
 ``mainMenuItems``
 *****************
 
@@ -66,7 +51,7 @@ Example:
 secondaryMenuItems
 ******************
 
-The secondary menu items has same structure as ``mainMenuItems``. On desktop screen, These items are displayed on the right of header just before the userMenu avatar and on mobile screen,
+The secondary menu items has same structure as ``mainMenuItems``. On desktop screen, these items are displayed on the right of header just before the userMenu avatar and on mobile screen,
 these items are displayed below the mainMenu items in dropdown.
 
 Example:
diff --git a/src/Header.jsx b/src/Header.jsx
index 694f27b69..9fd3b47e4 100644
--- a/src/Header.jsx
+++ b/src/Header.jsx
@@ -33,19 +33,18 @@ subscribe(APP_CONFIG_INITIALIZED, () => {
 
 /**
  * Header component for the application.
- * Displays a header with the provided logo, main menu, secondary menu, and user menu when the user is authenticated.
- * If any of the props (logo, mainMenuItems, secondaryMenuItems, userMenuItems) are not provided, default
+ * Displays a header with the provided main menu, secondary menu, and user menu when the user is authenticated.
+ * If any of the props (mainMenuItems, secondaryMenuItems, userMenuItems) are not provided, default
  * items are displayed.
  * For more details on how to use this component, please refer to this document:
  * https://github.com/openedx/frontend-component-header/blob/master/docs/using_custom_header.rst
  *
- * @param logo
  * @param mainMenuItems
  * @param secondaryMenuItems
  * @param userMenuItems
  */
 const Header = ({
-  intl, logo, mainMenuItems, secondaryMenuItems, userMenuItems,
+  intl, mainMenuItems, secondaryMenuItems, userMenuItems,
 }) => {
   const { authenticatedUser, config } = useContext(AppContext);
 
@@ -106,9 +105,9 @@ const Header = ({
   ];
 
   const props = {
-    logo: logo?.src || config.LOGO_URL,
-    logoAltText: logo?.alt || config.SITE_NAME,
-    logoDestination: logo?.href || `${config.LMS_BASE_URL}/dashboard`,
+    logo: config.LOGO_URL,
+    logoAltText: config.SITE_NAME,
+    logoDestination: `${config.LMS_BASE_URL}/dashboard`,
     loggedIn: authenticatedUser !== null,
     username: authenticatedUser !== null ? authenticatedUser.username : null,
     avatar: authenticatedUser !== null ? authenticatedUser.avatar : null,
@@ -131,7 +130,6 @@ const Header = ({
 };
 
 Header.defaultProps = {
-  logo: null,
   mainMenuItems: null,
   secondaryMenuItems: null,
   userMenuItems: null,
@@ -139,11 +137,6 @@ Header.defaultProps = {
 
 Header.propTypes = {
   intl: intlShape.isRequired,
-  logo: PropTypes.shape({
-    src: PropTypes.string,
-    alt: PropTypes.string,
-    href: PropTypes.string,
-  }),
   mainMenuItems: PropTypes.oneOfType([
     PropTypes.node,
     PropTypes.array,
diff --git a/src/index.scss b/src/index.scss
index 1d31c9bab..94114bd44 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -88,6 +88,15 @@ $white: #fff;
       height: 100%;
     }
   }
+  .secondary-menu-container {
+    .nav-link:hover,
+    .nav-link:focus,
+    .nav-link.active,
+    .expanded .nav-link {
+      background: $component-active-bg;
+      color: $component-active-color;
+    }
+  }
   .main-nav {
     .nav-link {
       padding: 1.125rem 1rem;