1 files changed, 44 insertions, 0 deletions
diff --git a/app/assets/javascripts/pages/shared/nav/sidebar_tracking.js b/app/assets/javascripts/pages/shared/nav/sidebar_tracking.js
new file mode 100644
index 00000000000..79ce1a37d21
--- /dev/null
+++ b/app/assets/javascripts/pages/shared/nav/sidebar_tracking.js
@@ -0,0 +1,44 @@
+function onSidebarLinkClick() {
+  const setDataTrackAction = (element, action) => {
+    element.setAttribute('data-track-action', action);
+  };
+
+  const setDataTrackExtra = (element, value) => {
+    const SIDEBAR_COLLAPSED = 'Collapsed';
+    const SIDEBAR_EXPANDED = 'Expanded';
+    const sidebarCollapsed = document
+      .querySelector('.nav-sidebar')
+      .classList.contains('js-sidebar-collapsed')
+      ? SIDEBAR_COLLAPSED
+      : SIDEBAR_EXPANDED;
+
+    element.setAttribute(
+      'data-track-extra',
+      JSON.stringify({ sidebar_display: sidebarCollapsed, menu_display: value }),
+    );
+  };
+
+  const EXPANDED = 'Expanded';
+  const FLY_OUT = 'Fly out';
+  const CLICK_MENU_ACTION = 'click_menu';
+  const CLICK_MENU_ITEM_ACTION = 'click_menu_item';
+  const parentElement = this.parentNode;
+  const subMenuList = parentElement.closest('.sidebar-sub-level-items');
+
+  if (subMenuList) {
+    const isFlyOut = subMenuList.classList.contains('fly-out-list') ? FLY_OUT : EXPANDED;
+
+    setDataTrackExtra(parentElement, isFlyOut);
+    setDataTrackAction(parentElement, CLICK_MENU_ITEM_ACTION);
+  } else {
+    const isFlyOut = parentElement.classList.contains('is-showing-fly-out') ? FLY_OUT : EXPANDED;
+
+    setDataTrackExtra(parentElement, isFlyOut);
+    setDataTrackAction(parentElement, CLICK_MENU_ACTION);
+  }
+}
+export const initSidebarTracking = () => {
+  document.querySelectorAll('.nav-sidebar li[data-track-label] > a').forEach((link) => {
+    link.addEventListener('click', onSidebarLinkClick);
+  });
+};