changes to show footer only at end

Author: samhere06

src/app/_samples/mediaco/components/wss-nav-bar/wss-nav-bar.component.html

@@ -37,7 +37,7 @@
       </div>
     </mat-nav-list>
   </mat-sidenav>
-  <mat-sidenav-content [class.collapsed-mode]="collapsed">
+  <mat-sidenav-content [class.collapsed-mode]="collapsed" class="page-container">
     <!-- Top Toolbar -->
 
     <mat-toolbar style="position: sticky; top: 0; z-index: 10">
@@ -71,7 +71,7 @@
       </mat-toolbar-row>
     </mat-toolbar>
 
-    <div *ngFor="let kid of arChildren$">
+    <div class="content-wrapper" *ngFor="let kid of arChildren$">
       <div *ngIf="kid.getPConnect().getComponentName() == 'ViewContainer'">
         <component-mapper name="ViewContainer" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
       </div>

src/app/_samples/mediaco/components/wss-nav-bar/wss-nav-bar.component.scss

@@ -218,3 +218,21 @@ mat-nav-list {
 ::ng-deep .custom-menu-no-padding .mat-mdc-menu-content {
   padding: 0 !important;
 }
+
+/*
+ * Apply flexbox to the mat-sidenav-content to control the layout of its direct children.
+ * We're also ensuring it takes up at least the full height of the viewport.
+ */
+.page-container {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+/*
+ * This tells the main content area to grow and take up any available
+ * free space, which pushes the footer down.
+ */
+.content-wrapper {
+  flex: 1;
+}