docs: add tracking for navigation usage (#8819)

www/packages/docs-ui/src/components/MainNav/NavigationDropdown/index.tsx

@@ -4,12 +4,13 @@ import clsx from "clsx"
 import React, { useMemo, useRef, useState } from "react"
 import { MainNavigationDropdownSelected } from "./Selected"
 import { MainNavigationDropdownMenu } from "./Menu"
-import { useClickOutside, useMainNav } from "../../.."
+import { useAnalytics, useClickOutside, useMainNav } from "../../.."
 
 export const MainNavigationDropdown = () => {
   const { navItems: items } = useMainNav()
   const navigationRef = useRef<HTMLDivElement>(null)
   const [menuOpen, setMenuOpen] = useState(false)
+  const { track } = useAnalytics()
   useClickOutside({
     elmRef: navigationRef,
     onClickOutside: () => {
@@ -33,7 +34,14 @@ export const MainNavigationDropdown = () => {
       {selectedItem && (
         <MainNavigationDropdownSelected
           item={selectedItem}
-          onClick={() => setMenuOpen((prev) => !prev)}
+          onClick={() => {
+            setMenuOpen((prev) => !prev)
+            if (!menuOpen) {
+              track("nav_main_open", {
+                url: window.location.href,
+              })
+            }
+          }}
           isActive={menuOpen}
         />
       )}

www/packages/docs-ui/src/components/Sidebar/Top/MedusaMenu/index.tsx

@@ -5,6 +5,7 @@ import React, { useRef, useState } from "react"
 import {
   BorderedIcon,
   getOsShortcut,
+  useAnalytics,
   useClickOutside,
   useSidebar,
 } from "../../../.."
@@ -20,9 +21,17 @@ import { Menu } from "../../../Menu"
 export const SidebarTopMedusaMenu = () => {
   const [openMenu, setOpenMenu] = useState(false)
   const { setDesktopSidebarOpen } = useSidebar()
+  const { track } = useAnalytics()
   const ref = useRef<HTMLDivElement>(null)
 
-  const toggleOpen = () => setOpenMenu((prev) => !prev)
+  const toggleOpen = () => {
+    setOpenMenu((prev) => !prev)
+    if (!openMenu) {
+      track("nav_sidebar_open", {
+        url: window.location.href,
+      })
+    }
+  }
 
   useClickOutside({
     elmRef: ref,