feat(design): update sidebar overflow styles so elements within the v…

…iewport content can be positioned sticky
graycoreio · Jan 10, 2024 · 043b527 · 043b527
1 parent 5acb15c
commit 043b527
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/libs/design/sidebar/src/sidebar-viewport/sidebar-viewport.component.scss b/libs/design/sidebar/src/sidebar-viewport/sidebar-viewport.component.scss
@@ -3,7 +3,7 @@
 :host {
 	// fixes a bug where certain elements show in front of backdrop for a second.
 	display: flex;
-	overflow: hidden;
+	min-height: 100dvh;
 	position: relative;
 	width: 100%;
 	z-index: variables.$daff-sidebar-viewport-z-index;
@@ -16,7 +16,6 @@
 		flex: 0 1 auto;
 		width: 100%;
 		z-index: variables.$daff-sidebar-content-z-index;
-		overflow-y: auto;
 		height: 100%;
 	}
 
@@ -48,6 +47,7 @@
 
 :host-context(daff-sidebar-viewport daff-sidebar-viewport) {
 	transform: translateX(0px);
+	min-height: auto;
 
 	.daff-sidebar-viewport__inner {
 		padding-left: 0px !important;

diff --git a/libs/design/sidebar/src/sidebar-viewport/sidebar-viewport.component.ts b/libs/design/sidebar/src/sidebar-viewport/sidebar-viewport.component.ts
@@ -153,6 +153,13 @@ 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();
     }

diff --git a/libs/design/sidebar/src/sidebar/sidebar.component.scss b/libs/design/sidebar/src/sidebar/sidebar.component.scss
@@ -56,7 +56,7 @@
 :host-context(.daff-sidebar-viewport.beside) {
 	&.side-fixed {
 		top: 0;
-		height: 100dvh;
+		height: 100%;
 	}
 }