fix: add onclick facility (#568)

Description: Add facility of onClick event on header menus
VAN-1914

Author: ahtesham-quraish

src/DesktopHeader.jsx

@@ -34,6 +34,7 @@ class DesktopHeader extends React.Component {
         submenuContent,
         disabled,
         isActive,
+        onClick,
       } = menuItem;
 
       if (type === 'item') {
@@ -42,6 +43,7 @@ class DesktopHeader extends React.Component {
             key={`${type}-${content}`}
             className={`nav-link${disabled ? ' disabled' : ''}${isActive ? ' active' : ''}`}
             href={href}
+            onClick={onClick || null}
           >
             {content}
           </a>
@@ -50,7 +52,7 @@ class DesktopHeader extends React.Component {
 
       return (
         <Menu key={`${type}-${content}`} tag="div" className="nav-item" respondToPointerEvents>
-          <MenuTrigger tag="a" className="nav-link d-inline-flex align-items-center" href={href}>
+          <MenuTrigger onClick={onClick || null} tag="a" className="nav-link d-inline-flex align-items-center" href={href}>
             {content} <CaretIcon role="img" aria-hidden focusable="false" />
           </MenuTrigger>
           <MenuContent className="pin-left pin-right shadow py-2">
@@ -107,11 +109,12 @@ class DesktopHeader extends React.Component {
             <React.Fragment key={index}>
               {group.heading && <Dropdown.Header>{group.heading}</Dropdown.Header>}
               {group.items.map(({
-                type, content, href, disabled, isActive,
+                type, content, href, disabled, isActive, onClick,
               }) => (
                 <Dropdown.Item
                   key={`${type}-${content}`}
                   href={href}
+                  onClick={onClick || null}
                   className={`${isActive ? ' active' : ''}${disabled ? ' disabled' : ''}`}
                 >
                   {content}
@@ -198,6 +201,7 @@ DesktopHeader.propTypes = {
       content: PropTypes.string,
       disabled: PropTypes.bool,
       isActive: PropTypes.bool,
+      onClick: PropTypes.func,
     })),
   })),
   loggedOutItems: PropTypes.arrayOf(PropTypes.shape({

src/MobileHeader.jsx

@@ -34,6 +34,7 @@ class MobileHeader extends React.Component {
         submenuContent,
         disabled,
         isActive,
+        onClick,
       } = menuItem;
 
       if (type === 'item') {
@@ -42,6 +43,7 @@ class MobileHeader extends React.Component {
             key={`${type}-${content}`}
             className={`nav-link${disabled ? ' disabled' : ''}${isActive ? ' active' : ''}`}
             href={href}
+            onClick={onClick || null}
           >
             {content}
           </a>
@@ -50,7 +52,7 @@ class MobileHeader extends React.Component {
 
       return (
         <Menu key={`${type}-${content}`} tag="div" className="nav-item">
-          <MenuTrigger tag="a" role="button" tabIndex="0" className="nav-link">
+          <MenuTrigger onClick={onClick || null} tag="a" role="button" tabIndex="0" className="nav-link">
             {content}
           </MenuTrigger>
           <MenuContent className="position-static pin-left pin-right py-2">
@@ -81,12 +83,13 @@ class MobileHeader extends React.Component {
 
     const userMenuItems = userMenu.map((group) => (
       group.items.map(({
-        type, content, href, disabled, isActive,
+        type, content, href, disabled, isActive, onClick,
       }) => (
         <li className="nav-item" key={`${type}-${content}`}>
           <a
             className={`nav-link${isActive ? ' active' : ''}${disabled ? ' disabled' : ''}`}
             href={href}
+            onClick={onClick || null}
           >
             {content}
           </a>
@@ -201,6 +204,7 @@ MobileHeader.propTypes = {
       content: PropTypes.string,
       disabled: PropTypes.bool,
       isActive: PropTypes.bool,
+      onClick: PropTypes.func,
     })),
   })),
   loggedOutItems: PropTypes.arrayOf(PropTypes.shape({

src/__snapshots__/Header.test.jsx.snap

@@ -138,18 +138,21 @@ exports[`<Header /> renders correctly for authenticated users on desktop 1`] = `
         <a
           className="nav-link"
           href="http://localhost:18000/dashboard"
+          onClick={null}
         >
           Courses
         </a>
         <a
           className="nav-link"
           href="http://localhost:18000/dashboard/programs"
+          onClick={null}
         >
           Programs
         </a>
         <a
           className="nav-link"
           href="http://localhost:18000/course"
+          onClick={[Function]}
         >
           Discover New
         </a>
@@ -334,18 +337,21 @@ exports[`<Header /> renders correctly for unauthenticated users on desktop 1`] =
         <a
           className="nav-link"
           href="http://localhost:18000/dashboard"
+          onClick={null}
         >
           Courses
         </a>
         <a
           className="nav-link"
           href="http://localhost:18000/dashboard/programs"
+          onClick={null}
         >
           Programs
         </a>
         <a
           className="nav-link"
           href="http://localhost:18000/course"
+          onClick={[Function]}
         >
           Discover New
         </a>