feat: 处理navtbar button的active

src/layouts/Navbar/Navbar.tsx

@@ -59,7 +59,7 @@ const NavbarBase: React.FC<NavbarProps & WithAuthProps> = ({ isHistoryVisible, c
       <motion.div className={`${styles.layoutNavBarAgent} sm:flex hidden w-[64px] bg-white gap-[24px]`}>
       <motion.div className={`${styles.layoutNavBarAgent} sm:flex hidden w-[64px] bg-white gap-[24px]`}>
         {NAV_BAR_ITEMS.map((item) => {
         {NAV_BAR_ITEMS.map((item) => {
           return (
           return (
-            <NavBarItem onClick={handleClick} icon={item.icon} label={item.label} key={item.key} type={item.key} />
+            <NavBarItem isHistoryVisible={isHistoryVisible} onClick={handleClick} icon={item.icon} label={item.label} key={item.key} type={item.key} />
           )
           )
         })}
         })}
         <User onLogout={handleLogout} />
         <User onLogout={handleLogout} />

src/layouts/Navbar/components/NavBarItem/NavBarItem.tsx

@@ -11,8 +11,9 @@ interface NavBarItemProps {
   icon: React.FunctionComponent<React.SVGProps<SVGSVGElement>> | string
   icon: React.FunctionComponent<React.SVGProps<SVGSVGElement>> | string
   label: string
   label: string
   type: string
   type: string
+  isHistoryVisible: boolean
 }
 }
-export const NavBarItem: React.FC<NavBarItemProps> = ({ onClick, icon, label, type }) => {
+export const NavBarItem: React.FC<NavBarItemProps> = ({ isHistoryVisible, onClick, icon, label, type }) => {
   const navigate = useNavigate()
   const navigate = useNavigate()
 
 
   const handleClickLogo = () => {
   const handleClickLogo = () => {
@@ -33,11 +34,16 @@ export const NavBarItem: React.FC<NavBarItemProps> = ({ onClick, icon, label, ty
       </motion.div>
       </motion.div>
     )
     )
   }
   }
+
+  const handleActive = () => {
+    return type === 'history' && isHistoryVisible
+  }
+
   return (
   return (
     <motion.div className={`${styles.NavBarItem}`}>
     <motion.div className={`${styles.NavBarItem}`}>
       <div className={`${styles.icon}`}>
       <div className={`${styles.icon}`}>
         <Tooltip color="foreground" content={label} placement="right">
         <Tooltip color="foreground" content={label} placement="right">
-          <Button onClick={() => onClick(type)} variant="light" isIconOnly aria-label="Like">
+          <Button className={handleActive() ? 'bg-[#e4e4e5]' : ''} onClick={() => onClick(type)} variant="light" isIconOnly aria-label="Like">
             {React.createElement(icon)}
             {React.createElement(icon)}
           </Button>
           </Button>
         </Tooltip>
         </Tooltip>