From fda7adfcd65b27916a6a43931fac758b0097c612 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Sat, 3 Jan 2026 22:54:01 +0100
Subject: [PATCH] pl-fe: fix links active state
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 .../pl-fe/src/components/sidebar-navigation-link.tsx | 12 ++++++++----
 .../pl-fe/src/components/thumb-navigation-link.tsx   |  2 +-
 2 files changed, 9 insertions(+), 5 deletions(-)

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<LinkOptions> {
 /** Desktop sidebar navigation link. */
 const SidebarNavigationLink = React.memo(React.forwardRef((props: ISidebarNavigationLink, ref: React.ForwardedRef<HTMLAnchorElement>): 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<React.MouseEvent> = (e) => {
     if (onClick) {
       onClick(e);
@@ -36,7 +40,7 @@ const SidebarNavigationLink = React.memo(React.forwardRef((props: ISidebarNaviga
   };
 
   return (
-    <Link
+    <LinkComponent
       activeOptions={{ exact: true }}
       activeProps={{ className: '⁂-sidebar-navigation-link--active' }}
       to={to}
@@ -56,7 +60,7 @@ const SidebarNavigationLink = React.memo(React.forwardRef((props: ISidebarNaviga
       </span>
 
       <p>{text}</p>
-    </Link>
+    </LinkComponent>
   );
 }), (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<IThumbNavigationLink> = ({ 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 (
     <Link {...props} activeOptions={{ exact }} className='⁂-thumb-navigation__item' activeProps={{ className: '⁂-thumb-navigation__item--active' }} title={text}>