fix initial highlighting bug

owncloud · Dec 8, 2021 · 1a83c24 · 1a83c24
1 parent 75a0d76
commit 1a83c24
Showing 1 changed file with 29 additions and 20 deletions.
diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
@@ -64,9 +64,16 @@
                   :collapsed="navigation.closed"
                   :id="`nav-item-${index}`"
                 >
-                  <span :class="{ 'text': true, 'text-invisible': navigation.closed }">{{ link.name }}</span>
-                  <span class="hover-blob"></span>
-                  <span v-if="index === 0" class="active-blob" id="nav-item-blob"></span>
+                  <span :class="{ 'text': true, 'text-invisible': navigation.closed }">
+                    {{ link.name }}
+                  </span>
+                  <span class="hover-blob" />
+                  <span
+                    v-if="index === 0"
+                    @click.prevent.stop
+                    class="active-blob"
+                    id="nav-item-blob"
+                  />
                 </oc-sidebar-nav-item>
               </oc-list>
             </template>
@@ -279,10 +286,13 @@ export default {
     sidebarNavItems: {
       immediate: true,
       deep: true,
-      handler: function (sidebarNavItems) {
+      handler: function (sidebarNavItems, beforeNavItems) {
         sidebarNavItems.forEach((item, index) => {
-          if(!item.active) return;
-          this.animateBlob(index)
+          if(!item.active) return
+          if(beforeNavItems) return this.animateBlob(index)
+          setTimeout(() => {
+            this.animateBlob(index, 0)
+          }, 1)
         })
       }
     },
@@ -339,10 +349,6 @@ export default {
     this.$nextTick(() => {
       window.addEventListener('resize', this.onResize)
       this.onResize()
-      this.sidebarNavItems.forEach((item, index) => {
-        if(!item.active) return;
-        this.animateBlob(index, 0)
-      })
     })
   },
 
@@ -442,6 +448,8 @@ export default {
       );
       const blob =  document.getElementById("nav-item-blob");
       const style = blob.style;
+
+      style.setProperty("opacity", "1");
       style.setProperty("transition-duration", `${duration}s`);
       style.setProperty("transform", `translateY(${distance}px)`);
     },
@@ -502,20 +510,20 @@ body,
     right: 0;
     bottom: 0;
     border: 0;
+    opacity: 0;
     background: linear-gradient(90deg, #0869de 0%, #4e85c8 100%);
     z-index: 1;
     transition: transform 0.3s cubic-bezier(.51,.06,.42,1.26);
     border-radius: 5px;
-  }
-  .active-blob::before {
-    content: "";
-    position: absolute;
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    width: 44px;
-    box-shadow: 2px 0px 6px rgba(0, 0, 0, 0.14);
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      width: 44px;
+      box-shadow: 2px 0px 6px rgba(0, 0, 0, 0.14);
+    }
   }
   .hover-blob {
     position: absolute;
@@ -525,6 +533,7 @@ body,
     bottom: 0;
     border: 0;
     z-index: 0;
+    transition: all 0.2s ease-out;
   }
   .hover-blob:hover,
   .text:hover + .hover-blob,