feat(design): update sidebar viewport overflow style to change on ani…

…mation start and done (#2718)
graycoreio · Jan 15, 2024 · 2ec65c2 · 2ec65c2
1 parent 9792701
commit 2ec65c2
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 12 deletions.
diff --git a/libs/design/sidebar/src/sidebar-viewport/sidebar-viewport.component.html b/libs/design/sidebar/src/sidebar-viewport/sidebar-viewport.component.html
@@ -7,13 +7,21 @@
   (backdropClicked)="_backdropClicked()">
 </daff-backdrop>
 
-<div class="daff-sidebar-viewport__nav" [@transformContent]="_animationState" [style.padding-left.px]="_navPadLeft" [style.padding-right.px]="_navPadRight">
-  <ng-content select="[daff-sidebar-viewport-nav]"></ng-content>
+<div class="daff-sidebar-viewport__nav"
+  [@transformContent]="_animationState"
+  [style.padding-left.px]="_navPadLeft"
+  [style.padding-right.px]="_navPadRight">
+    <ng-content select="[daff-sidebar-viewport-nav]"></ng-content>
 </div>
 
-<div class="daff-sidebar-viewport__content" [@transformContent]="_animationState">
-  <div class="daff-sidebar-viewport__inner" [style.padding-left.px]="_contentPadLeft" [style.padding-right.px]="_contentPadRight">
-    <ng-content></ng-content>
+<div class="daff-sidebar-viewport__content"
+  [@transformContent]="_animationState"
+  (@transformContent.start)="onContentAnimationStart($event)"
+  (@transformContent.done)="onContentAnimationDone($event)">
+  <div class="daff-sidebar-viewport__inner"
+    [style.padding-left.px]="_contentPadLeft"
+    [style.padding-right.px]="_contentPadRight">
+      <ng-content></ng-content>
   </div>
 </div>
 

diff --git a/libs/design/sidebar/src/sidebar-viewport/sidebar-viewport.component.ts b/libs/design/sidebar/src/sidebar-viewport/sidebar-viewport.component.ts
@@ -1,3 +1,4 @@
+import { AnimationEvent } from '@angular/animations';
 import {
   Component,
   Output,
@@ -87,6 +88,18 @@ export class DaffSidebarViewportComponent implements AfterContentChecked {
     return this.navPlacement === DaffNavPlacementEnum.BESIDE;
   }
 
+  onContentAnimationStart(e: AnimationEvent) {
+    if(e.toState === 'open') {
+      this._elementRef.nativeElement.style.overflow = 'hidden';
+    }
+  }
+
+  onContentAnimationDone(e: AnimationEvent) {
+    if(e.toState === 'closed') {
+      this._elementRef.nativeElement.style.overflow = null;
+    }
+  }
+
   /**
    * The placement of the nav in relation to the sidebar. The default is set to `top`.
    * Note that this is really only available when there is a `side-fixed` sidebar.
@@ -153,13 +166,7 @@ export class DaffSidebarViewportComponent implements AfterContentChecked {
     const nextShift = sidebarViewportContentShift(this.sidebars) + 'px';
     if (this._shift !== nextShift) {
       this._shift = nextShift;
-      if(nextShift !== '0px') {
-        this._elementRef.nativeElement.style.overflow = 'hidden';
-      } else {
-        setTimeout(() => {
-          this._elementRef.nativeElement.style.overflow = null;
-        }, 200);
-      }
+
       this.updateAnimationState();
       this.cdRef.markForCheck();
     }