From 028d36fa40bead09d9a2231e5bdac61ca2e6703a Mon Sep 17 00:00:00 2001 From: Adrian Lopez Gonzalez Date: Tue, 2 Dec 2025 08:51:47 +0100 Subject: [PATCH 1/3] :sparkles: Add exact matching prop to sidebar menu items --- src/atoms/types/SideBar.ts | 6 ++++++ src/organisms/SideBar/MenuItem/BasicMenuItem.tsx | 15 +++++++++++---- .../SideBar/MenuItem/CollapsableMenuItem.tsx | 9 +++++++-- src/organisms/SideBar/MenuItem/MenuItem.utils.ts | 2 +- 4 files changed, 25 insertions(+), 7 deletions(-) diff --git a/src/atoms/types/SideBar.ts b/src/atoms/types/SideBar.ts index 43ac29c64..2c22a744a 100644 --- a/src/atoms/types/SideBar.ts +++ b/src/atoms/types/SideBar.ts @@ -7,6 +7,12 @@ interface SideBarMenuItemBase { name: string; link: string; featureUuid?: string; + /** + * `true` if the menu item should be matched exactly against the current URL. + * When `false`, the menu item is considered active if the current URL includes the menu item's link. + * The comparison always ignores URL parameters. + */ + exact?: boolean; } export type BasicSideBarMenuItem = { diff --git a/src/organisms/SideBar/MenuItem/BasicMenuItem.tsx b/src/organisms/SideBar/MenuItem/BasicMenuItem.tsx index 842eed4b5..755c4abb7 100644 --- a/src/organisms/SideBar/MenuItem/BasicMenuItem.tsx +++ b/src/organisms/SideBar/MenuItem/BasicMenuItem.tsx @@ -15,6 +15,7 @@ import { import { canNavigate, isCurrentUrl, + isExactUrl, } from 'src/organisms/SideBar/MenuItem/MenuItem.utils'; import { useSideBar } from 'src/providers/SideBarProvider'; @@ -30,13 +31,19 @@ export const BasicMenuItem: FC = ({ name, disabled = false, featureUuid, + exact, ...props }) => { const { pathname } = useLocation(); - const isActive = isCurrentUrl({ - currentUrl: pathname, - link, - }); + const isActive = exact + ? isExactUrl({ + currentUrl: pathname, + link, + }) + : isCurrentUrl({ + currentUrl: pathname, + link, + }); const { isOpen } = useSideBar(); const shouldNavigate = canNavigate({ currentUrl: pathname, diff --git a/src/organisms/SideBar/MenuItem/CollapsableMenuItem.tsx b/src/organisms/SideBar/MenuItem/CollapsableMenuItem.tsx index 00a7b7f75..22657caab 100644 --- a/src/organisms/SideBar/MenuItem/CollapsableMenuItem.tsx +++ b/src/organisms/SideBar/MenuItem/CollapsableMenuItem.tsx @@ -14,7 +14,10 @@ import { Link, MenuItemWrapper, } from 'src/organisms/SideBar/MenuItem/MenuItem.styles'; -import { isCurrentUrl } from 'src/organisms/SideBar/MenuItem/MenuItem.utils'; +import { + isCurrentUrl, + isExactUrl, +} from 'src/organisms/SideBar/MenuItem/MenuItem.utils'; import { useSideBar } from 'src/providers/SideBarProvider'; import styled, { css } from 'styled-components'; @@ -99,7 +102,9 @@ export const CollapsableMenuItem: FC = ({ const { isOpen } = useSideBar(); const previousIsOpen = usePrevious(isOpen); const isActive = items.some((item) => - isCurrentUrl({ currentUrl: pathname, link: item.link }) + item.exact + ? isExactUrl({ currentUrl: pathname, link: item.link }) + : isCurrentUrl({ currentUrl: pathname, link: item.link }) ); const parentRef = useRef(null); const [expanded, setExpanded] = useState(false); diff --git a/src/organisms/SideBar/MenuItem/MenuItem.utils.ts b/src/organisms/SideBar/MenuItem/MenuItem.utils.ts index 2fbbcb477..aba1dcc11 100644 --- a/src/organisms/SideBar/MenuItem/MenuItem.utils.ts +++ b/src/organisms/SideBar/MenuItem/MenuItem.utils.ts @@ -10,7 +10,7 @@ export const isCurrentUrl = ({ currentUrl, link }: IsUrlArgs) => { return (currentIncludesLink && link !== '/') || link === currentUrl; }; -const isExactUrl = ({ currentUrl, link }: IsUrlArgs) => { +export const isExactUrl = ({ currentUrl, link }: IsUrlArgs) => { const currentWithoutParams = currentUrl.split('?')[0]; return currentWithoutParams === link; }; From 46a1da351ea88cc0ab8a387fa49d576758de0aef Mon Sep 17 00:00:00 2001 From: Adrian Lopez Gonzalez Date: Tue, 2 Dec 2025 09:20:34 +0100 Subject: [PATCH 2/3] Update src/atoms/types/SideBar.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- src/atoms/types/SideBar.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/atoms/types/SideBar.ts b/src/atoms/types/SideBar.ts index 2c22a744a..0ed903ba6 100644 --- a/src/atoms/types/SideBar.ts +++ b/src/atoms/types/SideBar.ts @@ -9,7 +9,7 @@ interface SideBarMenuItemBase { featureUuid?: string; /** * `true` if the menu item should be matched exactly against the current URL. - * When `false`, the menu item is considered active if the current URL includes the menu item's link. + * When `false` or `undefined` (default), the menu item is considered active if the current URL includes the menu item's link. * The comparison always ignores URL parameters. */ exact?: boolean; From 9bd6c3702843cef745b6c1ccca526237017bb681 Mon Sep 17 00:00:00 2001 From: Adrian Lopez Gonzalez Date: Tue, 2 Dec 2025 09:27:05 +0100 Subject: [PATCH 3/3] Update src/atoms/types/SideBar.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- src/atoms/types/SideBar.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/atoms/types/SideBar.ts b/src/atoms/types/SideBar.ts index 0ed903ba6..1cb692e36 100644 --- a/src/atoms/types/SideBar.ts +++ b/src/atoms/types/SideBar.ts @@ -9,8 +9,8 @@ interface SideBarMenuItemBase { featureUuid?: string; /** * `true` if the menu item should be matched exactly against the current URL. - * When `false` or `undefined` (default), the menu item is considered active if the current URL includes the menu item's link. - * The comparison always ignores URL parameters. + * When `true`, the menu item is active only when the current URL (excluding query parameters) matches the menu item's link exactly. + * When `false` or `undefined` (default), the menu item is active if the current URL includes the menu item's link. */ exact?: boolean; }