From 453a4a2185a278130bfae9d855bc66e90d6e2da1 Mon Sep 17 00:00:00 2001
From: Tony Air <tony@twma.pro>
Date: Thu, 25 Aug 2022 17:36:01 +0200
Subject: [PATCH] [FIX]: Dropdown UI

---
 src/js/ui/dropdown.js | 28 +++++++++++++++++-----------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/js/ui/dropdown.js b/src/js/ui/dropdown.js
index 9595984..fc2820f 100644
--- a/src/js/ui/dropdown.js
+++ b/src/js/ui/dropdown.js
@@ -22,22 +22,22 @@ const DropdownHoverUI = ((window) => {
   const Toggle = (el) => {
     HideAll()
 
-    el.querySelector('.dropdown-menu').classList.toggle('show')
+    if (el.querySelector('.dropdown-menu').classList.contains('show')) {
+      Hide(el)
+    } else {
+      Show(el)
+    }
   }
 
-  const Show = (e) => {
-    e.stopPropagation()
-    const el = e.currentTarget
-
+  const Show = (el) => {
     el.classList.add(...ACTIVECLS)
+    el.closest('.dropdown').classList.add(...ACTIVECLS)
     el.querySelector('.dropdown-menu').classList.add('show')
   }
 
-  const Hide = (e) => {
-    e.stopPropagation()
-    const el = e.currentTarget
-
+  const Hide = (el) => {
     el.classList.remove(...ACTIVECLS)
+    el.closest('.dropdown').classList.remove(...ACTIVECLS)
     el.querySelector('.dropdown-menu').classList.remove('show')
   }
 
@@ -48,8 +48,14 @@ const DropdownHoverUI = ((window) => {
     const hoverableEls = document.querySelectorAll('[data-bs-toggle="hover"]')
 
     const attachHoverEvents = (el) => {
-      el.addEventListener('mouseover', Show, false)
-      el.addEventListener('mouseleave', Hide, false)
+      el.addEventListener('mouseover', (e) => {
+        e.stopPropagation()
+        Show(e.currentTarget)
+      }, false)
+      el.addEventListener('mouseleave', (e) => {
+        e.stopPropagation()
+        Hide(e.currentTarget)
+      }, false)
 
       el.classList.add(`${NAME}-active`)
     }