refactor: show pill in NavItem

web/src/routes/Main/Navbar/GroupNav.tsx

@@ -26,7 +26,11 @@ export const GroupNav: React.FC = React.memo(() => {
       {Array.isArray(groups) &&
         groups.map((group) => (
           <div key={group._id}>
-            <NavbarNavItem name={group.name} to={`/main/group/${group._id}`}>
+            <NavbarNavItem
+              name={group.name}
+              to={`/main/group/${group._id}`}
+              showPill={true}
+            >
               <Avatar
                 shape="square"
                 size={48}

web/src/routes/Main/Navbar/NavItem.tsx

@@ -9,20 +9,21 @@ export const NavbarNavItem: React.FC<{
   name: string;
   className?: ClassValue;
   to?: string;
+  showPill?: boolean;
   onClick?: () => void;
 }> = React.memo((props) => {
-  const { name, className, to } = props;
+  const { name, className, to, showPill = false } = props;
   const location = useLocation();
   const isActive = typeof to === 'string' && location.pathname.startsWith(to);
 
-  const inner = (
+  let inner = (
     <Tooltip
       title={<div className="font-bold px-1.5 py-0.5">{name}</div>}
       placement="right"
     >
       <div
         className={clsx(
-          'w-12 h-12 hover:rounded-lg transition-all cursor-pointer flex items-center justify-center overflow-hidden',
+          'w-12 h-12 hover:rounded-lg transition-all duration-300 cursor-pointer flex items-center justify-center overflow-hidden',
           className,
           {
             'rounded-1/2': !isActive,
@@ -37,9 +38,29 @@ export const NavbarNavItem: React.FC<{
   );
 
   if (typeof to === 'string') {
-    return <Link to={to}>{inner}</Link>;
+    inner = <Link to={to}>{inner}</Link>;
   }
 
-  return inner;
+  return (
+    <div className="w-full px-3 relative group">
+      {showPill && (
+        <div
+          className="absolute w-2 left-0 top-0 bottom-0 flex items-center"
+          style={{ marginLeft: -4 }}
+        >
+          <span
+            className={clsx(
+              'bg-white w-2 h-2 rounded transition-all duration-300',
+              {
+                'h-2 group-hover:h-5': !isActive,
+                'h-10': isActive,
+              }
+            )}
+          />
+        </div>
+      )}
+      {inner}
+    </div>
+  );
 });
 NavbarNavItem.displayName = 'NavbarNavItem';

web/src/routes/Main/Navbar/index.tsx

@@ -5,6 +5,7 @@ import { NavbarNavItem } from './NavItem';
 import { GroupNav } from './GroupNav';
 import { MobileMenuBtn } from './MobileMenuBtn';
 import { SettingBtn } from './SettingBtn';
+import { Divider } from 'antd';
 
 /**
  * 导航栏组件
@@ -13,12 +14,12 @@ export const Navbar: React.FC = React.memo(() => {
   const userInfo = useAppSelector((state) => state.user.info);
 
   return (
-    <div className="w-18 bg-gray-900 flex flex-col justify-start items-center pt-4 pb-4 p-1">
+    <div className="w-18 bg-gray-900 flex flex-col justify-start items-center pt-4 pb-4">
       <MobileMenuBtn />
 
       {/* Navbar */}
-      <div className="flex-1">
-        <NavbarNavItem name={t('我')} to={'/main/personal'}>
+      <div className="flex-1 w-full">
+        <NavbarNavItem name={t('我')} to={'/main/personal'} showPill={true}>
           <Avatar
             shape="square"
             size={48}
@@ -26,7 +27,10 @@ export const Navbar: React.FC = React.memo(() => {
             src={userInfo?.avatar}
           />
         </NavbarNavItem>
-        <div className="h-px w-full bg-white mt-4 mb-4"></div>
+
+        <div className="px-3">
+          <Divider />
+        </div>
 
         <GroupNav />
       </div>

web/tailwind.config.js

@@ -77,6 +77,7 @@ module.exports = {
       display: ['group-hover'],
       borderRadius: ['hover'],
       borderWidth: ['last'],
+      height: ['group-hover'],
     },
   },
   plugins: [tailchat],