refactor: move all sidebar links to constant file. (#3414)

* chore: move all workspace, project and profile links constants into their own constants file. * chore: sidebar menu links improvement.
2024-06-14 14:31:34 +00:00 · 2024-01-19 16:05:52 +05:30 · 2024-01-19 16:05:52 +05:30 · 7f5028a4f6
commit 7f5028a4f6
parent 06a7bdffd7
9 changed files with 296 additions and 184 deletions
--- a/web/components/command-palette/actions/workspace-settings-actions.tsx
+++ b/web/components/command-palette/actions/workspace-settings-actions.tsx
@ -1,8 +1,10 @@
 import { useRouter } from "next/router";
 import { Command } from "cmdk";
-// icons
-import { SettingIcon } from "components/icons";
+// hooks
+import { useUser } from "hooks/store";
 import Link from "next/link";
+// constants
+import { EUserWorkspaceRoles, WORKSPACE_SETTINGS_LINKS } from "constants/workspace";

 type Props = {
  closePalette: () => void;
@ -10,60 +12,40 @@ type Props = {

 export const CommandPaletteWorkspaceSettingsActions: React.FC<Props> = (props) => {
  const { closePalette } = props;
-
+  // router
  const router = useRouter();
  const { workspaceSlug } = router.query;
+  // mobx store
+  const {
+    membership: { currentWorkspaceRole },
+  } = useUser();
+  // derived values
+  const workspaceMemberInfo = currentWorkspaceRole || EUserWorkspaceRoles.GUEST;
+
+  const redirect = (path: string) => {
+    closePalette();
+    router.push(path);
+  };

  return (
    <>
-      <Command.Item onSelect={closePalette} className="focus:outline-none">
-        <Link href={`/${workspaceSlug}/settings`}>
-          <div className="flex items-center gap-2 text-custom-text-200">
-            <SettingIcon className="h-4 w-4 text-custom-text-200" />
-            General
-          </div>
-        </Link>
-      </Command.Item>
-      <Command.Item onSelect={closePalette} className="focus:outline-none">
-        <Link href={`/${workspaceSlug}/settings/members`}>
-          <div className="flex items-center gap-2 text-custom-text-200">
-            <SettingIcon className="h-4 w-4 text-custom-text-200" />
-            Members
-          </div>
-        </Link>
-      </Command.Item>
-      <Command.Item onSelect={closePalette} className="focus:outline-none">
-        <Link href={`/${workspaceSlug}/settings/billing`}>
-          <div className="flex items-center gap-2 text-custom-text-200">
-            <SettingIcon className="h-4 w-4 text-custom-text-200" />
-            Billing and Plans
-          </div>
-        </Link>
-      </Command.Item>
-      <Command.Item onSelect={closePalette} className="focus:outline-none">
-        <Link href={`/${workspaceSlug}/settings/integrations`}>
-          <div className="flex items-center gap-2 text-custom-text-200">
-            <SettingIcon className="h-4 w-4 text-custom-text-200" />
-            Integrations
-          </div>
-        </Link>
-      </Command.Item>
-      <Command.Item onSelect={closePalette} className="focus:outline-none">
-        <Link href={`/${workspaceSlug}/settings/imports`}>
-          <div className="flex items-center gap-2 text-custom-text-200">
-            <SettingIcon className="h-4 w-4 text-custom-text-200" />
-            Import
-          </div>
-        </Link>
-      </Command.Item>
-      <Command.Item onSelect={closePalette} className="focus:outline-none">
-        <Link href={`/${workspaceSlug}/settings/exports`}>
-          <div className="flex items-center gap-2 text-custom-text-200">
-            <SettingIcon className="h-4 w-4 text-custom-text-200" />
-            Export
-          </div>
-        </Link>
-      </Command.Item>
+      {WORKSPACE_SETTINGS_LINKS.map(
+        (setting) =>
+          workspaceMemberInfo >= setting.access && (
+            <Command.Item
+              key={setting.key}
+              onSelect={() => redirect(`/${workspaceSlug}${setting.href}`)}
+              className="focus:outline-none"
+            >
+              <Link href={`/${workspaceSlug}${setting.href}`}>
+                <div className="flex items-center gap-2 text-custom-text-200">
+                  <setting.Icon className="h-4 w-4 text-custom-text-200" />
+                  {setting.label}
+                </div>
+              </Link>
+            </Command.Item>
+          )
+      )}
    </>
  );
 };
--- a/web/components/workspace/sidebar-menu.tsx
+++ b/web/components/workspace/sidebar-menu.tsx
@ -2,7 +2,6 @@ import React from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-import { BarChart2, Briefcase, CheckCircle, LayoutGrid } from "lucide-react";
 // hooks
 import { useApplication, useUser } from "hooks/store";
 // components
@ -11,29 +10,7 @@ import { NotificationPopover } from "components/notifications";
 import { Tooltip } from "@plane/ui";
 // constants
 import { EUserWorkspaceRoles } from "constants/workspace";
-
-const workspaceLinks = (workspaceSlug: string) => [
-  {
-    Icon: LayoutGrid,
-    name: "Dashboard",
-    href: `/${workspaceSlug}`,
-  },
-  {
-    Icon: BarChart2,
-    name: "Analytics",
-    href: `/${workspaceSlug}/analytics`,
-  },
-  {
-    Icon: Briefcase,
-    name: "Projects",
-    href: `/${workspaceSlug}/projects`,
-  },
-  {
-    Icon: CheckCircle,
-    name: "All Issues",
-    href: `/${workspaceSlug}/workspace-views/all-issues`,
-  },
-];
+import { SIDEBAR_MENU_ITEMS } from "constants/dashboard";

 export const WorkspaceSidebarMenu = observer(() => {
  // store hooks
@ -45,37 +22,36 @@ export const WorkspaceSidebarMenu = observer(() => {
  const router = useRouter();
  const { workspaceSlug } = router.query;
  // computed
-  const isAuthorizedUser = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
+  const workspaceMemberInfo = currentWorkspaceRole || EUserWorkspaceRoles.GUEST;

  return (
-    <div className="w-full cursor-pointer space-y-1 p-4">
-      {workspaceLinks(workspaceSlug as string).map((link, index) => {
-        const isActive = link.name === "Settings" ? router.asPath.includes(link.href) : router.asPath === link.href;
-        if (!isAuthorizedUser && link.name === "Analytics") return;
-        return (
-          <Link key={index} href={link.href}>
-            <span className="block w-full">
-              <Tooltip
-                tooltipContent={link.name}
-                position="right"
-                className="ml-2"
-                disabled={!themeStore?.sidebarCollapsed}
-              >
-                <div
-                  className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
-                    isActive
-                      ? "bg-custom-primary-100/10 text-custom-primary-100"
-                      : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
-                  } ${themeStore?.sidebarCollapsed ? "justify-center" : ""}`}
+    <div className="w-full cursor-pointer space-y-2 p-4">
+      {SIDEBAR_MENU_ITEMS.map(
+        (link) =>
+          workspaceMemberInfo >= link.access && (
+            <Link key={link.key} href={`/${workspaceSlug}${link.href}`}>
+              <span className="block w-full my-1">
+                <Tooltip
+                  tooltipContent={link.label}
+                  position="right"
+                  className="ml-2"
+                  disabled={!themeStore?.sidebarCollapsed}
                >
-                  {<link.Icon className="h-4 w-4" />}
-                  {!themeStore?.sidebarCollapsed && link.name}
-                </div>
-              </Tooltip>
-            </span>
-          </Link>
-        );
-      })}
+                  <div
+                    className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
+                      link.highlight(router.asPath, `/${workspaceSlug}`)
+                        ? "bg-custom-primary-100/10 text-custom-primary-100"
+                        : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
+                    } ${themeStore?.sidebarCollapsed ? "justify-center" : ""}`}
+                  >
+                    {<link.Icon className="h-4 w-4" />}
+                    {!themeStore?.sidebarCollapsed && link.label}
+                  </div>
+                </Tooltip>
+              </span>
+            </Link>
+          )
+      )}
      <NotificationPopover />
    </div>
  );
--- a/web/constants/dashboard.ts
+++ b/web/constants/dashboard.ts
@ -14,6 +14,11 @@ import CompletedCreatedIssuesDark from "public/empty-state/dashboard/dark/comple
 import CompletedCreatedIssuesLight from "public/empty-state/dashboard/light/completed-created-issues.svg";
 // types
 import { TDurationFilterOptions, TIssuesListTypes, TStateGroups } from "@plane/types";
+import { Props } from "components/icons/types";
+// constants
+import { EUserWorkspaceRoles } from "./workspace";
+// icons
+import { BarChart2, Briefcase, CheckCircle, LayoutGrid, SendToBack } from "lucide-react";

 // gradients for issues by priority widget graph bars
 export const PRIORITY_GRAPH_GRADIENTS = [
@ -246,3 +251,53 @@ export const CREATED_ISSUES_EMPTY_STATES = {
    lightImage: CompletedCreatedIssuesLight,
  },
 };
+
+export const SIDEBAR_MENU_ITEMS: {
+  key: string;
+  label: string;
+  href: string;
+  access: EUserWorkspaceRoles;
+  highlight: (pathname: string, baseUrl: string) => boolean;
+  Icon: React.FC<Props>;
+}[] = [
+  {
+    key: "dashboard",
+    label: "Dashboard",
+    href: ``,
+    access: EUserWorkspaceRoles.GUEST,
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}`,
+    Icon: LayoutGrid,
+  },
+  {
+    key: "analytics",
+    label: "Analytics",
+    href: `/analytics`,
+    access: EUserWorkspaceRoles.MEMBER,
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/analytics`,
+    Icon: BarChart2,
+  },
+  {
+    key: "projects",
+    label: "Projects",
+    href: `/projects`,
+    access: EUserWorkspaceRoles.GUEST,
+    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 === `${baseUrl}/workspace-views/all-issues`,
+    Icon: CheckCircle,
+  },
+  {
+    key: "active-cycles",
+    label: "Active cycles",
+    href: `/active-cycles`,
+    access: EUserWorkspaceRoles.GUEST,
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/active-cycles`,
+    Icon: SendToBack,
+  },
+];
--- a/web/constants/profile.ts
+++ b/web/constants/profile.ts
@ -0,0 +1,40 @@
+import React from "react";
+// icons
+import { Activity, CircleUser, KeyRound, LucideProps, Settings2 } from "lucide-react";
+
+export const PROFILE_ACTION_LINKS: {
+  key: string;
+  label: string;
+  href: string;
+  highlight: (pathname: string) => boolean;
+  Icon: React.FC<LucideProps>;
+}[] = [
+  {
+    key: "profile",
+    label: "Profile",
+    href: `/profile`,
+    highlight: (pathname: string) => pathname === "/profile",
+    Icon: CircleUser,
+  },
+  {
+    key: "change-password",
+    label: "Change password",
+    href: `/profile/change-password`,
+    highlight: (pathname: string) => pathname === "/profile/change-password",
+    Icon: KeyRound,
+  },
+  {
+    key: "activity",
+    label: "Activity",
+    href: `/profile/activity`,
+    highlight: (pathname: string) => pathname === "/profile/activity",
+    Icon: Activity,
+  },
+  {
+    key: "preferences",
+    label: "Preferences",
+    href: `/profile/preferences`,
+    highlight: (pathname: string) => pathname.includes("/profile/preferences"),
+    Icon: Settings2,
+  },
+];
--- a/web/constants/project.ts
+++ b/web/constants/project.ts
@ -1,4 +1,8 @@
+// icons
 import { Globe2, Lock, LucideIcon } from "lucide-react";
+import { SettingIcon } from "components/icons";
+// types
+import { Props } from "components/icons/types";

 export enum EUserProjectRoles {
  GUEST = 5,
@ -71,3 +75,77 @@ export const PROJECT_UNSPLASH_COVERS = [
  "https://images.unsplash.com/photo-1691230995681-480d86cbc135?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80",
  "https://images.unsplash.com/photo-1675351066828-6fc770b90dd2?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80",
 ];
+
+export const PROJECT_SETTINGS_LINKS: {
+  key: string;
+  label: string;
+  href: string;
+  access: EUserProjectRoles;
+  highlight: (pathname: string, baseUrl: string) => boolean;
+  Icon: React.FC<Props>;
+}[] = [
+  {
+    key: "general",
+    label: "General",
+    href: `/settings`,
+    access: EUserProjectRoles.MEMBER,
+    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`,
+    Icon: SettingIcon,
+  },
+  {
+    key: "features",
+    label: "Features",
+    href: `/settings/features`,
+    access: EUserProjectRoles.ADMIN,
+    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`,
+    Icon: SettingIcon,
+  },
+  {
+    key: "labels",
+    label: "Labels",
+    href: `/settings/labels`,
+    access: EUserProjectRoles.MEMBER,
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/labels`,
+    Icon: SettingIcon,
+  },
+  {
+    key: "integrations",
+    label: "Integrations",
+    href: `/settings/integrations`,
+    access: EUserProjectRoles.ADMIN,
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/integrations`,
+    Icon: SettingIcon,
+  },
+  {
+    key: "estimates",
+    label: "Estimates",
+    href: `/settings/estimates`,
+    access: EUserProjectRoles.ADMIN,
+    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`,
+    Icon: SettingIcon,
+  },
+];
--- a/web/constants/workspace.ts
+++ b/web/constants/workspace.ts
@ -6,6 +6,9 @@ import ExcelLogo from "public/services/excel.svg";
 import JSONLogo from "public/services/json.svg";
 // types
 import { TStaticViewTypes } from "@plane/types";
+import { Props } from "components/icons/types";
+// icons
+import { SettingIcon } from "components/icons";

 export enum EUserWorkspaceRoles {
  GUEST = 5,
@ -115,48 +118,75 @@ export const RESTRICTED_URLS = [
 ];

 export const WORKSPACE_SETTINGS_LINKS: {
+  key: string;
  label: string;
  href: string;
  access: EUserWorkspaceRoles;
+  highlight: (pathname: string, baseUrl: string) => boolean;
+  Icon: React.FC<Props>;
 }[] = [
  {
+    key: "general",
    label: "General",
    href: `/settings`,
    access: EUserWorkspaceRoles.GUEST,
+    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`,
+    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`,
+    Icon: SettingIcon,
  },
  {
+    key: "integrations",
    label: "Integrations",
    href: `/settings/integrations`,
    access: EUserWorkspaceRoles.ADMIN,
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/integrations`,
+    Icon: SettingIcon,
  },
  {
+    key: "import",
    label: "Imports",
    href: `/settings/imports`,
    access: EUserWorkspaceRoles.ADMIN,
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/imports`,
+    Icon: SettingIcon,
  },
  {
+    key: "export",
    label: "Exports",
    href: `/settings/exports`,
    access: EUserWorkspaceRoles.MEMBER,
+    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`,
+    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`,
+    Icon: SettingIcon,
  },
 ];
--- a/web/layouts/settings-layout/profile/sidebar.tsx
+++ b/web/layouts/settings-layout/profile/sidebar.tsx
@ -4,39 +4,14 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { useTheme } from "next-themes";
-import { Activity, ChevronLeft, CircleUser, KeyRound, LogOut, MoveLeft, Plus, Settings2, UserPlus } from "lucide-react";
+import { ChevronLeft, LogOut, MoveLeft, Plus, UserPlus } from "lucide-react";
 // hooks
 import { useApplication, useUser, useWorkspace } from "hooks/store";
 import useToast from "hooks/use-toast";
 // ui
 import { Tooltip } from "@plane/ui";
-
-const PROFILE_ACTION_LINKS = [
-  {
-    key: "profile",
-    label: "Profile",
-    href: `/profile`,
-    Icon: CircleUser,
-  },
-  {
-    key: "change-password",
-    label: "Change password",
-    href: `/profile/change-password`,
-    Icon: KeyRound,
-  },
-  {
-    key: "activity",
-    label: "Activity",
-    href: `/profile/activity`,
-    Icon: Activity,
-  },
-  {
-    key: "preferences",
-    label: "Preferences",
-    href: `/profile/preferences`,
-    Icon: Settings2,
-  },
-];
+// constants
+import { PROFILE_ACTION_LINKS } from "constants/profile";

 const WORKSPACE_ACTION_LINKS = [
  {
@ -130,7 +105,7 @@ export const ProfileLayoutSidebar = observer(() => {
                  <Tooltip tooltipContent={link.label} position="right" className="ml-2" disabled={!sidebarCollapsed}>
                    <div
                      className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
-                        router.pathname === link.href
+                        link.highlight(router.pathname)
                          ? "bg-custom-primary-100/10 text-custom-primary-100"
                          : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
                      } ${sidebarCollapsed ? "justify-center" : ""}`}
--- a/web/layouts/settings-layout/project/sidebar.tsx
+++ b/web/layouts/settings-layout/project/sidebar.tsx
@ -1,66 +1,42 @@
 import React from "react";
 import { useRouter } from "next/router";
 import Link from "next/link";
+// hooks
+import { useUser } from "hooks/store";
+// constants
+import { EUserProjectRoles, PROJECT_SETTINGS_LINKS } from "constants/project";

 export const ProjectSettingsSidebar = () => {
  const router = useRouter();
  const { workspaceSlug, projectId } = router.query;
+  // mobx store
+  const {
+    membership: { currentProjectRole },
+  } = useUser();
+
+  const projectMemberInfo = currentProjectRole || EUserProjectRoles.GUEST;

-  const projectLinks: Array<{
-    label: string;
-    href: string;
-  }> = [
-    {
-      label: "General",
-      href: `/${workspaceSlug}/projects/${projectId}/settings`,
-    },
-    {
-      label: "Members",
-      href: `/${workspaceSlug}/projects/${projectId}/settings/members`,
-    },
-    {
-      label: "Features",
-      href: `/${workspaceSlug}/projects/${projectId}/settings/features`,
-    },
-    {
-      label: "States",
-      href: `/${workspaceSlug}/projects/${projectId}/settings/states`,
-    },
-    {
-      label: "Labels",
-      href: `/${workspaceSlug}/projects/${projectId}/settings/labels`,
-    },
-    {
-      label: "Integrations",
-      href: `/${workspaceSlug}/projects/${projectId}/settings/integrations`,
-    },
-    {
-      label: "Estimates",
-      href: `/${workspaceSlug}/projects/${projectId}/settings/estimates`,
-    },
-    {
-      label: "Automations",
-      href: `/${workspaceSlug}/projects/${projectId}/settings/automations`,
-    },
-  ];
  return (
    <div className="flex w-80 flex-col gap-6 px-5">
      <div className="flex flex-col gap-2">
        <span className="text-xs font-semibold text-custom-sidebar-text-400">SETTINGS</span>
        <div className="flex w-full flex-col gap-1">
-          {projectLinks.map((link) => (
-            <Link key={link.href} href={link.href}>
-              <div
-                className={`rounded-md px-4 py-2 text-sm font-medium ${
-                  (link.label === "Import" ? router.asPath.includes(link.href) : router.asPath === link.href)
-                    ? "bg-custom-primary-100/10 text-custom-primary-100"
-                    : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
-                }`}
-              >
-                {link.label}
-              </div>
-            </Link>
-          ))}
+          {PROJECT_SETTINGS_LINKS.map(
+            (link) =>
+              projectMemberInfo >= link.access && (
+                <Link key={link.key} href={`/${workspaceSlug}/projects/${projectId}${link.href}`}>
+                  <div
+                    className={`rounded-md px-4 py-2 text-sm font-medium ${
+                      link.highlight(router.asPath, `/${workspaceSlug}/projects/${projectId}`)
+                        ? "bg-custom-primary-100/10 text-custom-primary-100"
+                        : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
+                    }`}
+                  >
+                    {link.label}
+                  </div>
+                </Link>
+              )
+          )}
        </div>
      </div>
    </div>
--- a/web/layouts/settings-layout/workspace/sidebar.tsx
+++ b/web/layouts/settings-layout/workspace/sidebar.tsx
@ -25,11 +25,11 @@ export const WorkspaceSettingsSidebar = () => {
          {WORKSPACE_SETTINGS_LINKS.map(
            (link) =>
              workspaceMemberInfo >= link.access && (
-                <Link key={link.href} href={`/${workspaceSlug}${link.href}`}>
+                <Link key={link.key} href={`/${workspaceSlug}${link.href}`}>
                  <span>
                    <div
                      className={`rounded-md px-4 py-2 text-sm font-medium ${
-                        router.pathname.split("/")?.[3] === link.href.split("/")?.[2]
+                        link.highlight(router.asPath, `/${workspaceSlug}`)
                          ? "bg-custom-primary-100/10 text-custom-primary-100"
                          : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
                      }`}