refactor customToolbar

src/components/common/CustomToolbar/index.jsx

@@ -1,24 +1,12 @@
-import { useCallback, useEffect, useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
 import { useLocation, useNavigate } from "react-router-dom";
-import { useCesium } from "resium";
+import { Menu } from "antd";
-import { Button, Drawer, List, Select } from "antd";
 import { HomeOutlined, MenuUnfoldOutlined } from "@ant-design/icons";
-import { useMouse } from "ahooks";
 import styles from "./index.module.less";
 
 function CustomToolbar() {
-  const { viewer } = useCesium();
   const navigate = useNavigate();
-  const dispatch = useDispatch();
   const location = useLocation();
 
-  const { toolbar } = useSelector((state) => state.data);
-  const [value, setValue] = useState("sideview");
-
-  const [mouseX, setMouseX] = useState(0);
-  const [drawerOpen, setDrawerOpen] = useState(false);
-
   const mapList = [
     {
       label: "首页",
@@ -27,104 +15,63 @@ function CustomToolbar() {
       onClick: () => {
         navigate("/home", { replace: true });
       },
+      key: "/",
     },
     {
       label: "两极协同—拉布拉多海海温偏暖控制夏季高原年代际增温",
+      title: "两极协同—拉布拉多海海温偏暖控制夏季高原年代际增温",
       value: "/map/1",
       icon: <MenuUnfoldOutlined />,
       onClick: () => {
         navigate("/map/1", { replace: true });
       },
+      key: "/map/1",
     },
     {
       label: "两极协同—南极涛动有效调节青藏高原降水和加热",
+      title: "两极协同—南极涛动有效调节青藏高原降水和加热",
       value: "/map/2",
       icon: <MenuUnfoldOutlined />,
       onClick: () => {
         navigate("/map/2", { replace: true });
       },
+      key: "/map/2",
     },
     {
       label: "两极协同—连接南极和北极的热带大西洋经向模的媒介作用",
+      title: "两极协同—连接南极和北极的热带大西洋经向模的媒介作用",
       value: "/map/3",
       icon: <MenuUnfoldOutlined />,
       onClick: () => {
         navigate("/map/3", { replace: true });
       },
+      key: "/map/3",
     },
     {
       label: "三极联动影响青藏高原上层温度",
+      title: "三极联动影响青藏高原上层温度",
       value: "/map/4",
       icon: <MenuUnfoldOutlined />,
       onClick: () => {
         navigate("/map/4", { replace: true });
       },
+      key: "/map/4",
     },
     {
       label: "三级联动影响东亚夏季风",
+      title: "三级联动影响东亚夏季风",
       value: "/map/5",
       icon: <MenuUnfoldOutlined />,
       onClick: () => {
         navigate("/map/5", { replace: true });
       },
+      key: "/map/5",
     },
   ];
 
-  useEffect(() => {
-    const handleMouseMove = (event) => {
-      setMouseX(event.clientX);
-    };
-
-    document.addEventListener("mousemove", handleMouseMove);
-
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-    };
-  }, []);
-
-  const isAtRightEdge = mouseX >= window.innerWidth - 20;
-  const iaClose = mouseX + 320 <= window.innerWidth;
-
-  useEffect(() => {
-    if (isAtRightEdge && !drawerOpen) {
-      setDrawerOpen(true);
-    } else if (iaClose && drawerOpen) {
-      setDrawerOpen(false);
-    }
-  }, [isAtRightEdge, iaClose]);
-
-  const onDrawerClose = useCallback(() => {
-    setDrawerOpen(false);
-  }, []);
-
   return (
-    <div className="toolbar" onMouseLeave={onDrawerClose}>
+    <div className={styles.drawerToolbar}>
-      <Drawer
+      <Menu selectedKeys={[location.pathname]} items={mapList} />
-        placement="right"
-        // open={true}
-        open={drawerOpen}
-        width={350}
-        mask={false}
-        closable={false}
-        className={styles.drawerToolbar}
-      >
-        <List
-          dataSource={mapList}
-          renderItem={(item, index) => {
-            return (
-              <List.Item
-                key={index}
-                onClick={item?.onClick}
-                className={
-                  location.pathname === item.value ? "active-item" : ""
-                }
-              >
-                <List.Item.Meta avatar={item.icon} title={item.label} />
-              </List.Item>
-            );
-          }}
-        ></List>
-      </Drawer>
     </div>
   );
 }

src/components/common/CustomToolbar/index.module.less

@@ -1,54 +1,51 @@
 .drawerToolbar :global {
-  transition: all 0.6s ease;
+  .ant-menu {
+    position: fixed;
+    top: 0;
+    right: -340px;
+    height: 100%;
+    width: 350px;
+    z-index: 1;
+    background-color: #1f4856 !important;
+    opacity: 0;
+    transition: all 0.3s ease;
 
-  .ant-drawer-content-wrapper {
+    .ant-menu-item {
-    .ant-drawer-content {
+      font-size: 1.2rem;
-      background-color: #1f4856;
+      color: #94bebf;
 
-      .ant-drawer-body {
+      .ant-menu-item-icon {
-        padding: 0;
+        font-size: 24px;
-
-        .ant-list {
-          .ant-list-item {
-            .ant-list-item-meta {
-              //   justify-content: center;
-              align-items: center;
-
-              .ant-list-item-meta-avatar {
-                font-size: 24px;
-                color: aliceblue;
-                margin-left: 16px;
-              }
-
-              .ant-list-item-meta-content {
-                .ant-list-item-meta-title {
-                  font-size: 1.2rem;
-                  color: aliceblue;
-                }
-              }
-            }
-
-            &:hover {
-              cursor: pointer;
-              background-color: #94bebf;
-
-              .ant-list-item-meta-avatar {
-                color: #1f4856;
-              }
-
-              .ant-list-item-meta-content {
-                .ant-list-item-meta-title {
-                  color: #1f4856;
-                }
-              }
-            }
-          }
-
-          .active-item {
-            background-color: cadetblue !important;
-          }
-        }
       }
     }
+
+    .ant-menu-item-active {
+      background-color: #94bebf !important;
+
+      .ant-menu-item-icon {
+        color: #1f4856;
+      }
+
+      .ant-menu-title-content {
+        color: #1f4856;
+      }
+    }
+
+    .ant-menu-item-selected {
+      background-color: cadetblue !important;
+
+      .ant-menu-item-icon {
+        color: #1f4856;
+      }
+
+      .ant-menu-title-content {
+        color: #1f4856;
+      }
+    }
+
+    &:hover {
+      right: 0;
+      opacity: 1;
+    }
   }
 }