fix(nav): clickable range of link (#493)

* fix(nav): clickable range of link * fix: event propagation
pingcap · Jul 2, 2024 · 8874439 · 8874439
1 parent d7f2fef
commit 8874439
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 25 deletions.
diff --git a/src/components/Link.tsx b/src/components/Link.tsx
@@ -4,11 +4,16 @@ import { Link as I18nLink } from "gatsby-plugin-react-i18next";
 import Typography from "@mui/material/Typography";
 
 export default function LinkComponent(props: {
-  to: string;
+  to?: string;
   style?: { [key: string]: any };
   isI18n?: boolean;
+  onClick?: React.MouseEventHandler<HTMLAnchorElement>;
   [key: string]: any;
 }) {
+  if (!props.to) {
+    return props.children;
+  }
+
   const { to, style, isI18n, ...rest } = props;
   const isExternal = props.to.startsWith("http");
   if (isExternal) {

diff --git a/src/components/Navigation/LeftNavTree.tsx b/src/components/Navigation/LeftNavTree.tsx
@@ -171,16 +171,7 @@ export default function ControlledTreeView(props: {
               paddingBottom: "0.25rem",
             }}
           >
-            {item.link ? (
-              <LinkComponent
-                to={item.link}
-                style={{ width: "100%", color: "inherit" }}
-              >
-                {generateItemLabel(item.content)}
-              </LinkComponent>
-            ) : (
-              generateItemLabel(item.content)
-            )}
+            {generateItemLabel(item.content)}
             {hasChildren ? (
               <ChevronRightIcon
                 className="MuiTreeItem-ChevronRightIcon"
@@ -197,21 +188,27 @@ export default function ControlledTreeView(props: {
         );
       };
       return (
-        <StyledTreeItem
-          key={item.id}
-          nodeId={item.id}
-          label={<LabelEle />}
-          // onClick={() => {
-          //   console.log(item.id);
-          // }}
-          ContentProps={{
-            style: { width: "inherit" },
-          }}
+        <LinkComponent
+          to={item.link}
+          style={{ width: "100%", color: "inherit" }}
+          onClick={(e) => e.stopPropagation()}
         >
-          {hasChildren
-            ? renderTreeItems(item.children as DocLeftNavItem[], deepth + 1)
-            : null}
-        </StyledTreeItem>
+          <StyledTreeItem
+            key={item.id}
+            nodeId={item.id}
+            label={<LabelEle />}
+            // onClick={() => {
+            //   console.log(item.id);
+            // }}
+            ContentProps={{
+              style: { width: "inherit" },
+            }}
+          >
+            {hasChildren
+              ? renderTreeItems(item.children as DocLeftNavItem[], deepth + 1)
+              : null}
+          </StyledTreeItem>
+        </LinkComponent>
       );
     });
   };