Mirrors/plane
1
0
Fork 0
mirror of https://github.com/makeplane/plane.git synced 2025-12-16 11:57:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

[WEB-5609] fix: extended sidebar item pin/unpin #8287

Browse Source
This commit is contained in:
Anmol Singh Bhatia
2025-12-10 13:48:03 +05:30
committed by sriramveeraghanta
parent a55253d242
commit df1a512a80
1 changed files with 27 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
apps/web/ce/components/workspace/sidebar/extended-sidebar-item.tsx
View File

@@ -17,9 +17,8 @@ import { cn } from "@plane/utils";
import { SidebarNavItem } from "@/components/sidebar/sidebar-navigation";
// hooks
import { useAppTheme } from "@/hooks/store/use-app-theme";
import { useWorkspace } from "@/hooks/store/use-workspace";
import { useUser, useUserPermissions } from "@/hooks/store/user";
// plane web imports
import { useWorkspaceNavigationPreferences } from "@/hooks/use-navigation-preferences";
// local imports
import { UpgradeBadge } from "../upgrade-badge";
import { getSidebarNavigationItemIcon } from "./helper";
@@ -50,33 +49,16 @@ export const ExtendedSidebarItem = observer(function ExtendedSidebarItem(props:
const pathname = usePathname();
const { workspaceSlug } = useParams();
// store hooks
const { getNavigationPreferences, updateSidebarPreference } = useWorkspace();
const { toggleExtendedSidebar } = useAppTheme();
const { data } = useUser();
const { allowPermissions } = useUserPermissions();
const { preferences: workspacePreferences, toggleWorkspaceItem } = useWorkspaceNavigationPreferences();
// derived values
const sidebarPreference = getNavigationPreferences(workspaceSlug.toString());
const isPinned = sidebarPreference?.[item.key]?.is_pinned;
const isPinned = workspacePreferences.items[item.key]?.is_pinned ?? false;
const handleLinkClick = () => toggleExtendedSidebar(true);
const itemHref =
item.key === "your_work"
? `/${workspaceSlug.toString()}${item.href}${data?.id}`
: `/${workspaceSlug.toString()}${item.href}`;
const isActive = itemHref === pathname;
const pinNavigationItem = (workspaceSlug: string, key: string) => {
updateSidebarPreference(workspaceSlug, key, { is_pinned: true });
};
const unPinNavigationItem = (workspaceSlug: string, key: string) => {
updateSidebarPreference(workspaceSlug, key, { is_pinned: false });
};
const icon = getSidebarNavigationItemIcon(item.key);
useEffect(() => {
const element = navigationIemRef.current;
const dragHandleElement = dragHandleRef.current;
@@ -146,6 +128,22 @@ export const ExtendedSidebarItem = observer(function ExtendedSidebarItem(props:
);
}, [isLastChild, handleOnNavigationItemDrop, disableDrag, disableDrop, item.key]);
const itemHref =
item.key === "your_work"
? `/${workspaceSlug.toString()}${item.href}${data?.id}`
: `/${workspaceSlug.toString()}${item.href}`;
const isActive = itemHref === pathname;
const pinNavigationItem = (key: string) => {
toggleWorkspaceItem(key, true);
};
const unPinNavigationItem = (key: string) => {
toggleWorkspaceItem(key, false);
};
const icon = getSidebarNavigationItemIcon(item.key);
if (!allowPermissions(item.access as any, EUserPermissionsLevel.WORKSPACE, workspaceSlug.toString())) {
return null;
}
@@ -153,7 +151,9 @@ export const ExtendedSidebarItem = observer(function ExtendedSidebarItem(props:
return (
<div
id={`sidebar-${item.key}`}
className={cn("relative", { "bg-custom-sidebar-background-80 opacity-60": isDragging })}
className={cn("relative", {
"bg-custom-sidebar-background-80 opacity-60": isDragging,
})}
ref={navigationIemRef}
>
<DropIndicator classNames="absolute top-0" isVisible={instruction === "DRAG_OVER"} />
@@ -167,15 +167,16 @@ export const ExtendedSidebarItem = observer(function ExtendedSidebarItem(props:
<Tooltip
// isMobile={isMobile}
tooltipContent={t("drag_to_rearrange")}
position="top-end"
position="top-start"
disabled={isDragging}
>
<button
type="button"
className={cn(
"flex items-center justify-center absolute top-1/2 -left-3 -translate-y-1/2 rounded text-custom-sidebar-text-400 cursor-grab",
"flex items-center justify-center absolute top-1/2 -left-3 -translate-y-1/2 rounded text-custom-sidebar-text-400 cursor-grab group-hover/project-item:opacity-100 opacity-0",
{
"cursor-grabbing": isDragging,
"opacity-100": isDragging,
}
)}
ref={dragHandleRef}
@@ -201,14 +202,14 @@ export const ExtendedSidebarItem = observer(function ExtendedSidebarItem(props:
<Tooltip tooltipContent="Unpin">
<PinOff
className="size-3.5 flex-shrink-0 hover:text-custom-text-300 outline-none text-custom-text-400"
onClick={() => unPinNavigationItem(workspaceSlug.toString(), item.key)}
onClick={() => unPinNavigationItem(item.key)}
/>
</Tooltip>
) : (
<Tooltip tooltipContent="Pin">
<Pin
className="size-3.5 flex-shrink-0 hover:text-custom-text-300 outline-none text-custom-text-400"
onClick={() => pinNavigationItem(workspaceSlug.toString(), item.key)}
onClick={() => pinNavigationItem(item.key)}
/>
</Tooltip>
)}