Sidenav updates

hubmapconsortium · Oct 22, 2024 · 57f41c1 · 57f41c1
1 parent 72cf67a
commit 57f41c1
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 54 deletions.
diff --git a/libs/design-system/nav-header/src/lib/nav-header.component.html b/libs/design-system/nav-header/src/lib/nav-header.component.html
@@ -1,24 +1,25 @@
 <mat-sidenav-container class="container">
-  <mat-sidenav #sidenav mode="over" class="apps-sidenav headline-small" [position]="'end'" [fixedInViewport]="false">
+  <mat-sidenav #sidenav mode="over" class="apps-sidenav" position="end" [fixedInViewport]="false">
+    <div class="header">
+      <span class="sidenav-title"> HuBMAP Tools & Applications </span>
+      <div style="flex-grow: 1"></div>
+      <button mat-icon-button hraIconButtonSize="large" disableRipple (click)="sidenav.toggle()">
+        <mat-icon>close</mat-icon>
+      </button>
+    </div>
     <ng-scrollbar>
-      <div class="header">
-        <span class="sidenav-title"> HuBMAP Tools & Applications </span>
-        <div style="flex-grow: 1"></div>
-        <button mat-icon-button hraIconButtonSize="large" disableRipple (click)="sidenav.toggle()">
-          <mat-icon>close</mat-icon>
-        </button>
-      </div>
-
       @for (item of data; track item) {
-        <div class="card-category">{{ item.category }}</div>
-        @for (card of item.cards; track card) {
-          <hra-apps-card
-            [icon]="card.icon"
-            [title]="card.name"
-            [description]="card.description"
-            [link]="card.link"
-          ></hra-apps-card>
-        }
+        <div class="category">
+          <div class="card-category">{{ item.category }}</div>
+          @for (card of item.cards; track card) {
+            <hra-apps-card
+              [icon]="card.icon"
+              [title]="card.name"
+              [description]="card.description"
+              [link]="card.link"
+            ></hra-apps-card>
+          }
+        </div>
       }
     </ng-scrollbar>
   </mat-sidenav>

diff --git a/libs/design-system/nav-header/src/lib/nav-header.component.scss b/libs/design-system/nav-header/src/lib/nav-header.component.scss
@@ -1,5 +1,6 @@
 :host {
   display: block;
+  color: var(--sys-secondary);
   width: 100%;
   z-index: 2;
   --mat-sidenav-content-background-color: transparent;
@@ -12,19 +13,28 @@
     height: 100%;
     font: var(--sys-headline-small);
     letter-spacing: var(--sys-headline-small-tracking);
+  }
 
-    .header {
-      display: flex;
-      align-items: center;
+  .header {
+    display: flex;
+    align-items: center;
+    font: var(--sys-title-small);
+    height: 4.5rem;
+    padding-right: 0.5rem;
+    padding-left: 1rem;
 
-      .sidenav-title {
-        vertical-align: text-bottom;
-        color: var(--sys-secondary);
-      }
+    .sidenav-title {
+      vertical-align: text-bottom;
+      color: var(--sys-secondary);
     }
   }
 
-  .mat-sidenav-content {
+  ng-scrollbar {
+    --scrollbar-offset: 4;
+    height: calc(100% - 4.5rem);
+  }
+
+  mat-sidenav-content {
     overflow: hidden;
 
     .main {
@@ -44,16 +54,33 @@
 
   .apps-sidenav {
     --mat-sidenav-container-width: 35.25rem;
-    padding: 1rem;
     border-radius: 0;
-    background-color: var(--sys-surface-dim);
+    background-color: var(--sys-surface-container-high);
     pointer-events: all;
 
+    .category {
+      padding-top: 1rem;
+      padding-bottom: 1rem;
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      border-top: 1px solid var(--sys-outline);
+    }
+
     .card-category {
-      font: var(--sys-title-medium);
-      letter-spacing: var(--sys-title-medium-tracking);
-      margin-top: 1rem;
-      color: var(--sys-secondary);
+      font: var(--sys-title-small);
+      letter-spacing: var(--sys-title-small-tracking);
+      color: var(--sys-primary-fixed);
+    }
+
+    .card-category,
+    hra-apps-card {
+      padding-left: 1rem;
+      padding-right: 1rem;
     }
   }
+
+  ::ng-deep .mat-drawer-inner-container {
+    overflow: hidden;
+  }
 }
diff --git a/libs/design-system/nav-header/src/lib/nav-header.component.stories.ts b/libs/design-system/nav-header/src/lib/nav-header.component.stories.ts
@@ -70,8 +70,7 @@ const meta: Meta = {
     props: args,
     styles: [
       `hra-nav-header {
-        height: calc(100vh - 2rem);
-        width: calc(100% - 1rem);
+        position: relative;
       }`,
     ],
   }),

diff --git a/libs/design-system/src/lib/apps-sidenav-demo/apps-sidenav-demo.component.html b/libs/design-system/src/lib/apps-sidenav-demo/apps-sidenav-demo.component.html
@@ -1,13 +1,13 @@
 <mat-sidenav-container class="container">
-  <mat-sidenav #sidenav mode="over" class="apps-sidenav headline-small" [position]="'end'" [fixedInViewport]="false">
+  <mat-sidenav #sidenav mode="over" class="apps-sidenav" position="end" [fixedInViewport]="false">
+    <div class="header">
+      <span class="sidenav-title"> HuBMAP Tools & Applications </span>
+      <div style="flex-grow: 1"></div>
+      <button mat-icon-button hraIconButtonSize="large" disableRipple (click)="sidenav.toggle()">
+        <mat-icon>close</mat-icon>
+      </button>
+    </div>
     <ng-scrollbar>
-      <div class="header">
-        <span class="sidenav-title"> HuBMAP Tools & Applications </span>
-        <div style="flex-grow: 1"></div>
-        <button mat-icon-button hraIconButtonSize="large" disableRipple (click)="sidenav.toggle()">
-          <mat-icon>close</mat-icon>
-        </button>
-      </div>
       @for (item of data; track item) {
         <div class="category">
           <div class="card-category">{{ item.category }}</div>

diff --git a/libs/design-system/src/lib/apps-sidenav-demo/apps-sidenav-demo.component.scss b/libs/design-system/src/lib/apps-sidenav-demo/apps-sidenav-demo.component.scss
@@ -1,23 +1,33 @@
 :host {
   display: block;
+  color: var(--sys-secondary);
+
+  .container {
+    height: calc(100vh - 3rem);
+    font: var(--sys-headline-small);
+    letter-spacing: var(--sys-headline-small-tracking);
+  }
 
   .header {
     display: flex;
     align-items: center;
+    font: var(--sys-title-small);
+    height: 4.5rem;
+    padding-right: 0.5rem;
+    padding-left: 1rem;
 
     .sidenav-title {
       vertical-align: text-bottom;
       color: var(--sys-secondary);
     }
   }
 
-  .container {
-    height: calc(100vh - 3rem);
-    font: var(--sys-headline-small);
-    letter-spacing: var(--sys-headline-small-tracking);
+  ng-scrollbar {
+    --scrollbar-offset: 4;
+    height: calc(100% - 4.5rem);
   }
 
-  .mat-sidenav-content {
+  mat-sidenav-content {
     overflow: hidden;
 
     .main {
@@ -37,20 +47,29 @@
 
   .apps-sidenav {
     --mat-sidenav-container-width: 35.25rem;
-    padding: 1rem;
     border-radius: 0;
-    background-color: var(--sys-surface-dim);
+    background-color: var(--sys-surface-container-high);
     pointer-events: all;
 
     .category {
-      border-bottom: 1px solid var(--sys-outline);
+      padding-top: 1rem;
+      padding-bottom: 1rem;
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      border-top: 1px solid var(--sys-outline);
     }
 
     .card-category {
-      font: var(--sys-title-medium);
-      letter-spacing: var(--sys-title-medium-tracking);
-      margin-top: 1rem;
-      color: var(--sys-secondary);
+      font: var(--sys-title-small);
+      letter-spacing: var(--sys-title-small-tracking);
+      color: var(--sys-primary-fixed);
+    }
+
+    .card-category,
+    hra-apps-card {
+      padding-left: 1rem;
+      padding-right: 1rem;
     }
   }