From f6797ebca8f2f9b72b3de2af1ef0962076e2504b Mon Sep 17 00:00:00 2001
From: Rodrigo Martins <rodrigo.sousa.577@gmail.com>
Date: Fri, 11 Apr 2025 20:57:52 -0300
Subject: [PATCH] Try to fix submenu postition

Signed-off-by: Rodrigo Martins <rodrigo.sousa.577@gmail.com>
---
 src/components/layouts/MainLayout.tsx | 28 +++++++++++++++++----------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/components/layouts/MainLayout.tsx b/src/components/layouts/MainLayout.tsx
index 40db3c2..fe0e9f7 100644
--- a/src/components/layouts/MainLayout.tsx
+++ b/src/components/layouts/MainLayout.tsx
@@ -114,6 +114,13 @@ export const MainLayout: React.FC = () => {
     return location.pathname.startsWith(path);
   };
 
+  // Adicione esta função dentro do componente MainLayout antes do return
+  const handleMenuHover = (e: React.MouseEvent<HTMLDivElement>) => {
+    const menuItem = e.currentTarget;
+    const rect = menuItem.getBoundingClientRect();
+    document.documentElement.style.setProperty('--menu-item-top', `${rect.top}px`);
+  };
+
   return (
     <div className="flex h-screen bg-gray-100 dark:bg-gray-900">
       {/* Sidebar com barra de rolagem */}
@@ -127,7 +134,11 @@ 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"
+                onMouseEnter={handleMenuHover}
+              >
                 {!item.subitems ? (
                   <Link
                     to={item.path}
@@ -155,15 +166,12 @@ export const MainLayout: React.FC = () => {
                       <span className="text-xs mt-1 text-white/80">{item.label}</span>
                     </div>
 
-                    {/* Submenu corrigido - posicionado fora da sidebar como pop-up */}
-                    <div 
-                      className="fixed left-20 z-50" 
-                      style={{ 
-                        top: 'var(--submenu-top)', 
-                        '--submenu-top': `${index * 70 + 100}px` 
-                      } as React.CSSProperties}
-                    >
-                      <div className="opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200">
+                    {/* Submenu como pop-up fora da estrutura do menu principal */}
+                    <div className="fixed left-20 z-50" style={{ top: 'var(--menu-item-top, 0)' }}>
+                      <div 
+                        className="opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 ml-2"
+                        style={{ transformOrigin: 'left center' }}
+                      >
                         <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 =>