From 36cb4f6cd25afecffd8b73fa984b75a9e6149cc6 Mon Sep 17 00:00:00 2001
From: Chase Nelson <Chase.a.nelson@gmail.com>
Date: Sat, 12 Oct 2024 02:09:00 -0400
Subject: [PATCH] fix: docs navigation dropdowns with the same title (#3488)

---
 apps/docs/components/Navigation.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/docs/components/Navigation.tsx b/apps/docs/components/Navigation.tsx
index fc0059b858..2d17f8402a 100644
--- a/apps/docs/components/Navigation.tsx
+++ b/apps/docs/components/Navigation.tsx
@@ -164,7 +164,7 @@ const NavigationGroup = ({
     if (openGroups.includes(title)) {
       setOpenGroups(openGroups.filter((t) => t !== title));
     } else {
-      setOpenGroups([...openGroups, title]);
+      setOpenGroups([title]);
     }
     setActiveGroup(group);
   };
@@ -186,7 +186,7 @@ const NavigationGroup = ({
         </AnimatePresence>
         <ul role="list" className="border-l border-transparent">
           {group.links.map((link) => (
-            <motion.li key={link.title} layout="position" className="relative">
+            <motion.li key={`${group.title}-${link.title}`} layout="position" className="relative">
               {link.href ? (
                 <NavLink
                   href={isMobile && link.children ? "" : link.href}
@@ -194,19 +194,19 @@ const NavigationGroup = ({
                   {link.title}
                 </NavLink>
               ) : (
-                <div onClick={() => toggleParentTitle(link.title)}>
+                <div onClick={() => toggleParentTitle(`${group.title}-${link.title}`)}>
                   <NavLink
                     href={!isMobile ? link.children?.[0]?.href || "" : undefined}
                     active={
                       !!(
-                        isParentOpen(link.title) &&
+                        isParentOpen(`${group.title}-${link.title}`) &&
                         link.children &&
                         link.children.some((child) => pathname.startsWith(child.href))
                       )
                     }>
                     <span className="flex w-full justify-between">
                       {link.title}
-                      {isParentOpen(link.title) ? (
+                      {isParentOpen(`${group.title}-${link.title}`) ? (
                         <ChevronUpIcon className="my-1 h-4" />
                       ) : (
                         <ChevronDownIcon className="my-1 h-4" />
@@ -216,7 +216,7 @@ const NavigationGroup = ({
                 </div>
               )}
               <AnimatePresence mode="popLayout" initial={false}>
-                {isActiveGroup && link.children && isParentOpen(link.title) && (
+                {isActiveGroup && link.children && isParentOpen(`${group.title}-${link.title}`) && (
                   <motion.ul
                     role="list"
                     initial={{ opacity: 0 }}