diff --git a/src/components/layout/Templates/ManageLayout.tsx b/src/components/layout/Templates/ManageLayout.tsx
index d73fcf73b..305410ef3 100644
--- a/src/components/layout/Templates/ManageLayout.tsx
+++ b/src/components/layout/Templates/ManageLayout.tsx
@@ -30,6 +30,7 @@ import { useSession } from 'next-auth/react';
import { useTranslation } from 'next-i18next';
import Image from 'next/image';
import Link from 'next/link';
+import { useRouter } from 'next/router';
import { ReactNode, RefObject, forwardRef } from 'react';
import { useScreenLargerThan } from '~/hooks/useScreenLargerThan';
import { usePackageAttributesStore } from '~/tools/client/zustands/usePackageAttributesStore';
@@ -140,6 +141,7 @@ const CustomNavigationLink = forwardRef<
CustomNavigationLinkProps
>(({ name, navigationLink }, ref) => {
const { t } = useTranslation('layout/manage');
+ const router = useRouter();
const commonProps = {
label: t(`navigation.${name}.title`),
@@ -148,21 +150,28 @@ const CustomNavigationLink = forwardRef<
),
+ defaultOpened: false,
};
if ('href' in navigationLink) {
+ const isActive = router.pathname.endsWith(navigationLink.href);
return (
}
component={Link}
href={navigationLink.href}
+ active={isActive}
/>
);
}
+ const isAnyActive = Object.entries(navigationLink.items)
+ .map(([_, item]) => item.href)
+ .some((href) => router.pathname.endsWith(href));
+
return (
- }>
+ }>
{Object.entries(navigationLink.items).map(([itemName, item]) => {
const commonItemProps = {
label: t(`navigation.${name}.items.${itemName}`),
@@ -170,11 +179,13 @@ const CustomNavigationLink = forwardRef<
href: item.href,
};
+ const matchesActive = router.pathname.endsWith(item.href);
+
if (item.href.startsWith('http')) {
- return ;
+ return ;
}
- return ;
+ return ;
})}
);