Updates to sidenav demo

hubmapconsortium · Oct 19, 2024 · 72cf67a · 72cf67a
1 parent 006207f
commit 72cf67a
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 26 deletions.
diff --git a/libs/design-system/software-status-indicator/src/lib/software-status-indicator.component.ts b/libs/design-system/software-status-indicator/src/lib/software-status-indicator.component.ts
@@ -6,6 +6,7 @@ import { SoftwareStatusSizeDirective } from './software-status-indicator-size.di
 /** Software status options */
 export type SoftwareStatus = 'Preview' | 'Alpha' | 'Beta';
 
+/** Software status size options */
 export type SoftwareStatusSize = 'small' | 'medium' | 'large';
 
 /**
@@ -23,6 +24,7 @@ export class SoftwareStatusIndicatorComponent {
   /** Current status of app */
   readonly status = input.required<SoftwareStatus>();
 
+  /** Size of indicator */
   readonly size = input<SoftwareStatusSize>('medium');
 
   /** Tooltips corresponding to software status */

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
@@ -8,17 +8,18 @@
           <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/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,40 +1,50 @@
 :host {
   display: block;
 
+  .header {
+    display: flex;
+    align-items: center;
+
+    .sidenav-title {
+      vertical-align: text-bottom;
+      color: var(--sys-secondary);
+    }
+  }
+
   .container {
-    width: 40rem;
-    height: auto;
+    height: calc(100vh - 3rem);
     font: var(--sys-headline-small);
     letter-spacing: var(--sys-headline-small-tracking);
-    --mat-sidenav-content-background-color: #ffffff;
-    --mat-sidenav-container-background-color: var(--mat-sidenav-content-background-color);
-    height: calc(100vh - 3rem);
-
-    .header {
-      display: flex;
-      align-items: center;
-
-      .sidenav-title {
-        vertical-align: text-bottom;
-        color: var(--sys-secondary);
-      }
-    }
   }
 
   .mat-sidenav-content {
     overflow: hidden;
-    margin: 1rem;
 
     .main {
       display: flex;
       align-items: center;
+      background-color: var(--sys-surface-container-high);
+      height: 4.5rem;
+      padding: 0 0.5rem 0 0.75rem;
+      pointer-events: all;
+      border-bottom: 1px solid #acb5c3;
     }
   }
 
+  .mat-drawer-container-has-open {
+    pointer-events: all;
+  }
+
   .apps-sidenav {
     --mat-sidenav-container-width: 35.25rem;
     padding: 1rem;
     border-radius: 0;
+    background-color: var(--sys-surface-dim);
+    pointer-events: all;
+
+    .category {
+      border-bottom: 1px solid var(--sys-outline);
+    }
 
     .card-category {
       font: var(--sys-title-medium);
@@ -43,4 +53,8 @@
       color: var(--sys-secondary);
     }
   }
+
+  ::ng-deep .mat-drawer-inner-container {
+    overflow: hidden;
+  }
 }