From ddd24eb3aca083f98c0d31932281d492c474c40f Mon Sep 17 00:00:00 2001
From: Tunglies <77394545+Tunglies@users.noreply.github.com>
Date: Sun, 23 Nov 2025 11:47:27 +0800
Subject: [PATCH] fix: prevent drag listeners from blocking navigation clicks
 in sidebar #5567

Separated dnd-kit drag handlers (attributes/listeners) from ListItemButton
to ListItemIcon only. Previously, long-press or rapid clicks on nav items
would trigger drag detection and cancel the click event, causing the item
to visually highlight but fail to navigate.

Changes:
- Moved sortable attributes/listeners to icon elements only
- ListItemButton now handles pure navigation clicks without interference
- Drag handle cursor ('grab') remains on icons when sortable is enabled

Fixes issue where sidebar tabs would "go dark" without actual route change.
---
 src/components/layout/layout-item.tsx | 29 +++++++++++++++++++--------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/components/layout/layout-item.tsx b/src/components/layout/layout-item.tsx
index e1c233ba0..fdc2e1539 100644
--- a/src/components/layout/layout-item.tsx
+++ b/src/components/layout/layout-item.tsx
@@ -6,11 +6,11 @@ import {
   alpha,
   ListItem,
   ListItemButton,
-  ListItemText,
   ListItemIcon,
+  ListItemText,
 } from "@mui/material";
 import type { CSSProperties, ReactNode } from "react";
-import { useMatch, useResolvedPath, useNavigate } from "react-router";
+import { useMatch, useNavigate, useResolvedPath } from "react-router";
 
 import { useVerge } from "@/hooks/use-verge";
 
@@ -58,7 +58,7 @@ export const LayoutItem = (props: Props) => {
             paddingLeft: 1,
             paddingRight: 1,
             marginRight: 1.25,
-            cursor: sortable && !sortable.disabled ? "grab" : "pointer",
+            cursor: "pointer",
             "& .MuiListItemText-primary": {
               color: "text.primary",
               fontWeight: "700",
@@ -70,7 +70,6 @@ export const LayoutItem = (props: Props) => {
                 ? alpha(primary.main, 0.15)
                 : alpha(primary.main, 0.35);
             const color = mode === "light" ? "#1f1f1f" : "#ffffff";
-
             return {
               "&.Mui-selected": { bgcolor },
               "&.Mui-selected:hover": { bgcolor },
@@ -79,15 +78,29 @@ export const LayoutItem = (props: Props) => {
           },
         ]}
         onClick={() => navigate(to)}
-        {...(attributes ?? {})}
-        {...(listeners ?? {})}
       >
         {(menu_icon === "monochrome" || !menu_icon) && (
-          <ListItemIcon sx={{ color: "text.primary", marginLeft: "6px" }}>
+          <ListItemIcon
+            sx={{
+              color: "text.primary",
+              marginLeft: "6px",
+              cursor: sortable && !sortable.disabled ? "grab" : "inherit",
+            }}
+            {...(attributes ?? {})}
+            {...(listeners ?? {})}
+          >
             {icon[0]}
           </ListItemIcon>
         )}
-        {menu_icon === "colorful" && <ListItemIcon>{icon[1]}</ListItemIcon>}
+        {menu_icon === "colorful" && (
+          <ListItemIcon
+            sx={{ cursor: sortable && !sortable.disabled ? "grab" : "inherit" }}
+            {...(attributes ?? {})}
+            {...(listeners ?? {})}
+          >
+            {icon[1]}
+          </ListItemIcon>
+        )}
         <ListItemText
           sx={{
             textAlign: "center",