Merge pull request #507 from audioverse-org/AV-715-Track-Actions-Left…

…-side-menu-first-level

Av 715 track actions left side menu first level

src/components/atoms/activeLink.tsx

@@ -3,10 +3,13 @@ import Link, { LinkProps } from 'next/link';
 import { useRouter } from 'next/router';
 import React, { ReactElement } from 'react';
 
+import { analytics } from './analytics';
+
 type ActiveLinkProps = LinkProps & {
 	children: ReactElement;
 	className?: string;
 	activeClassName: string;
+	linkLable?: string;
 };
 
 // SOURCE: https://zaiste.net/programming/reactjs/howtos/create-activelink-nextjs/
@@ -15,6 +18,7 @@ const ActiveLink = ({
 	children,
 	className,
 	activeClassName,
+	linkLable,
 	...props
 }: ActiveLinkProps): JSX.Element => {
 	const { asPath } = useRouter();
@@ -29,6 +33,9 @@ const ActiveLink = ({
 			<a
 				className={clsx(className, isActive && activeClassName)}
 				aria-current={isActive ? 'page' : false}
+				onClick={() => {
+					analytics.track('menuClick', { lable: linkLable });
+				}}
 			>
 				{children}
 			</a>

src/components/molecules/navItem.tsx

@@ -6,6 +6,8 @@ import styles from '~components/organisms/navigation.module.scss';
 import { INavigationItem } from '~lib/useNavigationItems';
 import IconDisclosure from '~public/img/icons/icon-disclosure-light-small.svg';
 
+import { analytics } from '../atoms/analytics';
+
 export default function NavItem({
 	item,
 	setSubmenu,
@@ -29,11 +31,17 @@ export default function NavItem({
 					href={href}
 					className={styles.navLink}
 					activeClassName={styles.active}
+					linkLable={label}
 				>
 					{inner}
 				</ActiveLink>
 			) : (
-				<a className={styles.navLink} onClick={() => setSubmenu(key)}>
+				<a
+					className={styles.navLink}
+					onClick={() => {
+						analytics.track('menuClick', { link: label }), setSubmenu(key);
+					}}
+				>
 					{inner}
 				</a>
 			)}