feat: All Pages - include full parent paths in nav

client/js/pages/all.js

@@ -20,9 +20,9 @@ module.exports = (alerts, socket) => {
           Vue.nextTick(() => {
             socket.emit('treeFetch', { basePath }, (data) => {
               if (self.tree.length > 0) {
-                let curTree = _.last(self.tree)
-                curTree.hasChildren = true
-                _.find(curTree.pages, { _id: basePath }).isActive = true
+                let branch = _.last(self.tree)
+                branch.hasChildren = true
+                _.find(branch.pages, { _id: basePath }).isActive = true
               }
               self.tree.push({
                 hasChildren: false,
@@ -34,6 +34,32 @@ module.exports = (alerts, socket) => {
         },
         goto: function (entryPath) {
           window.location.assign(rootUrl + entryPath)
+        },
+        unfold: function (entryPath) {
+          let self = this
+          let lastIndex = 0
+          _.forEach(self.tree, branch => {
+            lastIndex++
+            if (_.find(branch.pages, { _id: entryPath }) !== undefined) {
+              return false
+            }
+          })
+          self.tree = _.slice(self.tree, 0, lastIndex)
+          let branch = _.last(self.tree)
+          branch.hasChildren = false
+          branch.pages.forEach(page => {
+            page.isActive = false
+          })
+        },
+        mainAction: function (page) {
+          let self = this
+          if (page.isActive) {
+            self.unfold(page._id)
+          } else if (page.isDirectory) {
+            self.fetch(page._id)
+          } else {
+            self.goto(page._id)
+          }
         }
       },
       mounted: function () {

client/scss/components/collapsable-nav.scss

@@ -58,6 +58,11 @@
 
       a {
         height: 50px;
+
+        &:nth-child(2) {
+          display: none;
+        }
+
       }
     }
 
@@ -65,7 +70,8 @@
 
   a {
     display: flex;
-    height: 40px;
+    flex: 1 1 auto;
+    min-height: 40px;
     width: 100%;
     align-items: center;
     padding: 0 15px;
@@ -74,9 +80,9 @@
     transition: all .4s ease;
     background-color: rgba(0,0,0,0);
 
-    i {
-      font-size: 14px;
-      margin-right: 10px;
+    &.is-pagelink {
+      flex: 0 1 70px;
+      justify-content: center;
     }
 
     &:hover {
@@ -84,6 +90,20 @@
       text-decoration: none;
     }
 
+    i {
+      font-size: 14px;
+
+      &:first-of-type {
+        margin-right: 10px;
+      }
+
+    }
+
+    span {
+      display: block;
+      padding: 5px 0;
+    }
+
   }
 
 }