refactor(launchpad): improve animations

Author: dauriamarco

projects/element-ng/application-header/launchpad/si-launchpad-factory.component.scss

@@ -3,7 +3,8 @@
 @use '@siemens/element-theme/src/styles/all-variables';
 
 .app-switcher {
-  position: fixed;
+  position: absolute;
+  pointer-events: all;
   inset-block-start: calc(
     variables.$si-application-header-height + 1px /* header border compensation */ +
       variables.$si-titlebar-spacing + variables.$si-system-banner-spacing
@@ -17,7 +18,6 @@
   padding: map.get(variables.$spacers, 6);
   display: flex;
   flex-direction: column;
-  z-index: variables.$zindex-launchpad;
   background-color: variables.$element-base-1;
 
   @include all-variables.media-breakpoint-up(lg) {

projects/element-ng/application-header/si-application-header.component.html

@@ -51,13 +51,16 @@
 </header>
 
 @if (launchpadOpen() && launchpad()) {
-  <div [id]="id + '-launchpad'">
-    <ng-template [ngTemplateOutlet]="launchpad()!" [ngTemplateOutletInjector]="injector" />
+  <div class="launchpad-container" animate.leave="expand-leave">
+    <div [id]="id + '-launchpad'">
+      <ng-template [ngTemplateOutlet]="launchpad()!" [ngTemplateOutletInjector]="injector" />
+    </div>
   </div>
 }
 
 @if (openDropdownCount() || launchpadOpen()) {
   <div
+    animate.leave="backdrop-leave"
     [class]="`modal-backdrop ${launchpadOpen() ? 'd-block' : `d-${expandBreakpoint()}-none`}`"
     (click)="backdropClicked()"
   ></div>

projects/element-ng/application-header/si-application-header.component.scss

@@ -2,4 +2,40 @@
 
 .modal-backdrop {
   z-index: variables.$zindex-application-header-backdrop;
+  opacity: 1;
+  transition: opacity 0.15s linear;
+
+  @starting-style {
+    opacity: 0;
+  }
+
+  &.backdrop-leave {
+    opacity: 0;
+    transition: opacity 0.15s linear;
+  }
+}
+
+.launchpad-container {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: variables.$zindex-launchpad;
+  opacity: 1;
+  transform: translateY(0);
+  transition:
+    opacity 0.5s ease,
+    transform 0.5s ease;
+
+  @starting-style {
+    opacity: 0;
+    transform: translateY(-120px);
+  }
+
+  &.expand-leave {
+    opacity: 0;
+    transform: translateY(-120px);
+    transition:
+      opacity 0.25s ease,
+      transform 0.25s ease;
+  }
 }

projects/element-theme/src/styles/variables/_zindex.scss

@@ -16,5 +16,5 @@ $zindex-sidepanel-responsive: $zindex-fixed + 1; // above vertical-nav
 $zindex-vertical-nav: $zindex-fixed + 1;
 $zindex-vertical-nav-collapsed: $zindex-fixed;
 $zindex-application-header: $zindex-fixed + 3;
-$zindex-launchpad: $zindex-application-header;
+$zindex-launchpad: $zindex-application-header - 1;
 $zindex-application-header-backdrop: $zindex-launchpad - 1;