style: add angular animation on main toolbar

src/app/components/presentationals/main-toolbar/main-toolbar-mobile/main-toolbar-mobile.presentational.html

@@ -13,9 +13,9 @@
   </div>
 </div>
 
-<div class="menu"
-     [class.is-open]="isOpen"
-     *ngIf="isOpen"
+<div *ngIf="isOpen"
+     class="menu"
+     @menuAnimation
 >
   <ul>
     <li *ngFor="let menu of getListMenu()"

src/app/components/presentationals/main-toolbar/main-toolbar-mobile/main-toolbar-mobile.presentational.scss

@@ -7,6 +7,10 @@
   background-color: $black;
   flex-flow: row wrap;
   color: $white;
+  z-index: $z-index-main-toolbar-header;
+  position: sticky;
+  left: 0;
+  right: 0;
 
   .burger-menu {
     margin: 2px;
@@ -40,21 +44,6 @@ a {
   z-index: $z-index-main-toolbar-menu;
   left: 0;
   right: 0;
-  opacity: 0;
-
-  &.is-open {
-    animation: appear 0.5s;
-    animation-fill-mode: forwards;
-  }
-
-  @-webkit-keyframes appear {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
 }
 
 ul {

src/app/components/presentationals/main-toolbar/main-toolbar-mobile/main-toolbar-mobile.presentational.ts

+import {
+  animate,
+  state,
+  style,
+  transition,
+  trigger,
+} from "@angular/animations";
 import {
   ChangeDetectionStrategy,
   Component,
@@ -11,6 +18,13 @@ import {OAuth2Service} from "solidify-frontend";
   templateUrl: "./main-toolbar-mobile.presentational.html",
   styleUrls: ["./main-toolbar-mobile.presentational.scss"],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [
+    trigger("menuAnimation", [
+      state("void", style({transform: "translateY(-100%)"})),
+      transition(":enter", animate("600ms ease")),
+      transition(":leave", animate("300ms ease")),
+    ]),
+  ],
 })
 export class MainToolbarMobilePresentational extends AbstractMainToolbarPresentational {
   get appUtil(): typeof AppUtil {

src/sass/abstracts/_variables.scss

@@ -34,3 +34,4 @@ $size-status-history-button: 20px;
 
 $z-index-breadcrumb: 1;
 $z-index-main-toolbar-menu: 2;
+$z-index-main-toolbar-header: 3;