From 0a4df9073c24e8113dea2845f998c308cc6a692f Mon Sep 17 00:00:00 2001
From: salirezav <s.alireza.v@gmail.com>
Date: Wed, 14 Jan 2026 16:04:45 -0500
Subject: [PATCH] Refactor Sidebar component to remove hover state management
 and adjust expansion logic

- Removed isHovered and setIsHovered props from SidebarProps.
- Updated sidebar expansion logic to rely solely on isExpanded and isMobileOpen.
- Simplified rendering conditions for menu items and submenus based on the new state management.
---
 .../src/components/Sidebar.tsx                | 32 +++++++------------
 1 file changed, 12 insertions(+), 20 deletions(-)

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<number | null>(null)
   const [subMenuHeight, setSubMenuHeight] = useState<Record<string, number>>({})
@@ -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}
                 </span>
-                {(isExpanded || isHovered || isMobileOpen) && (
+                {(isExpanded || isMobileOpen) && (
                   <span className="menu-item-text">{nav.name}</span>
                 )}
-                {(isExpanded || isHovered || isMobileOpen) && (
+                {(isExpanded || isMobileOpen) && (
                   <svg
                     className={`ml-auto w-5 h-5 transition-transform duration-200 ${openSubmenu === index
                       ? "rotate-180 text-brand-500"
@@ -214,12 +210,12 @@ export function Sidebar({
                 >
                   {nav.icon}
                 </span>
-                {(isExpanded || isHovered || isMobileOpen) && (
+                {(isExpanded || isMobileOpen) && (
                   <span className="menu-item-text">{nav.name}</span>
                 )}
               </button>
             )}
-            {nav.subItems && (isExpanded || isHovered || isMobileOpen) && (
+            {nav.subItems && (isExpanded || isMobileOpen) && (
               <div
                 ref={(el) => {
                   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)}
     >
       <div
-        className={`py-8 flex ${!isExpanded && !isHovered ? "lg:justify-center" : "justify-start"
+        className={`py-8 flex ${!isExpanded ? "lg:justify-center" : "justify-start"
           }`}
       >
         <div>
-          {isExpanded || isHovered || isMobileOpen ? (
+          {isExpanded || isMobileOpen ? (
             <>
               <h1 className="text-xl font-bold text-gray-800 dark:text-white/90">Pecan Experiments</h1>
               <p className="text-sm text-gray-500 dark:text-gray-400">Research Dashboard</p>
@@ -297,12 +289,12 @@ export function Sidebar({
           <div className="flex flex-col gap-4">
             <div>
               <h2
-                className={`mb-4 text-xs uppercase flex leading-[20px] text-gray-400 ${!isExpanded && !isHovered
+                className={`mb-4 text-xs uppercase flex leading-[20px] text-gray-400 ${!isExpanded
                   ? "lg:justify-center"
                   : "justify-start"
                   }`}
               >
-                {isExpanded || isHovered || isMobileOpen ? (
+                {isExpanded || isMobileOpen ? (
                   "Menu"
                 ) : (
                   <svg className="size-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">