Try to fix submenu postition

Signed-off-by: Rodrigo Martins <rodrigo.sousa.577@gmail.com>

src/components/layouts/MainLayout.tsx

@@ -1,4 +1,4 @@
-import React, { useState, Fragment, useEffect } from "react";
+import React, { useState, Fragment, useEffect, useRef } from "react";
 import { Outlet, Link, useLocation } from "react-router-dom";
 import { useAuth } from "../../contexts/AuthContext";
 import {
@@ -34,6 +34,8 @@ export const MainLayout: React.FC = () => {
   const { user, signOut } = useAuth();
   const [userProfile, setUserProfile] = useState<any>(null);
   const { isDarkMode, toggleDarkMode } = useTheme();
+  const [activeSubmenu, setActiveSubmenu] = useState<string | null>(null);
+  const submenuTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   // Adicionar efeito para buscar perfil do usuário
   useEffect(() => {
@@ -114,6 +116,46 @@ export const MainLayout: React.FC = () => {
     return location.pathname.startsWith(path);
   };
 
+  // Função para lidar com hover no menu
+  const handleMenuMouseEnter = (menuLabel: string) => {
+    if (submenuTimeoutRef.current) {
+      clearTimeout(submenuTimeoutRef.current);
+      submenuTimeoutRef.current = null;
+    }
+    setActiveSubmenu(menuLabel);
+    
+    // Atualiza a posição vertical do submenu
+    const menuItem = document.querySelector(`[data-menu-label="${menuLabel}"]`);
+    if (menuItem) {
+      const rect = menuItem.getBoundingClientRect();
+      document.documentElement.style.setProperty('--menu-item-top', `${rect.top}px`);
+    }
+  };
+
+  // Função para lidar com mouseleave do menu
+  const handleMenuMouseLeave = () => {
+    submenuTimeoutRef.current = setTimeout(() => {
+      setActiveSubmenu(null);
+    }, 300); // Atraso de 300ms antes de fechar o submenu
+  };
+
+  // Função para lidar com mouseenter no submenu
+  const handleSubmenuMouseEnter = () => {
+    if (submenuTimeoutRef.current) {
+      clearTimeout(submenuTimeoutRef.current);
+      submenuTimeoutRef.current = null;
+    }
+  };
+
+  // Limpar timeout quando o componente é desmontado
+  useEffect(() => {
+    return () => {
+      if (submenuTimeoutRef.current) {
+        clearTimeout(submenuTimeoutRef.current);
+      }
+    };
+  }, []);
+
   return (
     <div className="flex h-screen bg-gray-100 dark:bg-gray-900">
       {/* Sidebar com barra de rolagem */}
@@ -127,7 +169,10 @@ export const MainLayout: React.FC = () => {
         <nav className="flex-1 overflow-y-auto">
           <div className="py-4">
             {menuItems.map((item, index) => (
-              <div key={item.path || item.label} className="px-2 mb-2">
+              <div 
+                key={item.path || item.label} 
+                className="px-2 mb-2"
+              >
                 {!item.subitems ? (
                   <Link
                     to={item.path}
@@ -142,7 +187,12 @@ export const MainLayout: React.FC = () => {
                     <span className="text-xs mt-1 text-white/80">{item.label}</span>
                   </Link>
                 ) : (
-                  <div className="relative group">
+                  <div 
+                    className="relative"
+                    data-menu-label={item.label}
+                    onMouseEnter={() => handleMenuMouseEnter(item.label)}
+                    onMouseLeave={handleMenuMouseLeave}
+                  >
                     <div
                       className={`flex flex-col items-center justify-center p-3 rounded-lg transition-colors hover:bg-white/10 cursor-pointer ${
                         item.subitems.some(subitem => isCurrentPath(subitem.path))
@@ -154,16 +204,28 @@ export const MainLayout: React.FC = () => {
                       <item.icon className="h-6 w-6 text-white opacity-80" />
                       <span className="text-xs mt-1 text-white/80">{item.label}</span>
                     </div>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </nav>
 
-                    {/* Submenu corrigido - posicionado fora da sidebar como pop-up */}
+        {/* Submenus renderizados fora da estrutura do menu principal */}
+        {menuItems
+          .filter(item => item.subitems)
+          .map(item => (
             <div 
-                      className="fixed left-20 z-50" 
+              key={`submenu-${item.label}`} 
-                      style={{ 
+              className={`fixed left-20 z-50 ${activeSubmenu === item.label ? 'block' : 'hidden'}`}
-                        top: 'var(--submenu-top)', 
+              style={{ top: 'var(--menu-item-top, 0)' }}
-                        '--submenu-top': `${index * 70 + 100}px` 
+              onMouseEnter={handleSubmenuMouseEnter}
-                      } as React.CSSProperties}
+              onMouseLeave={handleMenuMouseLeave}
+            >
+              <div 
+                className="transition-all duration-200 ml-2"
+                style={{ transformOrigin: 'left center' }}
               >
-                      <div className="opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200">
                 <div className="bg-blue-800/95 backdrop-blur-sm rounded-lg py-2 px-1 shadow-xl w-[140px] border border-blue-700/30">
                   {item.subitems
                     .filter(subitem => 
@@ -187,13 +249,8 @@ export const MainLayout: React.FC = () => {
                 </div>
               </div>
             </div>
-                  </div>
-                )}
-              </div>
           ))}
       </div>
-        </nav>
-      </div>
 
       {/* Main Content */}
       <div className="flex-1 flex flex-col">