feat: 修改菜单样式

src/views/MenuLayout/index.module.css

@@ -8,7 +8,30 @@
   width: 10%;
   min-width: 220px;
   height: calc(100vh - 57px);
+  background-color: #f7f8fa;
 }
 .content {
   flex: 1;
 }
+.list {
+  /* background-color: red; */
+}
+.listItem {
+  padding: 8px 25px;
+  height: 38px;
+  box-sizing: border-box;
+  cursor: pointer;
+  color: #565c66;
+  font-size: 14px;
+  line-height: 22px;
+}
+.listItem:hover {
+  border-left: 3px solid #1370ff;
+  color: #1370ff;
+  background-color: #ebedf0;
+}
+.active {
+  border-left: 3px solid #1370ff;
+  color: #1370ff;
+  background-color: #ebedf0;
+}

src/views/MenuLayout/index.tsx

-import {
-  Box,
-  List,
-  ListItem,
-  ListItemText,
-  ListItemButton,
-} from "@mui/material";
+import { Box, List } from "@mui/material";
 // import CurrentProject from "./CurrentProject";
 import CurrentProject from "../Project/components/CurrentProject";
 import React from "react";
@@ -12,9 +6,17 @@ import { Outlet, useNavigate } from "react-router-dom";
 import style from "./index.module.css";
 import { observer } from "mobx-react-lite";
 import { useStores } from "@/store/index";
+import { toJS } from "mobx";
+import classnames from "classnames";
 
 const MenuLayout = observer(() => {
   const { permissionStore } = useStores();
+  console.log("11111111111111111111", toJS(permissionStore));
+  console.log("11111111111111111111", toJS(permissionStore.sidebarRouters));
+
+  console.log(new URL(window.location.href));
+  console.log(new URL(window.location.href).pathname);
+  let pathname = new URL(window.location.href).pathname;
 
   const navigate = useNavigate();
 
@@ -22,16 +24,28 @@ const MenuLayout = observer(() => {
     <Box className={style.container}>
       <Box className={style.aside}>
         <CurrentProject />
-        <List>
+        <List className={style.list}>
           {permissionStore.sidebarRouters.map((item, index) => {
             return (
-              <ListItem key={"sidebar" + index}>
-                <ListItemButton
-                  onClick={() => item.type === "page" && navigate(item.path)}
-                >
-                  <ListItemText>{item.name}</ListItemText>
-                </ListItemButton>
-              </ListItem>
+              <li
+                key={"sidebar" + index}
+                // className={style.listItem}
+                className={classnames({
+                  [style.listItem]: true,
+                  [style.active]: item.path === pathname,
+                })}
+                onClick={() => item.type === "page" && navigate(item.path)}
+              >
+                {item.name}
+              </li>
+
+              // <ListItem key={"sidebar" + index} className={style.listItem}>
+              //   <ListItemButton
+              //     onClick={() => item.type === "page" && navigate(item.path)}
+              //   >
+              //     <ListItemText>{item.name}</ListItemText>
+              //   </ListItemButton>
+              // </ListItem>
             );
           })}
         </List>