From f0f0056fe306c3982958ca58098a0db4781eea06 Mon Sep 17 00:00:00 2001
From: Nicholas Flamy <30300649+NicholasFlamy@users.noreply.github.com>
Date: Tue, 11 Mar 2025 06:41:12 -0400
Subject: [PATCH] feat(docs): highlight active version in version switcher
 (#16790)

* docs: highlight active version in version switcher

* Add comment explaining workaround
---
 docs/src/components/version-switcher.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/docs/src/components/version-switcher.tsx b/docs/src/components/version-switcher.tsx
index 016e4ac1e6d..5cb23891aa7 100644
--- a/docs/src/components/version-switcher.tsx
+++ b/docs/src/components/version-switcher.tsx
@@ -4,7 +4,7 @@ import React, { useEffect, useState } from 'react';
 
 export default function VersionSwitcher(): JSX.Element {
   const [versions, setVersions] = useState([]);
-  const [label, setLabel] = useState('Versions');
+  const [activeLabel, setLabel] = useState('Versions');
 
   const windowSize = useWindowSize();
 
@@ -48,12 +48,13 @@ export default function VersionSwitcher(): JSX.Element {
     versions.length > 0 && (
       <DropdownNavbarItem
         className="version-switcher-34ab39"
-        label={label}
+        label={activeLabel}
         mobile={windowSize === 'mobile'}
         items={versions.map(({ label, url }) => ({
           label,
           to: new URL(location.pathname + location.search + location.hash, url).href,
           target: '_self',
+          className: label === activeLabel ? 'dropdown__link--active menu__link--active' : '', // workaround because React Router `<NavLink>` only supports using URL path for checking if active: https://v5.reactrouter.com/web/api/NavLink/isactive-func
         }))}
       />
     )