Add an arrow to open sub-trees, fixes #277

libs/Format/HTML/Template.php

@@ -78,10 +78,13 @@ class Template
         $nav = "";
         foreach ($entries as $entry) {
             if (array_key_exists('children', $entry)) {
+
+                $icon = '<i class="arrow">&nbsp;</i>';
+
                 if (array_key_exists('href', $entry)) {
-                    $link = '<a href="' . $entry['href'] . '" class="folder">' . $entry['title'] . '</a>';
+                    $link = '<a href="' . $entry['href'] . '" class="folder">' . $icon . $entry['title'] . '</a>';
                 } else {
-                    $link = '<a href="#" class="aj-nav folder">' . $entry['title'] . '</a>';
+                    $link = '<a href="#" class="aj-nav folder">' . $icon . $entry['title'] . '</a>';
                 }
 
                 $link .= $this->renderNavigation($entry['children']);
@@ -110,7 +113,7 @@ class Template
                 $nav[] = [
                     'title' => $node->getTitle(),
                     'href' => $base_page . $link,
-                    'class' => ($current_url === $link) ? 'active' : ''
+                    'class' => $current_url === $link ? 'active' : '',
                 ];
             } elseif ($node instanceof Directory) {
                 if (!$node->hasContent()) {
@@ -121,7 +124,7 @@ class Template
 
                 $folder = [
                     'title' => $node->getTitle(),
-                    'class' => (strpos($current_url, $link) === 0) ? 'open' : '',
+                    'class' => strpos($current_url, $link) === 0 ? 'open' : '',
                 ];
 
                 if ($mode === Daux::STATIC_MODE) {
@@ -136,6 +139,10 @@ class Template
                 $new_path = ($path === '') ? $url : $path . '/' . $url;
                 $folder['children'] = $this->buildNavigation($node, $new_path, $current_url, $base_page, $mode);
 
+                if (!empty($folder['children'])) {
+                    $folder['class'] .= ' has-children';
+                }
+
                 $nav[] = $folder;
             }
         }

themes/daux/js/daux.js

@@ -98,6 +98,12 @@ $(function () {
         $(this).next().slideToggle();
     });
 
+    // New Tree navigation
+    $("ul.nav.nav-list > li.has-children > a > .arrow").click(function() {
+        $(this).parent().parent().toggleClass('open');
+        return false;
+    });
+
     // Responsive navigation
     $('#menu-spinner-button').click(function () {
         $('#sub-nav-collapse').slideToggle();

themes/daux/less/components.less

@@ -70,19 +70,44 @@ code {
 
 //Sidebar Nav List
 .nav.nav-list {
-    padding-left: 0px;
-    padding-right: 0px;
+    padding-left: 0;
+    padding-right: 0;
 
     li {
         a {
-            margin: 0px;
-            padding: 6px 15px;
+            margin: 0;
+            padding: 6px 15px 6px 20px;
             .roboto-slab.regular;
             color: @dark;
             font-size: 15px;
             text-shadow: none;
             border-color: @lines;
 
+            .arrow {
+                display: inline-block;
+                position: relative;
+
+                width: 16px;
+                margin-left: -16px;
+
+                &:before {
+                    position:absolute;
+
+                    display:block;
+                    content:"";
+
+                    margin:-.25em 0 0 -.4em;
+                    left:50%;
+                    top: 50%;
+                    width: 0.5em;
+                    height: 0.5em;
+                    border-right: 0.15em solid @dark;
+                    border-top: 0.15em solid @dark;
+                    transform: rotate(45deg);
+                    transition-duration:.3s;
+                }
+            }
+
             &:hover {
                 color: @dark;
                 text-shadow: none;
@@ -100,11 +125,16 @@ code {
             > ul {
                 display: block;
             }
-        }
 
-        &:last-child {
-            &.open {
-                //border-bottom: none;
+            > a {
+                &, &:focus, &:hover {
+                    background-color:transparent;
+                }
+
+                > .arrow:before {
+                    margin-left:-.25em;
+                    transform: rotate(135deg);
+                }
             }
         }
 
@@ -128,10 +158,8 @@ code {
                     }
                 }
 
-                &.active {
-                    a {
-                        color: @dark;
-                    }
+                &.active a {
+                    color: @dark;
                 }
             }
         }