matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pl-fe: fix links active state

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2026-01-03 22:54:01 +01:00
parent a81f727fb6
commit fda7adfcd6
2 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/pl-fe/src/components/sidebar-navigation-link.tsx
View File

@ -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);

2
packages/pl-fe/src/components/thumb-navigation-link.tsx
View File

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