Fix buggy navbar active element indicator (#40936)

This PR makes improves the navbar active element indicator by:

- fixing a bug where the indicator could be mispositioned when the window resizes
- making the animation buttery smooth with `transform`
- making the animation work on small screens too
- making the element accessible by disabling the animation when `prefers-reduced-motion` is set to `reduce`

GitOrigin-RevId: cc75c44f31f150002fdea9a957ecb8cd316c79e6

Author: Nicolapps

npm-packages/dashboard/src/components/header/Header/Header.tsx

@@ -5,7 +5,6 @@ import Link from "next/link";
 import { SupportWidget, useSupportFormOpen } from "elements/SupportWidget";
 import { Portal } from "@headlessui/react";
 import { Button } from "@ui/Button";
-import { useReducer } from "react";
 import { AskAI } from "elements/AskAI";
 import { DeploymentDisplay } from "elements/DeploymentDisplay";
 import { useCurrentProject } from "api/projects";
@@ -41,19 +40,13 @@ function Support() {
 }
 
 export function Header({ children, logoLink = "/", user }: HeaderProps) {
-  const [headerKey, forceRerender] = useReducer((x) => x + 1, 0);
-
   const project = useCurrentProject();
 
   return (
     <header
       className={classNames(
         "flex justify-between min-h-[56px] overflow-x-auto scrollbar-none bg-background-secondary border-b",
       )}
-      // Re-render the header content when the user scrolls so
-      // the underline on the active nav item can be updated.
-      // TODO: Don't absolutely position the underline
-      onScroll={forceRerender}
     >
       <div className="flex items-center bg-background-secondary px-2">
         <div className="rounded-full p-2 transition-colors hover:bg-background-tertiary">
@@ -70,7 +63,7 @@ export function Header({ children, logoLink = "/", user }: HeaderProps) {
             />
           </Link>
         </div>
-        <div key={headerKey}>{children}</div>
+        <div>{children}</div>
       </div>
       {project && <DeploymentDisplay project={project} />}
       <div className="flex items-center bg-background-secondary px-2">

npm-packages/dashboard/src/components/header/NavBar/NavBar.tsx

@@ -1,6 +1,6 @@
 import classNames from "classnames";
 import Link from "next/link";
-import { useState } from "react";
+import { useEffect, useRef } from "react";
 
 type NavItem = {
   label: string;
@@ -13,43 +13,55 @@ type NavBarProps = {
 };
 
 export function NavBar({ items, activeLabel }: NavBarProps) {
-  const [ref, setRef] = useState<HTMLAnchorElement | null>(null);
-  const rect = ref?.getBoundingClientRect();
+  const parentRef = useRef<HTMLDivElement | null>(null);
+  const activeLinkRef = useRef<HTMLAnchorElement | null>(null);
+  const activeIndicatorRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    // Reposition indicator
+    if (
+      !activeLinkRef.current ||
+      !activeIndicatorRef.current ||
+      !parentRef.current
+    ) {
+      return;
+    }
+
+    const rect = activeLinkRef.current.getBoundingClientRect();
+    const parentRect = parentRef.current.getBoundingClientRect();
+
+    activeIndicatorRef.current.style.width = `100%`;
+    activeIndicatorRef.current.style.top = `${rect.y + rect.height + 4}px`;
+    activeIndicatorRef.current.style.transform = `translateX(${rect.x - parentRect.x}px) scaleX(${parentRect.width === 0 ? 0 : rect.width / parentRect.width})`;
+  }, [activeLabel]);
 
   return (
-    <div>
-      <div className="flex gap-1 truncate select-none">
+    <div className="relative">
+      <div className="flex gap-1 truncate select-none" ref={parentRef}>
         {items.map(({ label, href }) => (
           <div className="flex flex-col" key={label}>
             <Link
               href={href}
               passHref
-              ref={(r) => (activeLabel === label ? setRef(r) : undefined)}
+              ref={activeLabel === label ? activeLinkRef : undefined}
               className={classNames(
                 "p-2 my-2 mx-1 text-sm",
                 "text-content-primary",
                 "hover:bg-background-tertiary rounded-full",
                 {
-                  "underline-offset-[1rem] decoration-4 font-medium underline sm:no-underline":
-                    activeLabel === label,
+                  "decoration-4 font-medium": activeLabel === label,
                 },
               )}
             >
               {label}
             </Link>
           </div>
         ))}
-        {rect && (
-          <div
-            className="absolute mt-auto hidden h-1 w-full bg-content-secondary sm:block"
-            style={{
-              width: rect.width,
-              top: rect.y + rect.height + 4,
-              left: rect.x,
-              transition: "left 150ms",
-            }}
-          />
-        )}
+
+        <div
+          className="absolute mt-auto h-1 w-0 origin-top-left bg-content-secondary transition-transform will-change-transform motion-reduce:transition-none"
+          ref={activeIndicatorRef}
+        />
       </div>
     </div>
   );