add exclude option to navlink active indicator

src/features/core/components/nav-link/nav-link.tsx

@@ -1,6 +1,6 @@
 import { Flex, Box, Text } from "@mantine/core";
 import { Link, useRouterState } from "@tanstack/react-router";
-import styles from './styles.module.css';
+import styles from "./styles.module.css";
 import { Icon } from "@phosphor-icons/react";
 import { useMemo } from "react";
 
@@ -9,21 +9,55 @@ interface NavLinkProps {
   label: string;
   Icon: Icon;
   include?: string[];
+  exclude?: string[];
 }
 
-export const NavLink = ({ href, label, Icon, include }: NavLinkProps) => {
+export const NavLink = ({
+  href,
+  label,
+  Icon,
+  include,
+  exclude,
+}: NavLinkProps) => {
   const router = useRouterState();
-  const isActive = useMemo(() => (router.location.pathname === href || (router.location.pathname.includes(href) && href !== '/')) || include?.includes(router.location.pathname), [router.location.pathname, href]);
+  const isActive = useMemo(
-  
+    () =>
+      (!exclude?.some((e) => router.location.pathname.includes(e)) &&
+        (router.location.pathname === href ||
+          (router.location.pathname.includes(href) && href !== "/"))) ||
+      include?.includes(router.location.pathname),
+    [router.location.pathname, href]
+  );
+
   return (
-    <Box component={Link} to={href} 
+    <Box
+      component={Link}
+      to={href}
       className={styles.navLinkBox}
       p={{ base: 0, sm: 8 }}
     >
-      <Flex direction={{ base: 'column', md: 'row' }} align='center' gap={{ base: 0, md: 'xs' }}>
+      <Flex
-        <Icon weight={isActive ? 'fill' : 'regular'} size={28} style={{ color: isActive ? 'var(--mantine-primary-color-filled)' : undefined }} />
+        direction={{ base: "column", md: "row" }}
-        <Text visibleFrom='md' ta='center' size='md' fw={isActive ? 800 : 500} c={isActive ? 'var(--mantine-primary-color-filled)' : undefined}>{label}</Text>
+        align="center"
+        gap={{ base: 0, md: "xs" }}
+      >
+        <Icon
+          weight={isActive ? "fill" : "regular"}
+          size={28}
+          style={{
+            color: isActive ? "var(--mantine-primary-color-filled)" : undefined,
+          }}
+        />
+        <Text
+          visibleFrom="md"
+          ta="center"
+          size="md"
+          fw={isActive ? 800 : 500}
+          c={isActive ? "var(--mantine-primary-color-filled)" : undefined}
+        >
+          {label}
+        </Text>
       </Flex>
     </Box>
-  )
+  );
-}
+};

src/features/core/hooks/use-links.ts

@@ -17,7 +17,8 @@ export const useLinks = (userId: string | undefined, roles: string[]) =>
       {
         label: 'Tournaments',
         href: '/tournaments',
-        Icon: TrophyIcon
+        Icon: TrophyIcon,
+        exclude: ['/admin/tournaments']
       },
       {
         label: 'Profile',