Commit f79d0785 by HoMeTown

feat: 处理navtbar button的active

parent 5bfe7047
......@@ -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]`}>
{NAV_BAR_ITEMS.map((item) => {
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} />
......
......@@ -11,8 +11,9 @@ interface NavBarItemProps {
icon: React.FunctionComponent<React.SVGProps<SVGSVGElement>> | string
label: 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 handleClickLogo = () => {
......@@ -33,11 +34,16 @@ export const NavBarItem: React.FC<NavBarItemProps> = ({ onClick, icon, label, ty
</motion.div>
)
}
const handleActive = () => {
return type === 'history' && isHistoryVisible
}
return (
<motion.div className={`${styles.NavBarItem}`}>
<div className={`${styles.icon}`}>
<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)}
</Button>
</Tooltip>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment