Left Nav Improvements (#65)

This should fix a visual issue when using some new types of nav elements

Co-authored-by: Kenni Martínez <[email protected]>

Author: KenniMartinezM

gcx/styles/src/css/helios-gcx-links.css

@@ -74,4 +74,16 @@
 
 .dark-mode .doc .admonitionblock.note a {
     color: var(--color-white)!important;
+}
+
+.dark-mode .doc .admonitionblock.important a {
+    color: var(--color-white)!important;
+}
+
+.dark-mode .doc .admonitionblock.warning a {
+    color: var(--color-white)!important;
+}
+
+.dark-mode .doc .admonitionblock.tip a {
+    color: var(--color-white)!important;
 }

gcx/styles/src/css/helios-gcx-sidebar.css

@@ -1,4 +1,3 @@
-/*Navigation Sidebar*/
 .nav-menu>.nav-list {
     display: flex;
     flex-direction: column;
@@ -67,6 +66,48 @@ a.nav-link {
     position: relative;
 }
 
+/*.nav-item[data-depth="0"]:has(> span.nav-text) {
+    padding: 8px 0px!important;
+    margin-top: 8px!important;
+}
+
+
+.nav-item[data-depth="0"]:has(> span.nav-text) .nav-text:hover {
+    background-color: #f6f8fa;
+}
+
+.nav-item[data-depth="0"]:has(> span.nav-text):hover {
+    background-color: #f6f8fa;
+}
+
+.dark-mode .nav-item[data-depth="0"]:has(> span.nav-text):hover {
+    background-color: var(--color-purple-secondary-dark);
+}
+
+.dark-mode .nav-item[data-depth="0"]:has(> span.nav-text) .nav-text:hover {
+    background-color: var(--color-purple-secondary-dark);
+}
+
+.nav-item[data-depth="0"]:has(> span.nav-text) .nav-text {
+    font-size: 15px!important;
+}*/
+.nav-item[data-depth="0"]:has(> span.nav-text) {
+    margin-top: 8px!important;
+}
+
+.nav-item[data-depth="0"]> span.nav-text {
+    display: block;
+    width: 100%;
+}
+
+.nav-item[data-depth="0"]> span.nav-text:hover {
+    background-color: #f6f8fa;
+}
+
+.dark-mode .nav-item[data-depth="0"]> span.nav-text:hover {
+    background-color: var(--color-purple-secondary-dark);
+}
+
 li.nav-item.toggler.is-active:hover {
     background-color: #FFF;
 }
@@ -294,11 +335,17 @@ label.collapse_label:after {
     height: 100%;
 }
 
-.nav-item.is-active[data-depth="1"] li[data-depth="2"]>a.nav-link {
+.nav-item> span.nav-text{
+    font-size: 15px;
+}
+
+.nav-item.is-active[data-depth="1"] li[data-depth="2"]>a.nav-link,
+.nav-item.is-active[data-depth="0"]>span.nav-text~ul .nav-item[data-depth="1"] >a.nav-link {
     padding: 8px 62px;
 }
 
-.nav-item.is-active[data-depth="2"] li[data-depth="3"]>a.nav-link {
+.nav-item.is-active[data-depth="2"] li[data-depth="3"]>a.nav-link,
+.nav-item.is-active[data-depth="0"]>span.nav-text~ul .nav-item[data-depth="2"] >a.nav-link {
     padding: 8px 0 8px 90px;
 }
 
@@ -322,7 +369,8 @@ label.collapse_label:after {
 .nav-item.is-current-path[data-depth="1"], .nav-item.is-current-path[data-depth="2"], .nav-item.is-current-path[data-depth="3"] {
     padding: 0;
 }
-.nav-item.is-active[data-depth="3"] li[data-depth="4"]>a.nav-link {
+.nav-item.is-active[data-depth="3"] li[data-depth="4"]>a.nav-link,
+.nav-item.is-active[data-depth="0"]>span.nav-text~ul .nav-item[data-depth="3"] >a.nav-link  {
     padding: 8px 16px 8px 120px;
 }
 

gcx/styles/src/js/08-gcx-helios.js

@@ -114,3 +114,24 @@ document.querySelector(".nav-controls button#collapse").addEventListener("click"
   })
 })
 
+document.querySelectorAll(`.nav-item>span.nav-text+.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 = 'var(--color-purple-secondary-dark)'
+    } else {
+      btn.previousElementSibling.style.backgroundColor = 'var(--color-purple-secondary-light)'
+      btn.previousElementSibling.style.color = 'var(--color-interface-night-900)'
+    }
+  })
+  btn.addEventListener('mouseout', (event) => {
+    btn.previousElementSibling.style.backgroundColor = ''
+    btn.previousElementSibling.style.color = ''
+  })
+})
+
+document.querySelectorAll(".nav-item> span.nav-text").forEach(function (item) {
+  item.addEventListener("click", function (event) {
+    item.parentElement.classList.toggle("is-active");
+  })
+})