feat(design): use position fixed on sidebar nav

graycoreio · Aug 6, 2023 · 1839a85 · 1839a85
1 parent 42ca952
commit 1839a85
Show file tree

Hide file tree

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

diff --git a/libs/design/src/molecules/sidebar/sidebar-viewport/sidebar-viewport.component.scss b/libs/design/src/molecules/sidebar/sidebar-viewport/sidebar-viewport.component.scss
@@ -18,7 +18,6 @@
 	&__content {
 		flex: 0 1 auto;
 		width: 100%;
-		will-change: transform;
 		z-index: variables.$daff-sidebar-content-z-index;
 		overflow-y: auto;
 		height: 100%;
@@ -28,6 +27,23 @@
 		flex-shrink: 0;
 	}
 
+	&__nav {
+		position: fixed;
+		top: 0;
+		width: 100%;
+		z-index: variables.$daff-sidebar-content-z-index;
+
+		&:empty {
+			display: none;
+		}
+
+		&:not(:empty) {
+			+ #{$root}__inner {
+				margin-top: var(--daff-sidebar-side-fixed-top-shift);
+			}
+		}
+	}
+
 	&__backdrop {
 		height: 100%;
 		position: absolute;