Left Navbar Fix

When you hover over the arrow in the menus, the entire link now is painted correctly

Author: KenniM

src/css/helios-gcx.css

@@ -1106,24 +1106,6 @@ label.switch_label:after {
     color: var(--white);
 }
 
-.dark-mode .nav-item.toggler>button:hover{
-    z-index: -1;
-}
-
-.dark-mode .nav-item.toggler>button:hover::before{
-    content: "";
-    z-index: -1;
-}
-
-.nav-item.toggler>button:hover{
-    z-index: -1;
-}
-
-.nav-item.toggler>button:hover::before{
-    content: "";
-    z-index: -1;
-}
-
 .dark-mode .nav-item.is-current-page>a:before{
     content: "";
     border: 2px solid var(--color-interface-night-300);
@@ -1454,9 +1436,10 @@ label.switch_label:after {
 
 /* LIGHT MODE LISTS */
 
-.nav-item[data-depth="1"].toggler.is-active:hover button {
+/* .nav-item[data-depth="1"].toggler.is-active:hover button {
     color: #6a7086;
-}
+    background: #f6f8fa;
+} */
 
 .nav-item[data-depth="1"].toggler:hover,
 .nav-item[data-depth="2"].toggler:hover,

src/js/08-gcx-helios.js

@@ -81,3 +81,22 @@ document.querySelector('#collapse').addEventListener('click', function (event) {
     }
   }
 })
+
+document.querySelectorAll(`li.nav-item.toggler[data-depth="1"]>.nav-item-toggle,
+li.nav-item.toggler[data-depth="2"]>.nav-item-toggle,
+li.nav-item.toggler[data-depth="3"]>.nav-item-toggle,
+li.nav-item.toggler[data-depth="4"]>.nav-item-toggle`).forEach(function (btn) {
+  btn.addEventListener('mouseover', (event) => {
+    var theme = document.querySelector('html').classList.contains('dark-mode')
+    if (theme) {
+      btn.previousElementSibling.style.backgroundColor = '#2e394e'
+    } else {
+      btn.previousElementSibling.style.backgroundColor = '#f6f8fa'
+      btn.previousElementSibling.style.color = '#21293a'
+    }
+  })
+  btn.addEventListener('mouseout', (event) => {
+    btn.previousElementSibling.style.backgroundColor = ''
+    btn.previousElementSibling.style.color = ''
+  })
+})