feat(#961): include sidebar metrics animation

frontend/assets/scss/abstract/placeholders/_placeholders.scss

@@ -81,6 +81,16 @@
     margin: 0 auto;
     padding: 4em;
 }
+%collapsable-if-metrics {
+  padding-right: calc($sidebarMenuWidth + 15px);
+  transition: padding 0.25s linear 0.2s;
+  .--metrics & {
+    @include media(">desktop") {
+      padding-right: calc($sidebarWidth + 25px);
+      transition: padding 0.25s linear;
+    }
+  }
+}
 
 // buttons
 %button {
@@ -202,12 +212,12 @@
       width: auto;
       height: auto;
       opacity: 1;
-      transition: opacity 0.2s ease;
+      transition: opacity 0.1s ease 0.2s;
       z-index: 2;
     }
     &:before {
       opacity: 1;
-      transition: opacity 0.2s ease;
+      transition: opacity 0.1s ease 0.2s;
     }
   }
 }

frontend/components/commons/header/filters/FiltersArea.vue

@@ -121,13 +121,7 @@ export default {
   padding-top: 0;
   padding-bottom: 0;
   margin-left: 0;
-  padding-right: calc($sidebarMenuWidth + 15px);
-  .--metrics & {
-    @include media(">desktop") {
-      padding-right: calc($sidebarWidth + 25px);
-      transition: padding 0.1s ease-in-out;
-    }
-  }
+  @extend %collapsable-if-metrics !optional;
 }
 
 .filters {

frontend/components/commons/header/global-actions/GlobalActions.vue

@@ -45,17 +45,7 @@ export default {
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 4em;
-  padding-right: calc($sidebarMenuWidth + 15px);
-  .--metrics & {
-    @include media(">desktop") {
-      padding-right: calc($sidebarWidth + 25px);
-      transition: padding 0.1s ease-in-out;
-    }
-  }
-  @include media(">desktop") {
-    transition: padding 0.1s ease-in-out;
-    width: 100%;
-  }
+  @extend %collapsable-if-metrics !optional;
 }
 .global-actions {
   display: flex;

frontend/components/commons/results/ResultsList.vue

@@ -167,24 +167,12 @@ export default {
 <style lang="scss" scoped>
 .content {
   $this: &;
-  padding: 0;
   width: 100%;
   position: relative;
   margin-bottom: 0;
   list-style: none;
-  padding-right: calc($sidebarMenuWidth + 15px);
   z-index: 0;
-  .--metrics & {
-    @include media(">desktop") {
-      width: 100%;
-      padding-right: calc($sidebarWidth + 25px);
-      transition: padding 0.1s ease-in-out;
-    }
-  }
-  @include media(">desktop") {
-    transition: padding 0.1s ease-in-out;
-    width: 100%;
-  }
+  @extend %collapsable-if-metrics !optional;
   .results-scroll {
     height: 100vh !important;
     overflow: auto;

frontend/components/commons/sidebar/SidebarButton.vue

@@ -6,12 +6,6 @@
     :data-title="!activeView.includes(id) ? tooltip : null"
     @click="$emit('button-action', id)"
   >
-    <!-- <svgicon
-      v-if="type !== 'Refresh'"
-      v-show="activeView.includes(id)"
-      class="sidebar-button__icon-help"
-      :name="type === 'Mode' ? 'check3' : 'double-chev'"
-    ></svgicon> -->
     <svgicon :name="icon"></svgicon>
   </a>
 </template>
@@ -63,6 +57,14 @@ $color: #333346;
     position: absolute;
     left: 0.8em;
   }
+  &.mode {
+    &:hover {
+      .svg-icon {
+        background: palette(grey, smooth);
+        border-radius: $border-radius;
+      }
+    }
+  }
   &.active {
     &.mode {
       .svg-icon {
@@ -72,15 +74,19 @@ $color: #333346;
     }
     &.metrics {
       position: relative;
-      &:before {
+      .svg-icon {
+        animation: move-horizontal 0.2s ease-in-out 0.2s;
+        animation-fill-mode: backwards;
+      }
+      &.active:before {
         content: "";
         height: 38px;
         width: 2px;
-        background: $color;
         border-radius: 2px;
         position: absolute;
         left: 0;
         top: 0;
+        background: $color;
       }
     }
   }
@@ -96,4 +102,13 @@ $color: #333346;
   box-sizing: content-box;
   margin-bottom: 0.5em;
 }
+
+@keyframes move-horizontal {
+  0% {
+    transform: translateX(0.3em);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
 </style>

frontend/components/commons/sidebar/SidebarMenu.vue

@@ -93,17 +93,19 @@ export default {
 $sidebar-button-size: 45px;
 $color: #333346;
 .sidebar {
-  position: fixed;
-  top: 56px;
-  right: 0;
+  top: 0;
   width: $sidebar-button-size;
   min-width: $sidebar-button-size;
   min-height: 100vh;
   min-width: $sidebarMenuWidth;
-  border-left: 1px solid palette(grey, smooth);
+  background: $bg;
+  box-shadow: none;
+  pointer-events: all;
   z-index: 1;
+  transition: box-shadow 0.2s ease-in-out 0.4s;
   .--metrics & {
-    border-color: transparent;
+    box-shadow: inset 1px 1px 5px -2px #c7c7c7;
+    transition: box-shadow 0.2s ease-in-out;
   }
   p {
     text-align: center;

frontend/components/commons/sidebar/SidebarPanel.vue

@@ -19,11 +19,14 @@
   <aside class="sidebar">
     <div class="sidebar__wrapper">
       <div class="sidebar__content">
-        <svgicon
-          @click="closePanel"
-          class="sidebar__panel__button"
-          name="chev-right"
-        ></svgicon>
+        <a
+          href="#"
+          @click.prevent="closePanel"
+          :class="{ 'zoom-out': animated }"
+          @animationend="animated = false"
+          class="sidebar__close-button"
+          ><svgicon name="chev-right" width="6" height="8"></svgicon
+        ></a>
         <slot></slot>
       </div>
     </div>
@@ -32,6 +35,11 @@
 <script>
 import "assets/icons/chev-right";
 export default {
+  data: () => {
+    return {
+      animated: false,
+    };
+  },
   props: {
     dataset: {
       type: Object,
@@ -41,6 +49,7 @@ export default {
   methods: {
     closePanel() {
       this.$emit("close-panel");
+      this.animated = true;
     },
   },
 };
@@ -49,41 +58,68 @@ export default {
 $topbarHeight: 56px;
 $sidebarMenuWidth: 70px;
 .sidebar {
-  top: 0;
+  $this: &;
   min-height: calc(100vh - $topbarHeight);
   width: $sidebarPanelWidth;
-  position: absolute;
-  right: $sidebarMenuWidth;
+  position: relative;
+  top: 0;
+  right: -$sidebarPanelWidth + 1px;
   background: $bg;
   padding: 1em 1.5em;
-  transition: top 0.2s ease-in-out;
-  border: 1px solid palette(grey, smooth);
-  box-shadow: -4px 15px 16px -1px #c7c7c7;
+  transition: right 0.25s linear 0.2s;
+  z-index: -1;
+  border-left: 1px solid palette(grey, smooth);
+  &:hover {
+    #{$this}__close-button:not(.zoom-out) {
+      opacity: 1;
+      transform: scale(1);
+      transition: transform 0.15s ease-in-out;
+    }
+  }
+  &__close-button {
+    position: absolute;
+    left: -2.5em;
+    top: 1px;
+    border-radius: 3px;
+    background: palette(grey, smooth);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    transform: scale(0);
+    overflow: hidden;
+    opacity: 0;
+    outline: 0;
+    &.zoom-out {
+      opacity: 1;
+      animation: zoom-out 0.3s ease-out forwards;
+    }
+    .svg-icon {
+      color: $secondary-color;
+    }
+  }
+  &__content {
+    display: block;
+    position: relative;
+    opacity: 0;
+    transition: opacity 0.1s ease-out 0.6s;
+    z-index: 0;
+  }
+  &.visible {
+    overflow: visible;
+    right: 0;
+    transition: right 0.25s linear;
+    .sidebar__content {
+      transition: opacity 0.1s ease-in-out 0.2s;
+      opacity: 1;
+    }
+  }
   @include media(">desktop") {
     border-radius: 1px;
-    border: none;
     margin-left: 1em;
     display: block !important;
-    right: $sidebarMenuWidth;
-  }
-  &__panel {
-    &__button {
-      position: absolute;
-      left: 1.5em;
-      top: 2em;
-      pointer-events: all;
-      cursor: pointer;
-      z-index: 2;
-      border-radius: 3px;
-      padding: 5px;
-      background: palette(grey, smooth);
-      box-sizing: content-box;
-      max-width: 8px;
-      max-height: 8px;
-      &:hover {
-        background: darken(palette(grey, smooth), 5%);
-      }
-    }
+    right: -$sidebarPanelWidth + 1px;
   }
   &__content {
     border-radius: 2px;
@@ -95,8 +131,28 @@ $sidebarMenuWidth: 70px;
   ::v-deep {
     .sidebar__title {
       margin-bottom: 2em;
-      margin-left: 1.5em;
+      color: $font-secondary-dark;
+      margin-top: 0.2em;
+      @include font-size(20px);
+      font-weight: 700;
+    }
+    .sidebar__subtitle {
+      @include font-size(15px);
+      color: $font-secondary-dark;
+      font-weight: 600;
     }
   }
 }
+
+@keyframes zoom-out {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
 </style>

frontend/components/commons/sidebar/SidebarProgress.vue

@@ -95,14 +95,6 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.sidebar {
-  &__title {
-    color: $font-secondary-dark;
-    margin-top: 0.5em;
-    @include font-size(20px);
-    font-weight: 700;
-  }
-}
 label {
   margin-top: 1.2em;
   margin-bottom: 0.5em;

frontend/components/commons/sidebar/StatsSelector.vue

@@ -24,7 +24,7 @@
     >
       {{ selectedOption.name }}
     </p>
-    <p v-else>{{ selectedOption.name }}</p>
+    <p class="sidebar__subtitle" v-else>{{ selectedOption.name }}</p>
     <transition name="fade">
       <ul
         v-if="showOptionsSelector"