[WEB-1635] style: fix vertical section tabs highlights.

web/core/components/archives/archive-tabs-list.tsx

@@ -11,7 +11,6 @@ export const ArchiveTabsList: FC = observer(() => {
   // router
   const { workspaceSlug, projectId } = useParams();
   const pathname = usePathname();
-  const activeTab = pathname.split("/").pop();
   // store hooks
   const { getProjectById } = useProject();
 
@@ -28,7 +27,7 @@ export const ArchiveTabsList: FC = observer(() => {
             <Link key={tab.key} href={`/${workspaceSlug}/projects/${projectId}/archives/${tab.key}`}>
               <span
                 className={`flex min-w-min flex-shrink-0 whitespace-nowrap border-b-2 py-3 px-4 text-sm font-medium outline-none ${
-                  tab.key === activeTab
+                  pathname.includes(tab.key)
                     ? "border-custom-primary-100 text-custom-primary-100"
                     : "border-transparent hover:border-custom-border-200 text-custom-text-300 hover:text-custom-text-400"
                 }`}

web/core/constants/dashboard.ts

@@ -264,39 +264,39 @@ export const SIDEBAR_MENU_ITEMS: {
     label: "Home",
     href: ``,
     access: EUserWorkspaceRoles.GUEST,
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}`,
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/`,
     Icon: Home,
   },
   {
     key: "analytics",
     label: "Analytics",
     href: `/analytics`,
     access: EUserWorkspaceRoles.MEMBER,
-    highlight: (pathname: string, baseUrl: string) => pathname.includes(`${baseUrl}/analytics`),
+    highlight: (pathname: string, baseUrl: string) => pathname.includes(`${baseUrl}/analytics/`),
     Icon: BarChart2,
   },
   {
     key: "projects",
     label: "Projects",
     href: `/projects`,
     access: EUserWorkspaceRoles.GUEST,
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/projects`,
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/projects/`,
     Icon: Briefcase,
   },
   {
     key: "all-issues",
     label: "All Issues",
     href: `/workspace-views/all-issues`,
     access: EUserWorkspaceRoles.GUEST,
-    highlight: (pathname: string, baseUrl: string) => pathname.includes(`${baseUrl}/workspace-views`),
+    highlight: (pathname: string, baseUrl: string) => pathname.includes(`${baseUrl}/workspace-views/`),
     Icon: CheckCircle,
   },
   {
     key: "active-cycles",
     label: "Active Cycles",
     href: `/active-cycles`,
     access: EUserWorkspaceRoles.GUEST,
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/active-cycles`,
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/active-cycles/`,
     Icon: ContrastIcon,
   },
 ];

web/core/constants/profile.ts

@@ -13,21 +13,21 @@ export const PROFILE_ACTION_LINKS: {
     key: "profile",
     label: "Profile",
     href: `/profile`,
-    highlight: (pathname: string) => pathname === "/profile",
+    highlight: (pathname: string) => pathname === "/profile/",
     Icon: CircleUser,
   },
   {
     key: "security",
     label: "Security",
     href: `/profile/security`,
-    highlight: (pathname: string) => pathname === "/profile/security",
+    highlight: (pathname: string) => pathname === "/profile/security/",
     Icon: KeyRound,
   },
   {
     key: "activity",
     label: "Activity",
     href: `/profile/activity`,
-    highlight: (pathname: string) => pathname === "/profile/activity",
+    highlight: (pathname: string) => pathname === "/profile/activity/",
     Icon: Activity,
   },
   {
@@ -41,7 +41,7 @@ export const PROFILE_ACTION_LINKS: {
       key: "notifications",
       label: "Notifications",
       href: `/profile/notifications`,
-      highlight: (pathname: string) => pathname === "/profile/notifications",
+      highlight: (pathname: string) => pathname === "/profile/notifications/",
       Icon: Bell,
     },
 ];

web/core/constants/project.ts

@@ -80,55 +80,55 @@ export const PROJECT_SETTINGS_LINKS: {
     label: "General",
     href: `/settings`,
     access: EUserProjectRoles.MEMBER,
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings`,
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/`,
     Icon: SettingIcon,
   },
   {
     key: "members",
     label: "Members",
     href: `/settings/members`,
     access: EUserProjectRoles.MEMBER,
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/members`,
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/members/`,
     Icon: SettingIcon,
   },
   {
     key: "features",
     label: "Features",
     href: `/settings/features`,
     access: EUserProjectRoles.ADMIN,
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/features`,
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/features/`,
     Icon: SettingIcon,
   },
   {
     key: "states",
     label: "States",
     href: `/settings/states`,
     access: EUserProjectRoles.MEMBER,
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/states`,
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/states/`,
     Icon: SettingIcon,
   },
   {
     key: "labels",
     label: "Labels",
     href: `/settings/labels`,
     access: EUserProjectRoles.MEMBER,
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/labels`,
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/labels/`,
     Icon: SettingIcon,
   },
   {
     key: "estimates",
     label: "Estimates",
     href: `/settings/estimates`,
     access: EUserProjectRoles.ADMIN,
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/estimates`,
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/estimates/`,
     Icon: SettingIcon,
   },
   {
     key: "automations",
     label: "Automations",
     href: `/settings/automations`,
     access: EUserProjectRoles.ADMIN,
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/automations`,
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/automations/`,
     Icon: SettingIcon,
   },
 ];

web/core/constants/workspace.ts

@@ -149,47 +149,47 @@ export const WORKSPACE_SETTINGS_LINKS: {
     label: "General",
     href: `/settings`,
     access: EUserWorkspaceRoles.GUEST,
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings`,
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/`,
     Icon: SettingIcon,
   },
   {
     key: "members",
     label: "Members",
     href: `/settings/members`,
     access: EUserWorkspaceRoles.GUEST,
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/members`,
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/members/`,
     Icon: SettingIcon,
   },
   {
     key: "billing-and-plans",
     label: "Billing and plans",
     href: `/settings/billing`,
     access: EUserWorkspaceRoles.ADMIN,
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/billing`,
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/billing/`,
     Icon: SettingIcon,
   },
   {
     key: "export",
     label: "Exports",
     href: `/settings/exports`,
     access: EUserWorkspaceRoles.MEMBER,
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/exports`,
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/exports/`,
     Icon: SettingIcon,
   },
   {
     key: "webhooks",
     label: "Webhooks",
     href: `/settings/webhooks`,
     access: EUserWorkspaceRoles.ADMIN,
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/webhooks`,
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/webhooks/`,
     Icon: SettingIcon,
   },
   {
     key: "api-tokens",
     label: "API tokens",
     href: `/settings/api-tokens`,
     access: EUserWorkspaceRoles.ADMIN,
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/api-tokens`,
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/api-tokens/`,
     Icon: SettingIcon,
   },
 ];