I am using react pro sidebar version ^1.1.0, the hover style on sidebar menu items is not working properly. Here is the code, I need to add a hover style on each menu item. I tried adding my custom hover style to it but that’s not working.
export default function Sidebar() {
let navigate = useNavigate();
const [collapsed, setCollapsed] = React.useState(false);
// Menu items list
return (
<div className="flex min-h-screen">
{/* Sidebar */}
<Sidebar
collapsed={collapsed}
className="fixed top-0 left-0 h-full max-h-[85vh] rounded-[30px] border border-zinc-800 bg-green-250"
>
{/* Header with logo and collapse button */}
<HStack className="justify-between px-4 py-2 mt-3">
{!collapsed && (
<ImageComponent
src={mainLogo}
alt="Logo"
className="h-[50px] w-[80px] object-contain"
/>
)}
{collapsed ? (
<TbLayoutSidebarRightCollapse
className="p-1 w-10 h-10 text-zinc-700 cursor-pointer"
onClick={() => setCollapsed(!collapsed)}
/>
) : (
<TbLayoutSidebarLeftCollapse
className="p-1 w-10 h-10 text-zinc-700 cursor-pointer"
onClick={() => setCollapsed(!collapsed)}
/>
)}
</HStack>
{/* Dynamically rendered menu items */}
<Menu>
{menuItems.map((item) => (
<MenuItem
key={item.id}
icon={item.icon}
className="font-semibold text-lg text-green-700 hover:text-white hover:bg-green-600 transition-all duration-200"
onClick={()=>navigate(`/owner/${item.route}`)}
>
{item.name}
</MenuItem>
))}
</Menu>
</Sidebar>
</div>
);
}
1
It looks like you’re trying to add hover styles to your MenuItem components using Tailwind CSS classes, but these styles might not be applied properly due to how react-pro-sidebar handles its internal styling and classNames.
<MenuItem
key={item.id}
icon={item.icon}
onClick={() => navigate(`/owner/${item.route}`)}
menuItemStyles={{
root: {
fontWeight: 'bold',
fontSize: '1.125rem', // equivalent to text-lg
color: '#2f855a', // equivalent to text-green-700
transition: 'all 0.2s ease-in-out',
},
hover: {
backgroundColor: '#38a169', // equivalent to bg-green-600
color: '#ffffff', // equivalent to text-white
},
}}
>
{item.name}
</MenuItem>