diff --git a/packages/pl-fe/src/components/sidebar-navigation-link.tsx b/packages/pl-fe/src/components/sidebar-navigation-link.tsx index 23685360c..87987f6aa 100644 --- a/packages/pl-fe/src/components/sidebar-navigation-link.tsx +++ b/packages/pl-fe/src/components/sidebar-navigation-link.tsx @@ -1,4 +1,4 @@ -import { Link, type LinkOptions } from '@tanstack/react-router'; +import { Link, useMatchRoute, type LinkOptions } from '@tanstack/react-router'; import React from 'react'; import { useSettings } from 'pl-fe/stores/settings'; @@ -23,10 +23,14 @@ interface ISidebarNavigationLink extends Partial { /** Desktop sidebar navigation link. */ const SidebarNavigationLink = React.memo(React.forwardRef((props: ISidebarNavigationLink, ref: React.ForwardedRef): JSX.Element => { const { icon, activeIcon, text, to, count, countMax, onClick, ...rest } = props; - const isActive = location.pathname === to; + const matchRoute = useMatchRoute(); const { demetricator } = useSettings(); + const LinkComponent = (to === undefined ? 'div' : Link) as typeof Link; + + const isActive = matchRoute({ to }) !== false; + const handleClick: React.EventHandler = (e) => { if (onClick) { onClick(e); @@ -36,7 +40,7 @@ const SidebarNavigationLink = React.memo(React.forwardRef((props: ISidebarNaviga }; return ( -

{text}

- + ); }), (prevProps, nextProps) => prevProps.count === nextProps.count); diff --git a/packages/pl-fe/src/components/thumb-navigation-link.tsx b/packages/pl-fe/src/components/thumb-navigation-link.tsx index 13ca52e5e..74998fef4 100644 --- a/packages/pl-fe/src/components/thumb-navigation-link.tsx +++ b/packages/pl-fe/src/components/thumb-navigation-link.tsx @@ -19,7 +19,7 @@ const ThumbNavigationLink: React.FC = ({ count, countMax, const matchRoute = useMatchRoute(); - const icon = (activeSrc && matchRoute({ to: props.to, params: props.params, search: props.search }) !== null && activeSrc) || src; + const icon = (activeSrc && matchRoute({ to: props.to, params: props.params, search: props.search }) !== false && activeSrc) || src; return (