From c223cc5526d7517e9fbc469bf98e2e591f2ad480 Mon Sep 17 00:00:00 2001
From: Benjamin <Benjamin.Bezzeg@silabs.com>
Date: Thu, 25 Apr 2024 13:57:46 +0200
Subject: [PATCH] Add selection colors to toolbar menu items (#1309)

---
 src/components/ZCLToolbar.vue | 165 +++++++++++++++++++---------------
 src/tutorials/ZclTour.vue     |  13 +--
 2 files changed, 102 insertions(+), 76 deletions(-)

diff --git a/src/components/ZCLToolbar.vue b/src/components/ZCLToolbar.vue
index d71b4a731c..e0d37a3299 100644
--- a/src/components/ZCLToolbar.vue
+++ b/src/components/ZCLToolbar.vue
@@ -32,10 +32,10 @@
       v-if="showDebugNavItems"
       id="generate"
       color="grey"
+      class="navmenu-item"
       flat
       push
       no-caps
-      class="cursor-pointer"
       @click="generateIntoDirectory(generationDirectory)"
     >
       <div class="text-center">
@@ -48,7 +48,6 @@
       color="grey"
       flat
       no-caps
-      class="cursor-pointer"
       @click="saveChanges"
       v-if="
         this.$store.state.zap.saveButtonVisible && this.$store.state.zap.isDirty
@@ -75,62 +74,69 @@
         <div>Documentation</div>
       </div>
     </q-btn>
-    <q-btn
-      id="global_options"
-      color="grey"
-      flat
-      no-caps
-      class="cursor-pointer"
-      to="/options"
-    >
-      <div class="text-center">
-        <q-icon name="o_tune" />
-        <div>Options</div>
-      </div>
-    </q-btn>
+    <router-link v-slot="{ isActive, navigate }" to="/options">
+      <q-btn
+        id="global_options"
+        class="navmenu-item"
+        :class="{ 'navmenu-item--active': isActive }"
+        color="grey"
+        flat
+        no-caps
+        @click="navigate"
+      >
+        <div class="text-center">
+          <q-icon name="o_tune" />
+          <div>Options</div>
+        </div>
+      </q-btn>
+    </router-link>
 
-    <q-btn
-      class="cursor-pointer q-py-sm v-step-16"
-      flat
-      no-caps
-      color="grey"
-      to="/extensions"
-    >
-      <div class="text-center">
-        <q-icon name="o_extension" />
-        <div>Extensions</div>
-      </div>
-    </q-btn>
-    <q-btn
-      class="cursor-pointer"
-      flat
-      no-caps
-      to="/notifications"
-      id="Notifications"
-      color="grey"
-    >
-      <div class="text-center">
-        <q-icon name="o_assignment_late" />
-        <div>
-          Notifications
-          <q-badge
-            style="top: 5px; right: 5px"
-            color="red"
-            floating
-            v-if="this.$store.state.zap.notificationCount > 0"
-          >
-            {{ this.$store.state.zap.notificationCount }}
-          </q-badge>
+    <router-link v-slot="{ isActive, navigate }" to="/extensions">
+      <q-btn
+        class="navmenu-item q-py-sm v-step-16"
+        :class="{ 'navmenu-item--active': isActive }"
+        flat
+        no-caps
+        @click="navigate"
+      >
+        <div class="text-center">
+          <q-icon name="o_extension" />
+          <div>Extensions</div>
         </div>
-      </div>
-    </q-btn>
+      </q-btn>
+    </router-link>
+    <router-link v-slot="{ isActive, navigate }" to="/notifications">
+      <q-btn
+        class="navmenu-item"
+        :class="{ 'navmenu-item--active': isActive }"
+        flat
+        no-caps
+        id="Notifications"
+        @click="navigate"
+      >
+        <div class="text-center">
+          <q-icon name="o_assignment_late" />
+          <div>
+            Notifications
+            <q-badge
+              style="top: 5px; right: 5px"
+              color="red"
+              floating
+              v-if="this.$store.state.zap.notificationCount > 0"
+            >
+              {{ this.$store.state.zap.notificationCount }}
+            </q-badge>
+          </div>
+        </div>
+      </q-btn>
+    </router-link>
     <q-btn
       v-if="showDebugNavItems"
-      class="cursor-pointer"
+      class="navmenu-item"
+      :class="{ 'navmenu-item--active': showPreviewTab }"
       flat
       no-caps
       id="Preview"
-      color="grey"
       @click="
         () => {
           togglePreviewTab()
@@ -147,8 +153,8 @@
       flat
       push
       no-caps
-      color="grey"
-      class="cursor-pointer"
+      class="navmenu-item"
+      :class="{ 'navmenu-item--active': isTutorialRunning }"
       @click="startTour"
       data-cy="btn-tutorial"
     >
@@ -157,20 +163,22 @@
         <div>Tutorial</div>
       </div>
     </q-btn>
-    <q-btn
-      v-if="showDebugNavItems"
-      class="cursor-pointer"
-      flat
-      no-caps
-      to="/preferences/user"
-      id="Settings"
-      color="grey"
-    >
-      <div class="text-center">
-        <q-icon name="o_settings" />
-        <div>Settings</div>
-      </div>
-    </q-btn>
+    <router-link v-slot="{ isActive, navigate }" to="/preferences/user">
+      <q-btn
+        v-if="showDebugNavItems"
+        class="navmenu-item"
+        :class="{ 'navmenu-item--active': isActive }"
+        flat
+        no-caps
+        id="Settings"
+        @click="navigate"
+      >
+        <div class="text-center">
+          <q-icon name="o_settings" />
+          <div>Settings</div>
+        </div>
+      </q-btn>
+    </router-link>
   </q-toolbar>
 </template>
 <script>
@@ -195,6 +203,12 @@ export default {
         ].length > 0
       )
     },
+    isTutorialRunning: {
+      get() {
+        console.log('firebrava')
+        return this.$store.state.zap.isTutorialRunning
+      },
+    },
     showPreviewTab: {
       get() {
         return this.$store.state.zap.showPreviewTab
@@ -342,6 +356,20 @@ export default {
 .logo-margin {
   margin-left: 75px;
 }
+.navmenu-item {
+  font-size: 10px;
+  padding: 15px 20px;
+  font-weight: 400;
+  color: $grey !important;
+}
+
+.navmenu-item:hover {
+  color: $primary !important;
+}
+.navmenu-item--active {
+  color: $primary !important;
+  background-color: $grey-4;
+}
 
 .q-btn {
   font-size: 10px;
@@ -353,9 +381,6 @@ export default {
   &.disabled {
     opacity: 0.3 !important;
   }
-  &.q-btn--active {
-    color: var(--q-primary) !important;
-  }
 }
 .slide-up-enter-active,
 .slide-up-leave-active {
diff --git a/src/tutorials/ZclTour.vue b/src/tutorials/ZclTour.vue
index fde58e11ea..9428dedd5c 100644
--- a/src/tutorials/ZclTour.vue
+++ b/src/tutorials/ZclTour.vue
@@ -91,6 +91,7 @@ export default {
   },
   methods: {
     startTour() {
+      this.$store.commit('zap/toggleTutorial', true)
       this.$refs['zcl-tour'].resetTour()
     },
     // This function will create a endpoint for tutorial
@@ -203,16 +204,16 @@ export default {
         this.tourEndpointId ? this.handleDeletionDialog() : ''
         this.$store.commit('zap/toggleEndpointModal', false)
       } else {
-        this.$router
-          .push('/')
-          .then(() => {})
-          .then(() => {
-            this.tourEndpointId ? this.handleDeletionDialog() : ''
-          })
+        this.$router.push('/').then(() => {
+          this.tourEndpointId ? this.handleDeletionDialog() : ''
+          this.$store.commit('zap/toggleTutorial', false)
+          this.$store.commit('zap/toggleEndpointModal', false)
+        })
       }
     },
     // This function will set isTutorialRunning to true
     startTutorialAndCloseTheEndpointModal() {
+      // Although its set to be called before the 0th step, its only getting called when coming back from the next step
       return new Promise((resolve) => {
         this.$store.commit('zap/toggleEndpointModal', false)
         this.$store.commit('zap/toggleTutorial', true)