style: menu

src/config/theme/dark.ts

@@ -54,7 +54,8 @@ export default {
       itemHoverColor: 'rgba(0,0,0,1)',
       itemColor: 'rgba(0,0,0,1)',
       itemHoverBg: 'rgb(24 25 27)',
-      itemActiveBg: 'rgb(24 25 27)'
+      itemActiveBg: 'rgb(24 25 27)',
+      menuItemSelectedBg: '#292929'
     },
     Progress: {
       lineBorderRadius: 4
@@ -108,6 +109,7 @@ export default {
     fontSize: 14,
     motion: true,
     colorFill: '#0A0A0A',
-    colorBgBase: '#0A0A0A'
+    colorBgBase: '#0A0A0A',
+    menuItemSelectedBg: '#292929'
   }
 };

src/config/theme/light.ts

@@ -56,7 +56,8 @@ export default {
       itemHoverColor: 'rgba(0,0,0,1)',
       itemColor: 'rgba(0,0,0,1)',
       itemHoverBg: 'rgba(0,0,0,0.04)',
-      itemActiveBg: 'rgba(0,0,0,0.04)'
+      itemActiveBg: 'rgba(0,0,0,0.04)',
+      menuItemSelectedBg: 'rgba(255, 255, 255, 0.9)'
     },
     Progress: {
       lineBorderRadius: 3

src/layouts/sider-menu.tsx

@@ -2,7 +2,7 @@ import { CaretDownOutlined } from '@ant-design/icons';
 import { IconFont } from '@gpustack/core-ui';
 import { Link, useLocation } from '@umijs/max';
 import { Tooltip } from 'antd';
-import { createStyles } from 'antd-style';
+import { createStyles, type FullToken } from 'antd-style';
 import React, { useMemo, useState } from 'react';
 
 interface MenuItem {
@@ -20,117 +20,124 @@ interface SiderMenuProps {
   initialState: Global.InitialStateType;
 }
 
-const useStyles = createStyles(({ css, token }) => {
+const useStyles = createStyles(
-  console.log('useStyles', token);
+  ({ css, token }: { css: any; token: FullToken }) => {
+    console.log('useStyles', token);
 
-  // @ts-ignore
+    // @ts-ignore
-  const { Menu } = token;
+    const { Menu } = token;
 
-  return {
+    return {
-    siderMenu: css`
+      siderMenu: css`
-      &.sider-menu-collapsed {
+        &.sider-menu-collapsed {
-        .menu-item {
+          .menu-item {
-          justify-content: center;
+            justify-content: center;
-          padding: 0;
+            padding: 0;
+          }
         }
-      }
+      `,
-    `,
+      groupTitle: css`
-    groupTitle: css`
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      cursor: pointer;
-      white-space: nowrap;
-      padding: var(--ant-padding-xs) var(--ant-padding);
-      font-size: 12px;
-      padding-bottom: 4px;
-      overflow: hidden;
-      height: 30px;
-      &:hover {
-        .group-title-text {
-          color: var(--ant-color-text);
-        }
-      }
-      .anticon {
-        transform: scale(0.8);
-      }
-      .group-title-text {
         display: flex;
         align-items: center;
-        gap: 4px;
+        gap: 8px;
+        cursor: pointer;
+        white-space: nowrap;
+        padding: var(--ant-padding-xs) var(--ant-padding);
+        padding-left: 0px;
         font-size: 12px;
-        color: var(--ant-color-text-tertiary);
+        padding-bottom: 4px;
-        font-weight: 400;
+        overflow: hidden;
-      }
+        height: 30px;
-
+        &:hover {
-      &.menu-item-group-title-collapsed {
+          .group-title-text {
-        position: relative;
+            color: var(--ant-color-text);
-        height: 1px;
+          }
-        padding-block: 0;
-        padding-inline: 0;
-        justify-content: center;
-      }
-    `,
-    menuItemContent: css`
-      margin: 2px 0;
-      border-radius: 4px;
-      overflow: hidden;
-    `,
-    menuItemWrapper: css`
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-      gap: 12px;
-      cursor: pointer;
-      position: relative;
-      padding-inline: calc(var(--ant-font-size) * 2) var(--ant-padding);
-      padding-left: 16px;
-      overflow: hidden;
-      white-space: nowrap;
-      height: ${Menu.itemHeight}px;
-      line-height: ${Menu.itemHeight}px;
-      color: var(--ant-color-text-tertiary);
-      &:hover {
-        background-color: ${Menu.itemHoverBg};
-        color: ${Menu.itemHoverColor};
-      }
-      &.menu-item-selected {
-        background-color: ${Menu.itemSelectedBg};
-        color: ${Menu.itemSelectedColor};
-        .anticon {
-          color: ${Menu.itemSelectedColor};
         }
-      }
+        .anticon {
-      &:active {
+          transform: scale(0.8);
-        background-color: ${Menu.itemActiveBg};
+        }
-        color: ${Menu.itemActiveColor};
+        .group-title-text {
-      }
+          display: flex;
-      .anticon {
+          align-items: center;
-        font-size: 16px;
+          gap: 4px;
-      }
+          font-size: 12px;
-      .icon-wrapper {
+          color: var(--ant-color-text);
+          font-weight: 400;
+        }
+
+        &.menu-item-group-title-collapsed {
+          position: relative;
+          height: 1px;
+          padding-block: 0;
+          padding-inline: 0;
+          justify-content: center;
+        }
+      `,
+      menuItemContent: css`
+        margin: 2px 0;
+        border-radius: 4px;
+        overflow: hidden;
+      `,
+      menuItemWrapper: css`
         display: flex;
         align-items: center;
-        justify-content: center;
+        justify-content: flex-start;
-        width: 100%;
+        gap: 12px;
-        height: 100%;
+        cursor: pointer;
-      }
+        position: relative;
-    `,
+        padding-inline: calc(var(--ant-font-size) * 2) var(--ant-padding);
-    menuItemGroup: css`
+        padding-left: 16px;
-      &.menu-item-group-hidden {
+        overflow: hidden;
-        display: none;
+        white-space: nowrap;
-      }
+        height: ${Menu.itemHeight}px;
-    `,
+        line-height: ${Menu.itemHeight}px;
-    line: css`
+        color: var(--ant-color-text-tertiary);
-      height: 1px;
+        border-radius: ${Menu.itemBorderRadius}px;
-      margin-block: 6px;
+        border: 1px solid transparent;
-      background-color: ${token.colorSplit};
+        &:hover {
-      position: absolute;
+          background-color: ${Menu.itemHoverBg};
-      left: -2px;
+          color: ${Menu.itemHoverColor};
-      right: -2px;
+        }
-    `
+        &.menu-item-selected {
-  };
+          background-color: ${Menu.menuItemSelectedBg};
-});
+          color: ${Menu.itemSelectedColor};
+          border: 1px solid var(--ant-color-border-secondary);
+
+          .anticon {
+            color: ${Menu.itemSelectedColor};
+          }
+        }
+        &:active {
+          background-color: ${Menu.itemActiveBg};
+          color: ${Menu.itemActiveColor};
+        }
+        .anticon {
+          font-size: 16px;
+        }
+        .icon-wrapper {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 100%;
+          height: 100%;
+        }
+      `,
+      menuItemGroup: css`
+        &.menu-item-group-hidden {
+          display: none;
+        }
+      `,
+      line: css`
+        height: 1px;
+        margin-block: 6px;
+        background-color: ${token.colorSplit};
+        position: absolute;
+        left: -2px;
+        right: -2px;
+      `
+    };
+  }
+);
 
 const SiderMenu: React.FC<SiderMenuProps> = (props) => {
   const { menuData, collapsed } = props;
@@ -231,10 +238,10 @@ const SiderMenu: React.FC<SiderMenuProps> = (props) => {
               >
                 {!collapsed ? (
                   <span className="group-title-text">
-                    <span>{item.name}</span>
                     <CaretDownOutlined
                       rotate={collapseKeys.has(item.key) ? -90 : 0}
                     ></CaretDownOutlined>
+                    <span>{item.name}</span>
                   </span>
                 ) : (
                   <span className={styles.line}></span>