feat(appshell): sticky scrolling for headers

Teradata · Feb 22, 2024 · a0fcd86 · a0fcd86
1 parent fdac3c3
commit a0fcd86
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 4 deletions.
diff --git a/libs/components/index.html b/libs/components/index.html
@@ -137,7 +137,7 @@
       </cv-toolbar>
 
       <div slot="help" class="mdc-typography">
-        <cv-toolbar>
+        <cv-toolbar sticky>
           <span slot="title">Help</span>
           <cv-icon-button slot="actionItems" icon="undock"></cv-icon-button>
           <cv-icon-button

diff --git a/libs/components/src/app-shell/app-shell.scss b/libs/components/src/app-shell/app-shell.scss
@@ -130,6 +130,13 @@
   }
 }
 
+[name='user-menu'] {
+  position: sticky;
+  top: 0;
+  display: block;
+  z-index: 1;
+}
+
 [name='mini-list'] {
   display: none;
   width: 320px;
@@ -159,6 +166,7 @@ nav.navigation {
   overflow-y: auto;
   border-right: 0;
   position: fixed;
+  background-color: var(--mdc-theme-surface);
 
   .toggle-drawer {
     margin: 8px auto;
@@ -167,6 +175,10 @@ nav.navigation {
   .navigation-toolbar {
     display: flex;
     align-items: center;
+    position: sticky;
+    top: 0;
+    background-color: var(--mdc-theme-surface);
+    z-index: 2;
   }
 
   slot[name='logo'] {

diff --git a/libs/components/src/app-shell/app-shell.stories.js b/libs/components/src/app-shell/app-shell.stories.js
@@ -157,7 +157,7 @@ const Template = ({
         </cv-nav-list-item>
       </cv-list>
 
-      <cv-toolbar slot="user-menu" >
+      <cv-toolbar slot="user-menu" sticky>
        <span slot="title" style="display:flex; align-items: center">
         <cv-typography scale="body1">All environments</cv-typography>
         <cv-icon>arrow_drop_down</cv-icon>
@@ -170,7 +170,7 @@ const Template = ({
       </cv-toolbar>
 
       <div slot="help" class="mdc-typography">
-        <cv-toolbar>
+        <cv-toolbar sticky>
           <span slot="title">Help</span>
           <cv-icon-button
             slot="actionItems"

diff --git a/libs/components/src/toolbar/toolbar.scss b/libs/components/src/toolbar/toolbar.scss
@@ -4,6 +4,11 @@
   display: block;
 }
 
+:host([sticky]) {
+  position: sticky;
+  top: 0;
+}
+
 .mdc-top-app-bar__title {
   padding-left: 0;
 }

diff --git a/libs/components/src/toolbar/toolbar.ts b/libs/components/src/toolbar/toolbar.ts
@@ -1,5 +1,5 @@
 import { css, unsafeCSS } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 import { TopAppBarBase } from '@material/mwc-top-app-bar/mwc-top-app-bar-base';
 import styles from './toolbar.scss?inline';
 
@@ -16,6 +16,12 @@ export class CovalentToolbar extends TopAppBarBase {
       ${unsafeCSS(styles)}
     `,
   ];
+
+  /**
+   * position sticky when scrolled
+   */
+  @property({ type: Boolean, reflect: true })
+  sticky = false;
 }
 
 export default CovalentToolbar;