fix: provide onClick feature

Provide onClick facility for all the kind of menus
VAN-1914

Author: Ahtesham Quraish

src/DesktopHeader.jsx

@@ -33,6 +33,7 @@ class DesktopHeader extends React.Component {
         submenuContent,
         disabled,
         isActive,
+        onClick,
       } = menuItem;
 
       if (type === 'item') {
@@ -41,6 +42,7 @@ class DesktopHeader extends React.Component {
             key={`${type}-${content}`}
             className={`nav-link${disabled ? ' disabled' : ''}${isActive ? ' active' : ''}`}
             href={href}
+            onClick={onClick || null}
           >
             {content}
           </a>
@@ -49,7 +51,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">
@@ -94,12 +96,13 @@ class DesktopHeader extends React.Component {
             <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,
+                type, content, href, disabled, isActive, onClick,
               }) => (
                 <a
                   className={`dropdown-${type}${isActive ? ' active' : ''}${disabled ? ' disabled' : ''}`}
                   key={`${type}-${content}`}
                   href={href}
+                  onClick={onClick || null}
                 >
                   {content}
                 </a>
@@ -184,6 +187,7 @@ DesktopHeader.propTypes = {
       href: PropTypes.string,
       content: PropTypes.string,
       isActive: PropTypes.bool,
+      onClick: PropTypes.func,
     })),
   })),
   loggedOutItems: PropTypes.arrayOf(PropTypes.shape({

src/MobileHeader.jsx

@@ -33,6 +33,7 @@ class MobileHeader extends React.Component {
         submenuContent,
         disabled,
         isActive,
+        onClick,
       } = menuItem;
 
       if (type === 'item') {
@@ -41,6 +42,7 @@ class MobileHeader extends React.Component {
             key={`${type}-${content}`}
             className={`nav-link${disabled ? ' disabled' : ''}${isActive ? ' active' : ''}`}
             href={href}
+            onClick={onClick || null}
           >
             {content}
           </a>
@@ -49,7 +51,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">
@@ -75,12 +77,13 @@ class MobileHeader extends React.Component {
 
     return 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>
@@ -192,6 +195,7 @@ MobileHeader.propTypes = {
       href: PropTypes.string,
       content: PropTypes.string,
       isActive: PropTypes.bool,
+      onClick: PropTypes.func,
     })),
   })),
   loggedOutItems: PropTypes.arrayOf(PropTypes.shape({

src/__snapshots__/Header.test.jsx.snap

@@ -33,6 +33,7 @@ exports[`<Header /> renders correctly for anonymous desktop 1`] = `
         <a
           className="nav-link"
           href="http://localhost:18000/dashboard"
+          onClick={null}
         >
           Courses
         </a>
@@ -229,6 +230,7 @@ exports[`<Header /> renders correctly for authenticated desktop 1`] = `
         <a
           className="nav-link"
           href="http://localhost:18000/dashboard"
+          onClick={null}
         >
           Courses
         </a>