From 690c437476026bb3c1b459e31d3f2ccea33956fa Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon.vieille@trinaps.com>
Date: Mon, 26 Dec 2022 00:56:27 +0100
Subject: [PATCH] add hiddenLabels variables to show or hide of top menu items
 on mouse over

---
 src/AppMenu.vue | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index 8f043e8..eb9c10a 100644
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -22,12 +22,16 @@
 
 <template>
   <nav class="app-menu show">
-    <ul class="app-menu-main" v-if="apps !== null">
+    <ul
+      class="app-menu-main"
+      :class="{ 'app-menu-main__hidden-label': hiddenLabels }"
+      v-if="apps !== null"
+      >
       <li v-for="app in mainAppList()"
         :key="app.id"
         :data-app-id="app.id"
         class="app-menu-entry"
-        :class="{ 'app-menu-entry__active': app.active }"
+        :class="{ 'app-menu-entry__active': app.active, 'app-menu-entry__hidden-label': hiddenLabels }"
         :style="makeStyle(app)"
         >
         <a :href="app.href"
@@ -77,6 +81,7 @@ export default {
       appLimit: 0,
       observer: null,
       targetBlankApps: [],
+      hiddenLabels: true
     }
   },
   mounted() {
@@ -220,8 +225,8 @@ $header-icon-size: 20px;
       overflow: hidden;
     }
 
-    &:hover,
-    &:focus-within {
+    &:not(.app-menu-entry__hidden-label):hover,
+    &:not(.app-menu-entry__hidden-label):focus-within {
       opacity: 1;
       .app-menu-entry--label {
         opacity: 1;
@@ -241,7 +246,12 @@ $header-icon-size: 20px;
   .app-menu-entry:hover,
   .app-menu-entry:focus {
     opacity: 1;
+  }
 
+  &:not(.app-menu-main__hidden-label):hover,
+  &:not(.app-menu-main__hidden-label):focus-within,
+  .app-menu-entry:not(.app-menu-entry__hidden-label):hover,
+  .app-menu-entry:not(.app-menu-entry__hidden-label):focus {
     img {
       margin-top: -6px;
     }