diff --git a/management-dashboard-web-app/src/components/Sidebar.tsx b/management-dashboard-web-app/src/components/Sidebar.tsx index 8a98f31..6673e15 100755 --- a/management-dashboard-web-app/src/components/Sidebar.tsx +++ b/management-dashboard-web-app/src/components/Sidebar.tsx @@ -7,8 +7,6 @@ interface SidebarProps { onViewChange: (view: string) => void isExpanded?: boolean isMobileOpen?: boolean - isHovered?: boolean - setIsHovered?: (hovered: boolean) => void } interface MenuItem { @@ -23,10 +21,8 @@ export function Sidebar({ user, currentView, onViewChange, - isExpanded = true, - isMobileOpen = false, - isHovered = false, - setIsHovered + isExpanded = false, + isMobileOpen = false }: SidebarProps) { const [openSubmenu, setOpenSubmenu] = useState(null) const [subMenuHeight, setSubMenuHeight] = useState>({}) @@ -170,7 +166,7 @@ export function Sidebar({ className={`menu-item group ${openSubmenu === index ? "menu-item-active" : "menu-item-inactive" - } cursor-pointer ${!isExpanded && !isHovered + } cursor-pointer ${!isExpanded ? "lg:justify-center" : "lg:justify-start" }`} @@ -183,10 +179,10 @@ export function Sidebar({ > {nav.icon} - {(isExpanded || isHovered || isMobileOpen) && ( + {(isExpanded || isMobileOpen) && ( {nav.name} )} - {(isExpanded || isHovered || isMobileOpen) && ( + {(isExpanded || isMobileOpen) && ( {nav.icon} - {(isExpanded || isHovered || isMobileOpen) && ( + {(isExpanded || isMobileOpen) && ( {nav.name} )} )} - {nav.subItems && (isExpanded || isHovered || isMobileOpen) && ( + {nav.subItems && (isExpanded || isMobileOpen) && (
{ subMenuRefs.current[`submenu-${index}`] = el @@ -265,21 +261,17 @@ export function Sidebar({ className={`fixed mt-16 flex flex-col lg:mt-0 top-0 px-5 left-0 bg-white dark:bg-gray-900 dark:border-gray-800 text-gray-900 h-screen transition-all duration-300 ease-in-out z-50 border-r border-gray-200 ${isExpanded || isMobileOpen ? "w-[290px]" - : isHovered - ? "w-[290px]" - : "w-[90px]" + : "w-[90px]" } ${isMobileOpen ? "translate-x-0" : "-translate-x-full"} lg:translate-x-0`} - onMouseEnter={() => !isExpanded && setIsHovered && setIsHovered(true)} - onMouseLeave={() => setIsHovered && setIsHovered(false)} >
- {isExpanded || isHovered || isMobileOpen ? ( + {isExpanded || isMobileOpen ? ( <>

Pecan Experiments

Research Dashboard

@@ -297,12 +289,12 @@ export function Sidebar({

- {isExpanded || isHovered || isMobileOpen ? ( + {isExpanded || isMobileOpen ? ( "Menu" ) : (