[BE][HUD] Improve dropdown behavior on touch devices (#6942)

###  Summary

- Fixed dropdown menus (Metrics ▾, Benchmarks ▾, Dev Infra ▾) that were
navigating to pages instead of expanding on mobile
- Resolved z-index stacking issues causing dropdowns to appear behind
other menu items

###  Changes

1. Mobile touch handling: Added touch device detection to prevent
navigation and enable proper dropdown toggling on mobile devices
2. Z-index fix: Removed z-index: 9999 from navbar <li> elements to
prevent stacking context conflicts

###  Technical details

- Touch devices now use onClick to toggle dropdowns with
preventDefault() to stop navigation
  - Non-touch devices continue using hover behavior
- Removing z-index from parent elements allows dropdown z-index to work
correctly in the document's root stacking context


---

Before:


https://github.com/user-attachments/assets/f9810299-75b4-47cb-8bb0-f51d0c9b051e

After:


https://github.com/user-attachments/assets/b4ed1f34-612a-45de-a216-cd22e6392287

Author: izaitsevfb

torchci/components/layout/NavBar.module.css

@@ -7,12 +7,15 @@
   width: 100%;
   min-height: 60px;
   align-items: center;
+  position: relative;
+  z-index: 1000;
+  backdrop-filter: blur(1px);
+  -webkit-backdrop-filter: blur(1px);
 }
 
 .navbar li {
   padding: 0.9rem 1rem;
   position: relative;
-  z-index: 9999;
   display: flex;
   align-items: center;
 }

torchci/components/layout/NavBar.tsx

@@ -1,6 +1,6 @@
 import styles from "components/layout/NavBar.module.css";
 import Link from "next/link";
-import { useState } from "react";
+import React, { useState } from "react";
 import { AiFillGithub } from "react-icons/ai";
 import ThemeModePicker from "../common/ThemeModePicker";
 import LoginSection from "./LoginSection";
@@ -16,16 +16,58 @@ const NavBarDropdown = ({
   const dropdownStyle = dropdown ? { display: "block" } : {};
   const firstItemHref = items.length > 0 ? items[0].href : "#";
 
+  // Check if device is touch-enabled
+  const isTouchDevice = React.useMemo(
+    () =>
+      typeof window !== "undefined" &&
+      ("ontouchstart" in window || navigator.maxTouchPoints > 0),
+    []
+  );
+
+  // Set dropdown state only on non-touch devices
+  const setDropdownIfNotTouch = (value: boolean) => {
+    if (!isTouchDevice) {
+      setDropdown(value);
+    }
+  };
+
+  // Close dropdown when clicking outside
+  React.useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as HTMLElement;
+      if (!target.closest(`.${styles.dropdownContainer}`)) {
+        setDropdown(false);
+      }
+    };
+
+    if (dropdown) {
+      document.addEventListener("click", handleClickOutside);
+      return () => {
+        document.removeEventListener("click", handleClickOutside);
+      };
+    }
+  }, [dropdown]);
+
   return (
     <li
-      onMouseEnter={() => setDropdown(true)}
-      onMouseLeave={() => setDropdown(false)}
+      onMouseEnter={() => setDropdownIfNotTouch(true)}
+      onMouseLeave={() => setDropdownIfNotTouch(false)}
       style={{ padding: 0 }}
+      className={`${styles.dropdownContainer} ${
+        dropdown ? styles.dropdownOpen : ""
+      }`}
     >
       <Link
         href={firstItemHref}
         prefetch={false}
         className={styles.dropdowntitle}
+        onClick={(e) => {
+          if (isTouchDevice) {
+            // otherwise the menu will close immediately on touch devices
+            e.preventDefault();
+          }
+          setDropdown(!dropdown);
+        }}
       >
         {title} ▾
       </Link>

torchci/styles/globals.css

@@ -2,7 +2,11 @@
   --background-color: #ffffff;
   --text-color: #212529;
   --link-color: #0064cf;
-  --navbar-bg: linear-gradient(326deg, rgb(255 246 246), rgb(255 247 236));
+  --navbar-bg: linear-gradient(
+    326deg,
+    rgba(255, 246, 246, 0.5),
+    rgba(255, 247, 236, 0.5)
+  );
   --navbar-shadow: 0 -4px 20px 0px #c2c2c2;
   --dropdown-bg: white;
   --code-bg: aliceblue;
@@ -74,7 +78,11 @@
   --background-color: #1e1e1e;
   --text-color: #e0e0e0;
   --link-color: #4a90e2;
-  --navbar-bg: linear-gradient(326deg, #2a2a2a, #2d2d2d);
+  --navbar-bg: linear-gradient(
+    326deg,
+    rgba(42, 42, 42, 0.8),
+    rgba(45, 45, 45, 0.8)
+  );
   --navbar-shadow: 0 -4px 20px 0px rgba(0, 0, 0, 0.4);
   --dropdown-bg: #2a2a2a;
   --code-bg: #2a2a2a;