feat: Add option to control menu icon

src/components/layout/layout-item.tsx

@@ -6,15 +6,16 @@ import {
   ListItemIcon,
 } from "@mui/material";
 import { useMatch, useResolvedPath, useNavigate } from "react-router-dom";
-
+import { useVerge } from "@/hooks/use-verge";
 interface Props {
   to: string;
   children: string;
-  icon: React.ReactNode;
+  icon: React.ReactNode[];
 }
 export const LayoutItem = (props: Props) => {
   const { to, children, icon } = props;
-
+  const { verge } = useVerge();
+  const { menu_icon } = verge ?? {};
   const resolved = useResolvedPath(to);
   const match = useMatch({ path: resolved.pathname, end: true });
   const navigate = useNavigate();
@@ -27,7 +28,7 @@ export const LayoutItem = (props: Props) => {
           {
             borderRadius: 2,
             marginLeft: 1.25,
-            paddingLeft: 1.5,
+            paddingLeft: 1,
             paddingRight: 1,
             marginRight: 1.25,
             "& .MuiListItemText-primary": {
@@ -51,9 +52,13 @@ export const LayoutItem = (props: Props) => {
         ]}
         onClick={() => navigate(to)}
       >
-        <ListItemIcon>{icon}</ListItemIcon>
+        {menu_icon === "monochrome" && <ListItemIcon>{icon[0]}</ListItemIcon>}
+        {menu_icon === "colorful" && <ListItemIcon>{icon[1]}</ListItemIcon>}
         <ListItemText
-          sx={{ textAlign: "center", marginLeft: "-35px" }}
+          sx={{
+            textAlign: "center",
+            marginLeft: menu_icon === "disable" ? "" : "-35px",
+          }}
           primary={children}
         />
       </ListItemButton>

src/components/setting/mods/layout-viewer.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { List, Button } from "@mui/material";
+import { List, Button, Select, MenuItem } from "@mui/material";
 import { useVerge } from "@/hooks/use-verge";
 import { BaseDialog, DialogRef, Notice, Switch } from "@/components/base";
 import { SettingItem } from "./setting-comp";
@@ -19,6 +19,7 @@ export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
   const [sysproxyIcon, setSysproxyIcon] = useState("");
   const [tunIcon, setTunIcon] = useState("");
 
+  // const { menu_icon } = verge ?? {};
   useEffect(() => {
     initIconPath();
   }, []);
@@ -97,6 +98,22 @@ export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
           </GuardState>
         </SettingItem>
 
+        <SettingItem label={t("Menu Icon")}>
+          <GuardState
+            value={verge?.menu_icon ?? "monochrome"}
+            onCatch={onError}
+            onFormat={(e: any) => e.target.value}
+            onChange={(e) => onChangeData({ menu_icon: e })}
+            onGuard={(e) => patchVerge({ menu_icon: e })}
+          >
+            <Select size="small" sx={{ width: 140, "> div": { py: "7.5px" } }}>
+              <MenuItem value="monochrome">{t("Monochrome")}</MenuItem>
+              <MenuItem value="colorful">{t("Colorful")}</MenuItem>
+              <MenuItem value="disable">{t("Disable")}</MenuItem>
+            </Select>
+          </GuardState>
+        </SettingItem>
+
         <SettingItem label={t("Common Tray Icon")}>
           <GuardState
             value={verge?.common_tray_icon}