fix: remove logo URL

Author: syedsajjadkazmii

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:

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,19 +130,13 @@ const Header = ({
 };
 
 Header.defaultProps = {
-  logo: null,
   mainMenuItems: null,
   secondaryMenuItems: null,
   userMenuItems: null,
 };
 
 Header.propTypes = {
   intl: intlShape.isRequired,
-  logo: PropTypes.shape({
-    src: PropTypes.string,
-    alt: PropTypes.string,
-    href: PropTypes.string,
-  }),
   mainMenuItems: PropTypes.oneOfType([
     PropTypes.node,
     PropTypes.array,

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;