diff --git a/apps/web/core/components/workspace/sidebar/sidebar-item.tsx b/apps/web/core/components/workspace/sidebar/sidebar-item.tsx index 3031eb942..e2e15b4d1 100644 --- a/apps/web/core/components/workspace/sidebar/sidebar-item.tsx +++ b/apps/web/core/components/workspace/sidebar/sidebar-item.tsx @@ -7,6 +7,7 @@ import { useParams, usePathname } from "next/navigation"; // plane imports import { EUserPermissionsLevel, IWorkspaceSidebarNavigationItem } from "@plane/constants"; import { useTranslation } from "@plane/i18n"; +import { joinUrlPath } from "@plane/utils"; // components import { SidebarNavItem } from "@/components/sidebar/sidebar-navigation"; import { NotificationAppSidebarOption } from "@/components/workspace-notifications/notification-app-sidebar-option"; @@ -47,13 +48,13 @@ export const SidebarItemBase: FC = observer(({ item, additionalRender, ad const isPinned = sidebarPreference?.[item.key]?.is_pinned; if (!isPinned && !staticItems.includes(item.key)) return null; - const itemHref = item.key === "your_work" ? `/${slug}${item.href}${data?.id}/` : `/${slug}${item.href}`; - const isActive = itemHref === pathname; + const itemHref = + item.key === "your_work" && data?.id ? joinUrlPath(slug, item.href, data?.id) : joinUrlPath(slug, item.href); const icon = getSidebarNavigationItemIcon(item.key); return ( - +
{icon}

{t(item.labelTranslationKey)}

diff --git a/packages/constants/src/workspace.ts b/packages/constants/src/workspace.ts index 60e05c213..408f0ece8 100644 --- a/packages/constants/src/workspace.ts +++ b/packages/constants/src/workspace.ts @@ -244,6 +244,7 @@ export interface IWorkspaceSidebarNavigationItem { labelTranslationKey: string; href: string; access: EUserWorkspaceRoles[]; + highlight: (pathname: string, url: string) => boolean; } export const WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS: Record = { @@ -252,24 +253,28 @@ export const WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS: Record pathname === url, }, analytics: { key: "analytics", labelTranslationKey: "analytics", href: `/analytics/`, access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER], + highlight: (pathname: string, url: string) => pathname.includes(url), }, drafts: { key: "drafts", labelTranslationKey: "drafts", href: `/drafts/`, access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER], + highlight: (pathname: string, url: string) => pathname.includes(url), }, archives: { key: "archives", labelTranslationKey: "archives", href: `/projects/archives/`, access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER], + highlight: (pathname: string, url: string) => pathname.includes(url), }, }; @@ -286,24 +291,28 @@ export const WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS: Record pathname === url, }, inbox: { key: "inbox", labelTranslationKey: "notification.label", href: `/notifications/`, access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST], + highlight: (pathname: string, url: string) => pathname.includes(url), }, "your-work": { key: "your_work", labelTranslationKey: "your_work", href: `/profile/`, access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER], + highlight: (pathname: string, url: string) => pathname.includes(url), }, projects: { key: "projects", labelTranslationKey: "projects", href: `/projects/`, access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST], + highlight: (pathname: string, url: string) => pathname.includes(url), }, };