Jelajahi Sumber

fix title can't be hidden in <img /> type icon when menu collapsed

ddcat1115 7 tahun lalu
induk
melakukan
bacc203148

+ 1 - 1
src/components/SiderMenu/SiderMenu.js

@@ -14,7 +14,7 @@ const { SubMenu } = Menu;
 //   icon: <Icon type="setting" />,
 const getIcon = (icon) => {
   if (typeof icon === 'string' && icon.indexOf('http') === 0) {
-    return <img src={icon} alt="icon" className={styles.icon} />;
+    return <img src={icon} alt="icon" className={`${styles.icon} sider-menu-item-img`} />;
   }
   if (typeof icon === 'string') {
     return <Icon type={icon} />;

+ 14 - 0
src/components/SiderMenu/index.less

@@ -49,4 +49,18 @@
   .drawer .drawer-content {
     background: #001529;
   }
+  .ant-menu-inline-collapsed {
+    & > .ant-menu-item .sider-menu-item-img + span,
+    & > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item .sider-menu-item-img + span,
+    & > .ant-menu-submenu > .ant-menu-submenu-title .sider-menu-item-img + span {
+      max-width: 0;
+      display: inline-block;
+      opacity: 0;
+    }
+  }
+  .ant-menu-item .sider-menu-item-img + span,
+  .ant-menu-submenu-title .sider-menu-item-img + span {
+    transition: opacity .3s @ease-in-out, width .3s @ease-in-out;
+    opacity: 1;
+  }
 }