Merge pull request #466 from openedx/sajjad/VAN-1823-custom-header

feat: enable header to accept custom menus
chore(deps): update dependency @testing-library/dom to v10
2024-04-19 11:36:03 +05:00 · 2024-04-15 07:39:31 +00:00 · 2024-04-15 04:27:37 +00:00 · 2024-03-25 12:49:25 +05:00 · 2024-03-25 12:49:25 +05:00 · 2024-03-25 12:49:25 +05:00
10 changed files with 327 additions and 297 deletions
--- a/docs/images/desktop_header.png
+++ b/docs/images/desktop_header.png
--- a/docs/images/mobile_main_menu.png
+++ b/docs/images/mobile_main_menu.png
--- a/docs/images/mobile_user_menu.png
+++ b/docs/images/mobile_user_menu.png
--- a/docs/using_custom_header.rst
+++ b/docs/using_custom_header.rst
@@ -0,0 +1,111 @@
+.. title:: Custom Header Component Documentation
+
+Custom Header Component
+=======================
+
+Overview
+--------
+
+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 ``(mainMenuItems, secondaryMenuItems, userMenuItems)`` are not provided, default
+items will be displayed. This component provides flexibility in customization, making it suitable for a wide
+range of applications.
+
+Props Details
+-------------
+
+The `Header` component accepts the following **optional** props for customization:
+
+``mainMenuItems``
+*****************
+
+The main menu items is a list of menu items objects. On desktop screens, these items are displayed on the left side next to the logo icon.
+On mobile screens, the main menu is displayed as a dropdown menu triggered by a hamburger icon. The main menu dropdown appears below the logo when opened.
+
+Example:
+::
+
+   [
+       { type: 'item', href: '/courses', content: 'Courses', isActive: true },
+       { type: 'item', href: '/programs', content: 'Programs' },
+       { type: 'item', href: '/discover', content: 'Discover New', disabled, true },
+       {
+           type: 'submenu',
+           content: 'Sub Menu Item',
+           submenuContent: (
+             <>
+                <div className="mb-1"><a rel="noopener" href="#">Submenu item 1</a></div>
+                <div className="mb-1"><a rel="noopener" href="#">Submenu item 2</a></div>
+             </>
+           ),
+       },
+   ]
+
+**Submenu Implementation**
+
+To implement a submenu, set the type to ``submenu`` and provide a ``submenuContent`` property.
+The submenuContent should be a React component (as shown in above example) that can be rendered.
+
+**Note:**
+
+- The ``type`` should be ``item`` or ``submenu``. If type is ``submenu``, it should contain ``submenuContent`` instead of ``href``.
+
+- If any item is to be disabled, we can pass optional ``disabled: true`` in that item object and
+
+- If any item is to be active, we can pass optional ``isActive: true`` in that item object
+
+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,
+these items are displayed below the mainMenu items in dropdown.
+
+Example:
+::
+
+   [
+       { type: 'item', href: '/help', content: 'Help' },
+   ]
+
+userMenuItems
+*************
+
+The user menu items is list of objects. On desktop screens, these items are displayed as a dropdown menu on the most right side of the header. The dropdown is opened by clicking on the avatar icon, which is typically located at the far right of the header.
+On mobile screens, the user menu is also displayed as a dropdown menu, appearing under the avatar icon.
+
+Each object represents a group in the user menu. Each object contains the ``heading`` and
+list of menu items to be displayed in that group. Heading is optional and will be displayed only if passed. There can
+be multiple groups. For a normal user menu, a single group can be passed with empty heading.
+
+Example:
+::
+
+   [
+       {
+           heading: '',
+           items: [
+               { type: 'item', href: '/profile', content: 'Profile' },
+               { type: 'item', href: '/logout', content: 'Logout' }
+           ]
+       },
+   ]
+
+Screenshots
+***********
+
+Desktop:
+
+.. image:: ./images/desktop_header.png
+
+Mobile:
+
+.. image:: ./images/mobile_main_menu.png
+.. image:: ./images/mobile_user_menu.png
+
+Some Important Notes
+--------------------
+
+- Intl formatted strings should be passed in content attribute.
+- Only menu items in the main menu can be disabled.
+- Menu items in the main menu and user menu can have ``isActive`` prop.
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,7 +26,7 @@
        "@edx/reactifex": "^2.1.1",
        "@openedx/frontend-build": "13.1.4",
        "@openedx/paragon": "22.2.1",
-        "@testing-library/dom": "9.3.4",
+        "@testing-library/dom": "10.0.0",
        "@testing-library/jest-dom": "5.17.0",
        "@testing-library/react": "10.4.9",
        "husky": "8.0.3",
@@ -36,7 +36,7 @@
        "react": "17.0.2",
        "react-dom": "17.0.2",
        "react-redux": "7.2.9",
-        "react-router-dom": "6.21.3",
+        "react-router-dom": "6.22.3",
        "react-test-renderer": "17.0.2",
        "redux": "4.2.1",
        "redux-saga": "1.3.0"
@@ -5734,9 +5734,9 @@
      "dev": true
    },
    "node_modules/@remix-run/router": {
-      "version": "1.14.2",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.14.2.tgz",
-      "integrity": "sha512-ACXpdMM9hmKZww21yEqWwiLws/UPLhNKvimN8RrYSqPSvB3ov7sLvAcfvaxePeLvccTQKGdkDIhLYApZVDFuKg==",
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz",
+      "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==",
      "dev": true,
      "engines": {
        "node": ">=14.0.0"
@@ -6045,22 +6045,22 @@
      }
    },
    "node_modules/@testing-library/dom": {
-      "version": "9.3.4",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.4.tgz",
-      "integrity": "sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==",
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.0.0.tgz",
+      "integrity": "sha512-PmJPnogldqoVFf+EwbHvbBJ98MmqASV8kLrBYgsDNxQcFMeIS7JFL48sfyXvuMtgmWO/wMhh25odr+8VhDmn4g==",
      "dev": true,
      "dependencies": {
        "@babel/code-frame": "^7.10.4",
        "@babel/runtime": "^7.12.5",
        "@types/aria-query": "^5.0.1",
-        "aria-query": "5.1.3",
+        "aria-query": "5.3.0",
        "chalk": "^4.1.0",
        "dom-accessibility-api": "^0.5.9",
        "lz-string": "^1.5.0",
        "pretty-format": "^27.0.2"
      },
      "engines": {
-        "node": ">=14"
+        "node": ">=18"
      }
    },
    "node_modules/@testing-library/dom/node_modules/ansi-styles": {
@@ -6078,15 +6078,6 @@
        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
      }
    },
-    "node_modules/@testing-library/dom/node_modules/aria-query": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz",
-      "integrity": "sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==",
-      "dev": true,
-      "dependencies": {
-        "deep-equal": "^2.0.5"
-      }
-    },
    "node_modules/@testing-library/dom/node_modules/chalk": {
      "version": "4.1.2",
      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -7578,9 +7569,9 @@
      }
    },
    "node_modules/aria-query": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.2.1.tgz",
-      "integrity": "sha512-7uFg4b+lETFgdaJyETnILsXgnnzVnkHcgRbwbPwevm5x/LmUlt3MjczMRe1zg824iBgXZNRPTBftNYyRSKLp2g==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
      "dev": true,
      "dependencies": {
        "dequal": "^2.0.3"
@@ -10016,41 +10007,6 @@
        }
      }
    },
-    "node_modules/deep-equal": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.1.tgz",
-      "integrity": "sha512-lKdkdV6EOGoVn65XaOsPdH4rMxTZOnmFyuIkMjM1i5HHCbfjC97dawgTAy0deYNfuqUqW+Q5VrVaQYtUpSd6yQ==",
-      "dev": true,
-      "dependencies": {
-        "array-buffer-byte-length": "^1.0.0",
-        "call-bind": "^1.0.2",
-        "es-get-iterator": "^1.1.3",
-        "get-intrinsic": "^1.2.0",
-        "is-arguments": "^1.1.1",
-        "is-array-buffer": "^3.0.2",
-        "is-date-object": "^1.0.5",
-        "is-regex": "^1.1.4",
-        "is-shared-array-buffer": "^1.0.2",
-        "isarray": "^2.0.5",
-        "object-is": "^1.1.5",
-        "object-keys": "^1.1.1",
-        "object.assign": "^4.1.4",
-        "regexp.prototype.flags": "^1.5.0",
-        "side-channel": "^1.0.4",
-        "which-boxed-primitive": "^1.0.2",
-        "which-collection": "^1.0.1",
-        "which-typed-array": "^1.1.9"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/deep-equal/node_modules/isarray": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
-      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
-      "dev": true
-    },
    "node_modules/deep-extend": {
      "version": "0.6.0",
      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
@@ -10637,32 +10593,6 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
-    "node_modules/es-get-iterator": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.3.tgz",
-      "integrity": "sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.1.3",
-        "has-symbols": "^1.0.3",
-        "is-arguments": "^1.1.1",
-        "is-map": "^2.0.2",
-        "is-set": "^2.0.2",
-        "is-string": "^1.0.7",
-        "isarray": "^2.0.5",
-        "stop-iteration-iterator": "^1.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/es-get-iterator/node_modules/isarray": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
-      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
-      "dev": true
-    },
    "node_modules/es-module-lexer": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.3.0.tgz",
@@ -13829,22 +13759,6 @@
        "node": ">=0.10.0"
      }
    },
-    "node_modules/is-arguments": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
-      "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
    "node_modules/is-array-buffer": {
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.2.tgz",
@@ -14102,15 +14016,6 @@
        "node": ">=0.10.0"
      }
    },
-    "node_modules/is-map": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.2.tgz",
-      "integrity": "sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==",
-      "dev": true,
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
    "node_modules/is-negative-zero": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
@@ -14244,15 +14149,6 @@
        "node": ">=6"
      }
    },
-    "node_modules/is-set": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.2.tgz",
-      "integrity": "sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==",
-      "dev": true,
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
    "node_modules/is-shared-array-buffer": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
@@ -14356,15 +14252,6 @@
        "node": ">=0.10.0"
      }
    },
-    "node_modules/is-weakmap": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.1.tgz",
-      "integrity": "sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==",
-      "dev": true,
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
    "node_modules/is-weakref": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
@@ -14377,19 +14264,6 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
-    "node_modules/is-weakset": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.2.tgz",
-      "integrity": "sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.1.1"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
    "node_modules/is-windows": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
@@ -19484,22 +19358,6 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
-    "node_modules/object-is": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
-      "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
    "node_modules/object-keys": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
@@ -21816,12 +21674,12 @@
      }
    },
    "node_modules/react-router": {
-      "version": "6.21.3",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.21.3.tgz",
-      "integrity": "sha512-a0H638ZXULv1OdkmiK6s6itNhoy33ywxmUFT/xtSoVyf9VnC7n7+VT4LjVzdIHSaF5TIh9ylUgxMXksHTgGrKg==",
+      "version": "6.22.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz",
+      "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==",
      "dev": true,
      "dependencies": {
-        "@remix-run/router": "1.14.2"
+        "@remix-run/router": "1.15.3"
      },
      "engines": {
        "node": ">=14.0.0"
@@ -21831,13 +21689,13 @@
      }
    },
    "node_modules/react-router-dom": {
-      "version": "6.21.3",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.21.3.tgz",
-      "integrity": "sha512-kNzubk7n4YHSrErzjLK72j0B5i969GsuCGazRl3G6j1zqZBLjuSlYBdVdkDOgzGdPIffUOc9nmgiadTEVoq91g==",
+      "version": "6.22.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz",
+      "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==",
      "dev": true,
      "dependencies": {
-        "@remix-run/router": "1.14.2",
-        "react-router": "6.21.3"
+        "@remix-run/router": "1.15.3",
+        "react-router": "6.22.3"
      },
      "engines": {
        "node": ">=14.0.0"
@@ -24020,18 +23878,6 @@
        "node": ">= 0.8"
      }
    },
-    "node_modules/stop-iteration-iterator": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz",
-      "integrity": "sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==",
-      "dev": true,
-      "dependencies": {
-        "internal-slot": "^1.0.4"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
    "node_modules/streamx": {
      "version": "2.16.1",
      "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.16.1.tgz",
@@ -25926,21 +25772,6 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
-    "node_modules/which-collection": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.1.tgz",
-      "integrity": "sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==",
-      "dev": true,
-      "dependencies": {
-        "is-map": "^2.0.1",
-        "is-set": "^2.0.1",
-        "is-weakmap": "^2.0.1",
-        "is-weakset": "^2.0.1"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
    "node_modules/which-module": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
    "@edx/reactifex": "^2.1.1",
    "@openedx/frontend-build": "13.1.4",
    "@openedx/paragon": "22.2.1",
-    "@testing-library/dom": "9.3.4",
+    "@testing-library/dom": "10.0.0",
    "@testing-library/jest-dom": "5.17.0",
    "@testing-library/react": "10.4.9",
    "husky": "8.0.3",
@@ -49,7 +49,7 @@
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-redux": "7.2.9",
-    "react-router-dom": "6.21.3",
+    "react-router-dom": "6.22.3",
    "react-test-renderer": "17.0.2",
    "redux": "4.2.1",
    "redux-saga": "1.3.0"
--- a/src/DesktopHeader.jsx
+++ b/src/DesktopHeader.jsx
@@ -19,25 +19,31 @@ class DesktopHeader extends React.Component {
    super(props);
  }

-  renderMainMenu() {
-    const { mainMenu } = this.props;
-
+  renderMenu(menu) {
    // Nodes are accepted as a prop
-    if (!Array.isArray(mainMenu)) {
-      return mainMenu;
+    if (!Array.isArray(menu)) {
+      return menu;
    }

-    return mainMenu.map((menuItem) => {
+    return menu.map((menuItem) => {
      const {
        type,
        href,
        content,
        submenuContent,
+        disabled,
+        isActive,
      } = menuItem;

      if (type === 'item') {
        return (
-          <a key={`${type}-${content}`} className="nav-link" href={href}>{content}</a>
+          <a
+            key={`${type}-${content}`}
+            className={`nav-link${disabled ? ' disabled' : ''}${isActive ? ' active' : ''}`}
+            href={href}
+          >
+            {content}
+          </a>
        );
      }

@@ -54,22 +60,14 @@ class DesktopHeader extends React.Component {
    });
  }

-  // Renders an optional App Menu for
-  renderAppMenu() {
-    const { appMenu } = this.props;
-    const { content: appMenuContent, menuItems } = appMenu;
-    return (
-      <Menu transitionClassName="menu-dropdown" transitionTimeout={250}>
-        <MenuTrigger tag="a" className="nav-link d-inline-flex align-items-center">
-          {appMenuContent} <CaretIcon role="img" aria-hidden focusable="false" />
-        </MenuTrigger>
-        <MenuContent className="mb-0 dropdown-menu show dropdown-menu-right pin-right shadow py-2">
-          {menuItems.map(({ type, href, content }) => (
-            <a className={`dropdown-${type}`} key={`${type}-${content}`} href={href}>{content}</a>
-          ))}
-        </MenuContent>
-      </Menu>
-    );
+  renderMainMenu() {
+    const { mainMenu } = this.props;
+    return this.renderMenu(mainMenu);
+  }
+
+  renderSecondaryMenu() {
+    const { secondaryMenu } = this.props;
+    return this.renderMenu(secondaryMenu);
  }

  renderUserMenu() {
@@ -91,8 +89,23 @@ class DesktopHeader extends React.Component {
          {username} <CaretIcon role="img" aria-hidden focusable="false" />
        </MenuTrigger>
        <MenuContent className="mb-0 dropdown-menu show dropdown-menu-right pin-right shadow py-2">
-          {userMenu.map(({ type, href, content }) => (
-            <a className={`dropdown-${type}`} key={`${type}-${content}`} href={href}>{content}</a>
+          {userMenu.map((group, index) => (
+            // eslint-disable-next-line react/jsx-no-comment-textnodes,react/no-array-index-key
+            <React.Fragment key={index}>
+              {group.heading && <div className="dropdown-header" role="heading" aria-level="1">{group.heading}</div>}
+              {group.items.map(({
+                type, content, href, disabled, isActive,
+              }) => (
+                <a
+                  className={`dropdown-${type}${isActive ? ' active' : ''}${disabled ? ' disabled' : ''}`}
+                  key={`${type}-${content}`}
+                  href={href}
+                >
+                  {content}
+                </a>
+              ))}
+              {index < userMenu.length - 1 && <div className="dropdown-divider" role="separator" />}
+            </React.Fragment>
          ))}
        </MenuContent>
      </Menu>
@@ -120,7 +133,6 @@ class DesktopHeader extends React.Component {
      logoDestination,
      loggedIn,
      intl,
-      appMenu,
    } = this.props;
    const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
    const logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'mw-100' : null;
@@ -137,19 +149,17 @@ class DesktopHeader extends React.Component {
            >
              {this.renderMainMenu()}
            </nav>
-            {appMenu ? (
-              <nav
-                aria-label={intl.formatMessage(messages['header.label.app.nav'])}
-                className="nav app-nav"
-              >
-                {this.renderAppMenu()}
-              </nav>
-            ) : null}
            <nav
              aria-label={intl.formatMessage(messages['header.label.secondary.nav'])}
              className="nav secondary-menu-container align-items-center ml-auto"
            >
-              {loggedIn ? this.renderUserMenu() : this.renderLoggedOutItems()}
+              {loggedIn
+                ? (
+                  <>
+                    {this.renderSecondaryMenu()}
+                    {this.renderUserMenu()}
+                  </>
+                ) : this.renderLoggedOutItems()}
            </nav>
          </div>
        </div>
@@ -163,10 +173,18 @@ DesktopHeader.propTypes = {
    PropTypes.node,
    PropTypes.array,
  ]),
+  secondaryMenu: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.array,
+  ]),
  userMenu: PropTypes.arrayOf(PropTypes.shape({
-    type: PropTypes.oneOf(['item', 'menu']),
-    href: PropTypes.string,
-    content: PropTypes.string,
+    heading: PropTypes.string,
+    items: PropTypes.arrayOf(PropTypes.shape({
+      type: PropTypes.oneOf(['item', 'menu']),
+      href: PropTypes.string,
+      content: PropTypes.string,
+      isActive: PropTypes.bool,
+    })),
  })),
  loggedOutItems: PropTypes.arrayOf(PropTypes.shape({
    type: PropTypes.oneOf(['item', 'menu']),
@@ -182,24 +200,11 @@ DesktopHeader.propTypes = {

  // i18n
  intl: intlShape.isRequired,
-
-  // appMenu
-  appMenu: PropTypes.shape(
-    {
-      content: PropTypes.string,
-      menuItems: PropTypes.arrayOf(
-        PropTypes.shape({
-          type: PropTypes.string,
-          href: PropTypes.string,
-          content: PropTypes.string,
-        }),
-      ),
-    },
-  ),
 };

 DesktopHeader.defaultProps = {
  mainMenu: [],
+  secondaryMenu: [],
  userMenu: [],
  loggedOutItems: [],
  logo: null,
@@ -208,7 +213,6 @@ DesktopHeader.defaultProps = {
  avatar: null,
  username: null,
  loggedIn: false,
-  appMenu: null,
 };

 export default injectIntl(DesktopHeader);
--- a/src/Header.jsx
+++ b/src/Header.jsx
@@ -10,6 +10,7 @@ import {
  subscribe,
 } from '@edx/frontend-platform';

+import PropTypes from 'prop-types';
 import DesktopHeader from './DesktopHeader';
 import MobileHeader from './MobileHeader';

@@ -30,50 +31,68 @@ subscribe(APP_CONFIG_INITIALIZED, () => {
  }, 'Header additional config');
 });

-const Header = ({ intl }) => {
+/**
+ * Header component for the application.
+ * 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 {list} mainMenuItems - The list of main menu items to display.
+ * See the documentation for the structure of main menu item.
+ * @param {list} secondaryMenuItems - The list of secondary menu items to display.
+ * See the documentation for the structure of secondary menu item.
+ * @param {list} userMenuItems - The list of user menu items to display.
+ * See the documentation for the structure of user menu item.
+ */
+const Header = ({
+  intl, mainMenuItems, secondaryMenuItems, userMenuItems,
+}) => {
  const { authenticatedUser, config } = useContext(AppContext);

-  const mainMenu = [
+  const defaultMainMenu = [
    {
      type: 'item',
      href: `${config.LMS_BASE_URL}/dashboard`,
      content: intl.formatMessage(messages['header.links.courses']),
    },
  ];
+  const defaultUserMenu = authenticatedUser === null ? [] : [{
+    heading: '',
+    items: [
+      {
+        type: 'item',
+        href: `${config.LMS_BASE_URL}/dashboard`,
+        content: intl.formatMessage(messages['header.user.menu.dashboard']),
+      },
+      {
+        type: 'item',
+        href: `${config.ACCOUNT_PROFILE_URL}/u/${authenticatedUser.username}`,
+        content: intl.formatMessage(messages['header.user.menu.profile']),
+      },
+      {
+        type: 'item',
+        href: config.ACCOUNT_SETTINGS_URL,
+        content: intl.formatMessage(messages['header.user.menu.account.settings']),
+      },
+      // Users should only see Order History if have a ORDER_HISTORY_URL define in the environment.
+      ...(config.ORDER_HISTORY_URL ? [{
+        type: 'item',
+        href: config.ORDER_HISTORY_URL,
+        content: intl.formatMessage(messages['header.user.menu.order.history']),
+      }] : []),
+      {
+        type: 'item',
+        href: config.LOGOUT_URL,
+        content: intl.formatMessage(messages['header.user.menu.logout']),
+      },
+    ],
+  }];

-  const orderHistoryItem = {
-    type: 'item',
-    href: config.ORDER_HISTORY_URL,
-    content: intl.formatMessage(messages['header.user.menu.order.history']),
-  };
-
-  const userMenu = authenticatedUser === null ? [] : [
-    {
-      type: 'item',
-      href: `${config.LMS_BASE_URL}/dashboard`,
-      content: intl.formatMessage(messages['header.user.menu.dashboard']),
-    },
-    {
-      type: 'item',
-      href: `${config.ACCOUNT_PROFILE_URL}/u/${authenticatedUser.username}`,
-      content: intl.formatMessage(messages['header.user.menu.profile']),
-    },
-    {
-      type: 'item',
-      href: config.ACCOUNT_SETTINGS_URL,
-      content: intl.formatMessage(messages['header.user.menu.account.settings']),
-    },
-    {
-      type: 'item',
-      href: config.LOGOUT_URL,
-      content: intl.formatMessage(messages['header.user.menu.logout']),
-    },
-  ];
-
-  // Users should only see Order History if have a ORDER_HISTORY_URL define in the environment.
-  if (config.ORDER_HISTORY_URL) {
-    userMenu.splice(-1, 0, orderHistoryItem);
-  }
+  const mainMenu = mainMenuItems || defaultMainMenu;
+  const secondaryMenu = secondaryMenuItems || [];
+  const userMenu = authenticatedUser === null ? [] : userMenuItems || defaultUserMenu;

  const loggedOutItems = [
    {
@@ -96,13 +115,14 @@ const Header = ({ intl }) => {
    username: authenticatedUser !== null ? authenticatedUser.username : null,
    avatar: authenticatedUser !== null ? authenticatedUser.avatar : null,
    mainMenu: getConfig().AUTHN_MINIMAL_HEADER ? [] : mainMenu,
+    secondaryMenu: getConfig().AUTHN_MINIMAL_HEADER ? [] : secondaryMenu,
    userMenu: getConfig().AUTHN_MINIMAL_HEADER ? [] : userMenu,
    loggedOutItems: getConfig().AUTHN_MINIMAL_HEADER ? [] : loggedOutItems,
  };

  return (
    <>
-      <Responsive maxWidth={768}>
+      <Responsive maxWidth={769}>
        <MobileHeader {...props} />
      </Responsive>
      <Responsive minWidth={769}>
@@ -112,8 +132,31 @@ const Header = ({ intl }) => {
  );
 };

+Header.defaultProps = {
+  mainMenuItems: null,
+  secondaryMenuItems: null,
+  userMenuItems: null,
+};
+
 Header.propTypes = {
  intl: intlShape.isRequired,
+  mainMenuItems: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.array,
+  ]),
+  secondaryMenuItems: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.array,
+  ]),
+  userMenuItems: PropTypes.arrayOf(PropTypes.shape({
+    heading: PropTypes.string,
+    items: PropTypes.arrayOf(PropTypes.shape({
+      type: PropTypes.oneOf(['item', 'menu']),
+      href: PropTypes.string,
+      content: PropTypes.string,
+      isActive: PropTypes.bool,
+    })),
+  })),
 };

 export default injectIntl(Header);
--- a/src/MobileHeader.jsx
+++ b/src/MobileHeader.jsx
@@ -19,25 +19,29 @@ class MobileHeader extends React.Component {
    super(props);
  }

-  renderMainMenu() {
-    const { mainMenu } = this.props;
-
+  renderMenu(menu) {
    // Nodes are accepted as a prop
-    if (!Array.isArray(mainMenu)) {
-      return mainMenu;
+    if (!Array.isArray(menu)) {
+      return menu;
    }

-    return mainMenu.map((menuItem) => {
+    return menu.map((menuItem) => {
      const {
        type,
        href,
        content,
        submenuContent,
+        disabled,
+        isActive,
      } = menuItem;

      if (type === 'item') {
        return (
-          <a key={`${type}-${content}`} className="nav-link" href={href}>
+          <a
+            key={`${type}-${content}`}
+            className={`nav-link${disabled ? ' disabled' : ''}${isActive ? ' active' : ''}`}
+            href={href}
+          >
            {content}
          </a>
        );
@@ -56,13 +60,32 @@ class MobileHeader extends React.Component {
    });
  }

+  renderMainMenu() {
+    const { mainMenu } = this.props;
+    return this.renderMenu(mainMenu);
+  }
+
+  renderSecondaryMenu() {
+    const { secondaryMenu } = this.props;
+    return this.renderMenu(secondaryMenu);
+  }
+
  renderUserMenuItems() {
    const { userMenu } = this.props;

-    return userMenu.map(({ type, href, content }) => (
-      <li className="nav-item" key={`${type}-${content}`}>
-        <a className="nav-link" href={href}>{content}</a>
-      </li>
+    return userMenu.map((group) => (
+      group.items.map(({
+        type, content, href, disabled, isActive,
+      }) => (
+        <li className="nav-item" key={`${type}-${content}`}>
+          <a
+            className={`nav-link${isActive ? ' active' : ''}${disabled ? ' disabled' : ''}`}
+            href={href}
+          >
+            {content}
+          </a>
+        </li>
+      ))
    ));
  }

@@ -123,6 +146,7 @@ class MobileHeader extends React.Component {
                className="nav flex-column pin-left pin-right border-top shadow py-2"
              >
                {this.renderMainMenu()}
+                {this.renderSecondaryMenu()}
              </MenuContent>
            </Menu>
          </div>
@@ -157,11 +181,18 @@ MobileHeader.propTypes = {
    PropTypes.node,
    PropTypes.array,
  ]),
-
+  secondaryMenu: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.array,
+  ]),
  userMenu: PropTypes.arrayOf(PropTypes.shape({
-    type: PropTypes.oneOf(['item', 'menu']),
-    href: PropTypes.string,
-    content: PropTypes.string,
+    heading: PropTypes.string,
+    items: PropTypes.arrayOf(PropTypes.shape({
+      type: PropTypes.oneOf(['item', 'menu']),
+      href: PropTypes.string,
+      content: PropTypes.string,
+      isActive: PropTypes.bool,
+    })),
  })),
  loggedOutItems: PropTypes.arrayOf(PropTypes.shape({
    type: PropTypes.oneOf(['item', 'menu']),
@@ -182,6 +213,7 @@ MobileHeader.propTypes = {

 MobileHeader.defaultProps = {
  mainMenu: [],
+  secondaryMenu: [],
  userMenu: [],
  loggedOutItems: [],
  logo: null,
--- 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;
Author	SHA1	Message	Date
Syed Sajjad Hussain Shah	6cab3f3f3e	Merge pull request #466 from openedx/sajjad/VAN-1823-custom-header feat: enable header to accept custom menus	2024-04-19 11:36:03 +05:00
renovate[bot]	e3c8ec027e	chore(deps): update dependency @testing-library/dom to v10	2024-04-15 07:39:31 +00:00
renovate[bot]	1e899c1c48	chore(deps): update dependency react-router-dom to v6.22.3	2024-04-15 04:27:37 +00:00
Syed Sajjad Hussain Shah	e6aa4be4f6	fix: update docs	2024-03-25 12:49:25 +05:00
Syed Sajjad Hussain Shah	f2c236c828	fix: remove logo URL	2024-03-25 12:49:25 +05:00
Syed Sajjad Hussain Shah	db912e6dae	feat: enable header to accept custom menus	2024-03-25 12:49:25 +05:00