From be33d9d6aca7bd3503363a978cef7bf8dae60a60 Mon Sep 17 00:00:00 2001
From: Mark Perkins <mark@allmarkedup.com>
Date: Thu, 21 Mar 2019 09:51:57 +0100
Subject: [PATCH] Navigate to first scenario when component label is clicked

---
 packages/fractalite/assets/css/nav.scss       |  2 +-
 .../src/client/components/navigation.js       | 26 +++++++++++++++++++
 packages/fractalite/src/server/nav.js         |  5 ++--
 packages/fractalite/views/vue/navigation.html |  8 ++++--
 4 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/packages/fractalite/assets/css/nav.scss b/packages/fractalite/assets/css/nav.scss
index e5f6dc4..5f53325 100644
--- a/packages/fractalite/assets/css/nav.scss
+++ b/packages/fractalite/assets/css/nav.scss
@@ -60,7 +60,7 @@
     color: var(--nav-link-color--hover);
   }
 
-  &__link.router-link-exact-active {
+  &__link:not(.fr-nav__toggle).is-active {
     background-color: var(--nav-link-bg--active);
     color: var(--nav-link-color--active);
   }
diff --git a/packages/fractalite/src/client/components/navigation.js b/packages/fractalite/src/client/components/navigation.js
index 7527946..aa2e8c9 100644
--- a/packages/fractalite/src/client/components/navigation.js
+++ b/packages/fractalite/src/client/components/navigation.js
@@ -1,3 +1,5 @@
+import Vue from 'vue/dist/vue';
+
 export default {
   name: 'navigation',
   template: '#navigation',
@@ -57,6 +59,30 @@ export default {
         return this.$store.getters.isExpanded(item);
       }
       return true;
+    },
+    handleClick(item) {
+
+      if (item.url && (!item.children || (item.children && !this.isExpanded(item)))) {
+        if (item.url.match(/^(http(s)?|ftp):\/\//)) {
+          this.toggleExpanded(item);
+          window.open(item.url, '_blank');
+        } else {
+          this.$router.push(item.url);
+        }
+      }
+
+
+      if (item.children) {
+        this.toggleExpanded(item);
+      }
+
+      // if (item.children) {
+      //   Vue.nextTick(() =>{
+      //     this.toggleExpanded(item);
+      //   });
+      // }
+
+
     }
   },
   watch: {
diff --git a/packages/fractalite/src/server/nav.js b/packages/fractalite/src/server/nav.js
index b3468cf..3e44bbd 100644
--- a/packages/fractalite/src/server/nav.js
+++ b/packages/fractalite/src/server/nav.js
@@ -56,7 +56,8 @@ module.exports = function(app, compiler, renderer, opts = {}) {
         Object.assign(entry, {
           id: `component-${item.name}`,
           type: 'component',
-          label: item.label
+          label: item.label,
+          url: item.scenarios[0].url
         });
         if (opts.scenarios) {
           entry.children = item.scenarios.map(scenario => {
@@ -68,8 +69,6 @@ module.exports = function(app, compiler, renderer, opts = {}) {
             entry.label = generateLabel(scenario.label, entry, scenario);
             return entry;
           });
-        } else {
-          entry.url = item.scenarios[0].url;
         }
       } else if (isFile(item)) {
         Object.assign(entry, {
diff --git a/packages/fractalite/views/vue/navigation.html b/packages/fractalite/views/vue/navigation.html
index d490ca1..58528c9 100644
--- a/packages/fractalite/views/vue/navigation.html
+++ b/packages/fractalite/views/vue/navigation.html
@@ -5,12 +5,16 @@
     ref="items"
     :class="{'is-expanded': isExpanded(item)}"
   >
-    <app-link :to="item.url" v-if="item.url" class="fr-nav__link">
+    <span :class="{ 'is-collapsable': item.collapsable, 'fr-nav__toggle': item.children, 'fr-nav__link': item.url && !item.children, 'is-active': item.url === $route.path }" @click.stop="handleClick(item)">
+      <span class="fr-nav__label" v-html="item.label"></span>
+    </span>
+
+    <!-- <app-link :to="item.url" v-if="item.url" class="fr-nav__link" :class="{ 'is-collapsable': item.collapsable }" @click="toggleExpanded(item)">
       <span class="fr-nav__label" v-html="item.label"></span>
     </app-link>
     <span class="fr-nav__toggle" :class="{ 'is-collapsable': item.collapsable }" @click.stop="toggleExpanded(item)" v-else>
       <span class="fr-nav__label" v-html="item.label"></span>
-    </span>
+    </span> -->
     <navigation :items="item.children" :depth="depth + 1" v-if="item.children"></navigation>
   </li>
 </ul>