Unify time transitions across the Navigator (#920)

Author: marinaaisa

src/components/AdjustableSidebarWidth.vue

@@ -464,7 +464,7 @@ export default {
     left: 0;
     z-index: $nav-z-index + 1;
     transform: translateX(-100%);
-    transition: transform 0.15s ease-in;
+    transition: transform var(--nav-transition-duration) ease-in;
     left: 0;
 
     :deep(.aside-animated-child) {
@@ -477,8 +477,9 @@ export default {
       :deep(.aside-animated-child) {
         --index: 0;
         opacity: 1;
-        transition: opacity 0.15s linear;
-        transition-delay: calc(var(--index) * 0.15s + 0.15s);
+        transition: opacity var(--nav-transition-duration) linear;
+        transition-delay:
+          calc(var(--index) * var(--nav-transition-duration) + var(--nav-transition-duration));
       }
     }
 

src/components/DocumentationLayout.vue

@@ -245,14 +245,14 @@ export default {
 }
 
 .documentation-layout {
-  --delay: 1s;
+  --nav-transition-duration: 0.15s;
   display: flex;
   flex-flow: column;
   background: var(--colors-text-background, var(--color-text-background));
 
   .delay-hiding-leave-active {
     // don't hide navigator until delay time has passed
-    transition: display var(--delay);
+    transition: display var(--nav-transition-duration);
   }
 }