Browse Source

chore: 菜单图标样式

xyh 2 years ago
parent
commit
1a2b01bf94

+ 9 - 2
packages/app/src/pages/home/menu/index.module.css

@@ -2,8 +2,15 @@
   background-color: #fff !important;
 }
 
-.slider-extend {
+.slider-menus {
   & :global(.ant-menu-item-icon) {
-    display: none !important;
+    color: #bbb !important;
+  }
+
+  & :global(.ant-menu-item-selected),
+  & :global(.ant-menu-submenu-selected) {
+    & :global(.ant-menu-item-icon) {
+      color: var(--primary-color) !important;
+    }
   }
 }

+ 3 - 5
packages/app/src/pages/home/menu/index.tsx

@@ -1,18 +1,16 @@
 import {FC} from 'react';
 import {Menu as AntdMenu, Layout} from 'antd';
-import {useCollapsedMenu, useMenu, useOpenKey} from './hooks';
+import {useMenu, useOpenKey} from './hooks';
 import css from './index.module.css';
-import classNames from 'classnames';
 
 const Menu: FC = function() {
   const menus = useMenu();
   const [{openKeys, current}, {onOpenChange, onClick}] = useOpenKey(menus);
-  const collapsed = useCollapsedMenu();
 
   return (
     <Layout.Sider
       className={css.sliderBackground}
-      collapsed={collapsed}
+      breakpoint='lg'
     >
       <AntdMenu
         data-testid='menu'
@@ -22,7 +20,7 @@ const Menu: FC = function() {
         openKeys={openKeys}
         onClick={onClick}
         selectedKeys={current}
-        className={classNames({[css.sliderExtend]: !collapsed})}
+        className={css.sliderMenus}
       />
     </Layout.Sider>