web/src/pages/user-setting/sidebar/index.tsx

import { useSecondPathName } from '@/hooks/routeHook';
import type { MenuProps } from 'antd';
import { Menu } from 'antd';
import React, { useMemo } from 'react';
import { useNavigate } from 'umi';
import {
  UserSettingBaseKey,
  UserSettingIconMap,
  UserSettingRouteKey,
  UserSettingRouteMap,
} from '../constants';

type MenuItem = Required<MenuProps>['items'][number];

function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
  type?: 'group',
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
    type,
  } as MenuItem;
}

const items: MenuItem[] = Object.values(UserSettingRouteKey).map((value) =>
  getItem(UserSettingRouteMap[value], value, UserSettingIconMap[value]),
);

const SideBar = () => {
  const navigate = useNavigate();
  const pathName = useSecondPathName();

  const handleMenuClick: MenuProps['onClick'] = ({ key }) => {
    navigate(`/${UserSettingBaseKey}/${key}`);
  };

  const selectedKeys = useMemo(() => {
    return [pathName];
  }, [pathName]);

  return (
    <Menu
      selectedKeys={selectedKeys}
      mode="inline"
      items={items}
      onClick={handleMenuClick}
    />
  );
};

export default SideBar;