From 1a078e2783e7a1d5701ad0b2e0b944a9df6b7559 Mon Sep 17 00:00:00 2001
From: Sami Mokaddem <mokaddem.sami@gmail.com>
Date: Tue, 5 Dec 2023 10:14:39 +0100
Subject: [PATCH] chg: [layout:sidebar] Added a bit of JS to not close the
 sidebar sub-menu right after the mouse leaves

---
 webroot/css/layout.css |  2 +-
 webroot/js/main.js     | 13 +++++++++++++
 webroot/js/utils.js    |  4 ++++
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/webroot/css/layout.css b/webroot/css/layout.css
index ac9a9bdf3..909871795 100644
--- a/webroot/css/layout.css
+++ b/webroot/css/layout.css
@@ -174,7 +174,7 @@ main.content {
         top: 50%;
     }
     .sidebar .sidebar-link-container:hover .submenu-container {
-        display: block;
+        /* display: block; */
     }
     .sidebar .sidebar-link-container .submenu-container:hover {
         display: block;
diff --git a/webroot/js/main.js b/webroot/js/main.js
index 069176819..7daf5a151 100644
--- a/webroot/js/main.js
+++ b/webroot/js/main.js
@@ -321,4 +321,17 @@ $(document).ready(() => {
     $('.sidebar #btn-add-bookmark').click(() => {
         openSaveBookmarkModal(window.location.pathname)
     })
+
+    $('.sidebar .sidebar-link-container.parent').on('mouseenter', function() {
+        const $subContainer = $(this).find('.submenu-container')
+        $subContainer.css({ display: 'block' })
+        $(this).on('mouseleave', function() {
+            delay(function () {
+                if (!$subContainer[0].matches(':hover')) {
+                    $subContainer.css({ display: 'none' })
+                    $(this).trigger('mouseenter')
+                }
+            }, 150)
+        })
+    })
 })
diff --git a/webroot/js/utils.js b/webroot/js/utils.js
index 1a04fb02d..60d369abd 100644
--- a/webroot/js/utils.js
+++ b/webroot/js/utils.js
@@ -147,6 +147,10 @@ function debounce(func, wait, options) {
     return debounced
 }
 
+function delay(func, wait, ...args) {
+    return setTimeout(func, wait, ...args)
+}
+
 function arrayEqual(array1, array2) {
     const array2Sorted = array2.slice().sort();
     return array1.length === array2.length && array1.slice().sort().every((value, index) => value === array2Sorted[index])