From 529ed4432ca931c838c3e66488d376bb9414e052 Mon Sep 17 00:00:00 2001
From: Kunal Vishwakarma <116634168+kunalv17@users.noreply.github.com>
Date: Tue, 25 Apr 2023 12:10:05 +0530
Subject: [PATCH] chore: fixed sidebar highlight not working (#952)

---
 .../components/project/single-sidebar-project.tsx  |  4 ++--
 apps/app/components/workspace/sidebar-menu.tsx     | 14 ++++++++++++--
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/apps/app/components/project/single-sidebar-project.tsx b/apps/app/components/project/single-sidebar-project.tsx
index 7c16b62bf..b2db09157 100644
--- a/apps/app/components/project/single-sidebar-project.tsx
+++ b/apps/app/components/project/single-sidebar-project.tsx
@@ -171,7 +171,7 @@ export const SingleSidebarProject: React.FC<Props> = ({
                   <Link key={item.name} href={item.href}>
                     <a
                       className={`group flex items-center rounded-md p-2 text-xs font-medium outline-none ${
-                        item.href === router.asPath
+                        router.asPath.includes(item.href)
                           ? "bg-brand-base text-brand-secondary"
                           : "text-brand-secondary hover:bg-brand-surface-1 hover:text-brand-secondary focus:bg-brand-base focus:text-brand-secondary"
                       } ${sidebarCollapse ? "justify-center" : ""}`}
@@ -179,7 +179,7 @@ export const SingleSidebarProject: React.FC<Props> = ({
                       <div className="grid place-items-center">
                         <item.icon
                           className={`h-5 w-5 flex-shrink-0 ${
-                            item.href === router.asPath
+                            router.asPath.includes(item.href)
                               ? "text-brand-secondary"
                               : "text-brand-secondary group-hover:text-brand-base"
                           } ${!sidebarCollapse ? "mr-3" : ""}`}
diff --git a/apps/app/components/workspace/sidebar-menu.tsx b/apps/app/components/workspace/sidebar-menu.tsx
index 4250d7376..c655b9fa0 100644
--- a/apps/app/components/workspace/sidebar-menu.tsx
+++ b/apps/app/components/workspace/sidebar-menu.tsx
@@ -42,7 +42,11 @@ export const WorkspaceSidebarMenu: React.FC = () => {
         <Link key={index} href={link.href}>
           <a
             className={`${
-              link.href === router.asPath
+              (
+                link.name === "Dashboard"
+                  ? router.asPath === link.href
+                  : router.asPath.includes(link.href)
+              )
                 ? "bg-brand-base text-brand-base"
                 : "text-brand-secondary hover:bg-brand-base hover:text-brand-base focus:bg-brand-base"
             } group flex w-full items-center gap-3 rounded-md p-2 text-sm font-medium outline-none ${
@@ -52,7 +56,13 @@ export const WorkspaceSidebarMenu: React.FC = () => {
             <span className="grid h-5 w-5 flex-shrink-0 place-items-center">
               <link.icon
                 className={`${
-                  link.href === router.asPath ? "text-brand-base" : "text-brand-secondary"
+                  (
+                    link.name === "Dashboard"
+                      ? router.asPath === link.href
+                      : router.asPath.includes(link.href)
+                  )
+                    ? "text-brand-base"
+                    : "text-brand-secondary"
                 } group-hover:text-brand-base`}
                 aria-hidden="true"
                 height="20"