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,7 +20,8 @@ interface SiderMenuProps {
   initialState: Global.InitialStateType;
 }
 
-const useStyles = createStyles(({ css, token }) => {
+const useStyles = createStyles(
+  ({ css, token }: { css: any; token: FullToken }) => {
     console.log('useStyles', token);
 
     // @ts-ignore
@@ -42,6 +43,7 @@ const useStyles = createStyles(({ css, token }) => {
         cursor: pointer;
         white-space: nowrap;
         padding: var(--ant-padding-xs) var(--ant-padding);
+        padding-left: 0px;
         font-size: 12px;
         padding-bottom: 4px;
         overflow: hidden;
@@ -59,7 +61,7 @@ const useStyles = createStyles(({ css, token }) => {
           align-items: center;
           gap: 4px;
           font-size: 12px;
-        color: var(--ant-color-text-tertiary);
+          color: var(--ant-color-text);
           font-weight: 400;
         }
 
@@ -90,13 +92,17 @@ const useStyles = createStyles(({ css, token }) => {
         height: ${Menu.itemHeight}px;
         line-height: ${Menu.itemHeight}px;
         color: var(--ant-color-text-tertiary);
+        border-radius: ${Menu.itemBorderRadius}px;
+        border: 1px solid transparent;
         &:hover {
           background-color: ${Menu.itemHoverBg};
           color: ${Menu.itemHoverColor};
         }
         &.menu-item-selected {
-        background-color: ${Menu.itemSelectedBg};
+          background-color: ${Menu.menuItemSelectedBg};
           color: ${Menu.itemSelectedColor};
+          border: 1px solid var(--ant-color-border-secondary);
+
           .anticon {
             color: ${Menu.itemSelectedColor};
           }
@@ -130,7 +136,8 @@ const useStyles = createStyles(({ css, token }) => {
         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>