()
| 16172 | let isSubmenuHovered = false; |
| 16173 | |
| 16174 | menuItem.addEventListener('mouseenter', () => { |
| 16175 | // Clear any pending hide timeout |
| 16176 | if (submenuTimeout) { |
| 16177 | clearTimeout(submenuTimeout); |
| 16178 | submenuTimeout = null; |
| 16179 | } |
| 16180 | |
| 16181 | // Create submenu |
| 16182 | if (!submenuElement) { |
| 16183 | submenuElement = document.createElement('div'); |
| 16184 | submenuElement.style.cssText = ` |
| 16185 | position: absolute; |
| 16186 | left: 100%; |
| 16187 | top: 0; |
| 16188 | background-color: #2d2d2d; |
| 16189 | border: 1px solid #555; |
| 16190 | border-radius: 4px; |
| 16191 | box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); |
| 16192 | min-width: 200px; |
| 16193 | padding: 4px 0; |
| 16194 | z-index: 10001; |
| 16195 | margin-left: 2px; |
| 16196 | `; |
| 16197 | |
| 16198 | // Add hover handlers to submenu to keep it visible |
| 16199 | submenuElement.addEventListener('mouseenter', () => { |
| 16200 | isSubmenuHovered = true; |
| 16201 | if (submenuTimeout) { |
| 16202 | clearTimeout(submenuTimeout); |
| 16203 | submenuTimeout = null; |
| 16204 | } |
| 16205 | }); |
| 16206 | |
| 16207 | submenuElement.addEventListener('mouseleave', () => { |
| 16208 | isSubmenuHovered = false; |
| 16209 | if (submenuElement) { |
| 16210 | submenuTimeout = setTimeout(() => { |
| 16211 | if (!isSubmenuHovered && !menuItem.matches(':hover')) { |
| 16212 | submenuElement.style.display = 'none'; |
| 16213 | } |
| 16214 | }, 150); |
| 16215 | } |
| 16216 | }); |
| 16217 | |
| 16218 | item.submenu.forEach((subItem, subIndex) => { |
| 16219 | const subMenuItem = document.createElement('div'); |
| 16220 | subMenuItem.style.cssText = ` |
| 16221 | padding: 6px 20px; |
| 16222 | color: ${subItem.enabled ? '#fff' : '#666'}; |
| 16223 | cursor: ${subItem.enabled ? 'pointer' : 'default'}; |
| 16224 | user-select: none; |
| 16225 | `; |
| 16226 | subMenuItem.textContent = subItem.label; |
| 16227 | |
| 16228 | if (subItem.enabled) { |
| 16229 | subMenuItem.addEventListener('mouseenter', () => { |
| 16230 | subMenuItem.style.backgroundColor = '#3d3d3d'; |
| 16231 | }); |
no test coverage detected