add hiddenLabels variables to show or hide of top menu items on mouse over

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;
     }