Fix: Treemenu

themes/quark-hugo/assets/scss/theme/_mobile.scss

@@ -183,6 +183,15 @@
     }
   }
 
+  li.tree-closed > .toggler:before {
+    content: "\f0fe";
+  }
+
+  li.tree-opened > .toggler:before {
+    content: "\f146";
+    color: $primary-color;
+  }
+
   li.tree-empty  > .toggler {
     opacity: 0.3; cursor: default;
 
@@ -190,14 +199,6 @@
       content: "\f0c8";
     }
   }
-
-  li.tree-closed > .toggler:before {
-    content: "\f0fe";
-  }
-
-  li.tree-opened > .toggler:before {
-    content: "\f146";
-  }
 }
 
 .mobile-nav-open {

themes/quark-hugo/layouts/partials/navigation.html

@@ -1,13 +1,22 @@
 <ul class="{{ if .tree }}tree{{ end }}">
-  {{ $currentPage := .ctx }} {{ range site.Menus.main }}
+  {{ $currentPage := .ctx }} 
+  {{ $isTree := .tree }}
+  {{ range site.Menus.main }}
   <li>
     {{ $isActive := eq .Page $currentPage }}
 
+    {{ range .Children }}
+    {{/* Also make active in case a child is active */}}
+    {{ $isActive = or $isActive (eq .Page $currentPage) }}
+    {{ end }}
+
+    <a href="{{ .URL }}" class="{{ if $isActive }}active{{ end }}">
+      {{ .Name }}
+    </a>
+
     {{ if .HasChildren }}
     <ul class="submenu">
       {{ range .Children }}
-      {{/* Also make active in case a child is active */}}
-      {{ $isActive = or $isActive (eq .Page $currentPage) }}
       <li class="submenu">
         <a
           href="{{ .URL }}"
@@ -19,10 +28,6 @@
       {{ end }}
     </ul>
     {{ end }}
-
-    <a href="{{ .URL }}" class="{{ if $isActive }}active{{ end }}">
-        {{ .Name }}
-    </a>
   </li>
   {{ end }}
 </ul>

themes/quark-hugo/static/js/site.js

@@ -56,6 +56,6 @@ jQuery(document).ready(function($){
     });
 
     // Tree Menu
-    $(".tree").treemenu({delay:300});
+    $(".tree").treemenu({delay:300, openActive: true});
 
 });