From 2c17e5b073ad6fa65825fee105765b626b73ad50 Mon Sep 17 00:00:00 2001 From: hiba-aldalaty Date: Mon, 6 Dec 2021 11:33:00 +0000 Subject: [PATCH] Fix active submenu items Signed-off-by: hiba-aldalaty --- .changeset/eight-insects-kiss.md | 5 +++++ .../src/layout/Sidebar/SidebarSubmenuItem.tsx | 12 +++++++----- 2 files changed, 12 insertions(+), 5 deletions(-) create mode 100644 .changeset/eight-insects-kiss.md diff --git a/.changeset/eight-insects-kiss.md b/.changeset/eight-insects-kiss.md new file mode 100644 index 0000000000..e42a1b7c27 --- /dev/null +++ b/.changeset/eight-insects-kiss.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +Bug fix - items in sidebar submenu are only active when full path is active (including search parameters) diff --git a/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx b/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx index 2bb8a13592..4e2fff169c 100644 --- a/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx +++ b/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx @@ -116,14 +116,13 @@ export type SidebarSubmenuItemProps = { export const SidebarSubmenuItem = (props: SidebarSubmenuItemProps) => { const { title, to, icon: Icon, dropdownItems } = props; const classes = useStyles(); - const { pathname: locationPathname } = useLocation(); - const { pathname: toPathname } = useResolvedPath(to); + const { pathname: locationPathname, search: locationSearch } = useLocation(); + const { pathname: toPathname, search: toSearch } = useResolvedPath(to ?? ''); const { setIsHoveredOn } = useContext(SidebarItemWithSubmenuContext); const closeSubmenu = () => { setIsHoveredOn(false); }; - - let isActive = locationPathname === toPathname; + let isActive = locationPathname === toPathname && toSearch === locationSearch; const [showDropDown, setShowDropDown] = useState(false); const handleClickDropdown = () => { @@ -132,7 +131,10 @@ export const SidebarSubmenuItem = (props: SidebarSubmenuItemProps) => { if (dropdownItems !== undefined) { dropdownItems.some(item => { const resolvedPath = resolvePath(item.to); - isActive = locationPathname === resolvedPath.pathname; + isActive = + locationPathname === resolvedPath.pathname && + locationSearch === toSearch; + return isActive; }); return (