From f0e13784e59c9fe6e9d06a4d211e0142a3032567 Mon Sep 17 00:00:00 2001
From: Yash Joshi <jyash97@gmail.com>
Date: Fri, 30 Dec 2022 01:10:02 +0530
Subject: [PATCH] fix(sidebar): highlight active feature in nested route
 (#1929)

Co-authored-by: Pranay Prateek <pranay@signoz.io>
Co-authored-by: Palash Gupta <palashgdev@gmail.com>
---
 frontend/src/container/SideNav/index.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/container/SideNav/index.tsx b/frontend/src/container/SideNav/index.tsx
index e2a1db6aef..7d22c05f7a 100644
--- a/frontend/src/container/SideNav/index.tsx
+++ b/frontend/src/container/SideNav/index.tsx
@@ -89,12 +89,14 @@ function SideNav(): JSX.Element {
 		},
 	];
 
+	const currentMenu = menus.find((menu) => pathname.startsWith(menu.to));
+
 	return (
 		<Sider collapsible collapsed={collapsed} onCollapse={onCollapse} width={200}>
 			<Menu
 				theme="dark"
 				defaultSelectedKeys={[ROUTES.APPLICATION]}
-				selectedKeys={[pathname]}
+				selectedKeys={currentMenu ? [currentMenu?.to] : []}
 				mode="inline"
 			>
 				{menus.map(({ to, Icon, name, tags }) => (