fix: docs navigation dropdowns with the same title (#3488)

This commit is contained in:
Chase Nelson
2024-10-12 02:09:00 -04:00
committed by GitHub
parent 6fa805e7ab
commit 36cb4f6cd2

View File

@@ -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 }}