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;