WSS nav bar style changes (#658)

* WSS nav bar style changes

* changes to show footer only at end

* fix: update WSS nav bar icons and improve layout styles

* fix: refactor content-wrapper to use ng-container for improved structure

---------

Co-authored-by: tumms2021389 <[email protected]>
Co-authored-by: Siva Rama Krishna <[email protected]>

Author: samhere06

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

@@ -1,46 +1,35 @@
 <mat-sidenav-container class="sidenav-container" autosize>
   <mat-sidenav #drawer class="sidenav" mode="side" opened="true" [style.width]="collapsed ? '5rem' : '15rem'">
-    <!-- Add [class.collapsed-mode]="collapsed" here -->
     <mat-nav-list [class.collapsed-mode]="collapsed">
       <!-- Toggle Button -->
-      <div class="nav-item-container toggle-header" (click)="toggleMenu()">
+      <div class="nav-menu-container toggle-header" (click)="toggleMenu()">
         <button type="button" mat-icon-button [disableRipple]="true">
-          <mat-icon>{{ collapsed ? 'menu' : 'cancel' }}</mat-icon>
+          <mat-icon>{{ collapsed ? 'menu' : 'close' }}</mat-icon>
         </button>
       </div>
 
       <!-- Home Button -->
-      <!-- <div mat-list-item> -->
       <!-- Added 'nav-item-container' class for specific styling -->
-      <div
-        class="flex-box nav-item-container toggle-header"
-        (click)="navPanelButtonClick(homePage)"
-        [class.selected]="activePage === 'Self-service Main page'"
-      >
+      <div class="flex-box nav-item-container" (click)="navPanelButtonClick(homePage)" [class.selected]="activePage === 'Self-service Main page'">
         <button type="button" mat-icon-button [disableRipple]="true">
           <mat-icon>home</mat-icon>
         </button>
         <!-- Only show text if you want it in collapsed mode too, otherwise hide or style it -->
         <div mat-button class="psdk-nav-button-span">Home</div>
       </div>
-      <!-- </div> -->
 
       <!-- Dynamic Pages -->
-      <div *ngFor="let page of navPages$">
-        <div
-          class="flex-box mat-list-item nav-item-container toggle-header"
-          (click)="navPanelButtonClick(page)"
-          [class.selected]="activePage === page.pyLabel"
-        >
+      <ng-container *ngFor="let page of navPages$">
+        <div class="flex-box mat-list-item nav-item-container" (click)="navPanelButtonClick(page)" [class.selected]="activePage === page.pyLabel">
           <button type="button" mat-icon-button [disableRipple]="true">
             <mat-icon>dashboard</mat-icon>
           </button>
           <div mat-button class="psdk-nav-button-span">{{ page.pyDefaultHeading }}</div>
         </div>
-      </div>
+      </ng-container>
     </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">
@@ -74,11 +63,11 @@
       </mat-toolbar-row>
     </mat-toolbar>
 
-    <div *ngFor="let kid of arChildren$">
-      <div *ngIf="kid.getPConnect().getComponentName() == 'ViewContainer'">
+    <ng-container *ngFor="let kid of arChildren$">
+      <div *ngIf="kid.getPConnect().getComponentName() == 'ViewContainer'" class="content-wrapper">
         <component-mapper name="ViewContainer" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
       </div>
-    </div>
+    </ng-container>
     <app-footer></app-footer>
   </mat-sidenav-content>
 </mat-sidenav-container>

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

@@ -11,31 +11,25 @@
 
 /* Ensure icons stay centered or aligned nicely when collapsed */
 mat-nav-list {
-  padding-top: 0;
-}
-
-.menu-item-text {
-  margin-left: 10px;
-  white-space: nowrap; /* Prevents text wrapping during animation */
-}
+  padding-block: 2rem;
+  padding-inline: 0.75rem;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
 
-.content-padding {
-  padding: 20px;
+  &.collapsed-mode {
+    padding-inline: 3.5px;
+    align-items: center;
+  }
 }
 
 .horizontal-list {
   display: flex;
-  flex-direction: row; /* This turns the list sideways */
   padding: 0;
-  overflow-x: auto; /* Adds a scrollbar if items overflow */
-  /* Control the exact distance between items here */
+  overflow-x: auto;
   gap: 8px;
-
-  /* VITAL: Add a little vertical padding so the scaling doesn't hit the top/bottom edge */
-  //padding: 10px 0;
-
-  /* Ensure the list itself doesn't hide the vertical overflow of the icons */
-  //overflow-y: visible;
 }
 
 /* Optional: Adjust item spacing */
@@ -44,18 +38,8 @@ mat-nav-list {
 
   /* vital: overrides Angular Material's default item padding */
   padding: 0 !important;
-
-  //overflow: visible !important; /* Allow the icon to expand outside this box */
-  //position: relative; /* Required for z-index to work */
 }
 
-/* Targeted fix for the internal container (common in many Angular Material versions) */
-// .horizontal-list mat-list-item ::ng-deep .mat-list-item-content {
-//   justify-content: center !important; /* Horizontally center */
-//   align-items: center !important; /* Vertically center */
-//   display: flex !important;
-// }
-
 /* 1. Make the animation smooth */
 .horizontal-list mat-list-item .circle-icon {
   transition: transform 0.2s ease-in-out;
@@ -68,11 +52,6 @@ mat-nav-list {
   cursor: pointer; /* Changes cursor to pointer to indicate interactivity */
 }
 
-// .horizontal-list mat-list-item:hover {
-//   /* High z-index ensures the scaled icon floats ON TOP of its neighbors */
-//   z-index: 100;
-// }
-
 .circle-icon {
   /* 1. Make it a circle */
   background: linear-gradient(135deg, rgb(255, 179, 217) 0%, rgb(255, 196, 232) 100%);
@@ -97,49 +76,80 @@ mat-nav-list {
 .nav-item-container {
   display: flex;
   align-items: center;
-  width: 100%;
-  padding: 8px 0;
+  justify-content: flex-start;
   transition: all 0.2s ease-in-out;
   cursor: pointer;
-
-  /*
-     EXPANDED MODE (Default)
-     Icon left, Text right
-  */
-  flex-direction: row;
-  justify-content: flex-start;
-  text-align: left;
+  padding: 8px 8px;
 
   .psdk-nav-button-span {
-    margin-left: 10px; /* Spacing between icon and text */
     opacity: 1;
     display: block;
   }
 
   ::ng-deep .mat-mdc-button-persistent-ripple::before {
     background-color: transparent !important;
   }
+
+  &:hover,
+  &.active,
+  &.focus,
+  &.selected {
+    border-radius: 16px;
+    border-color: #3f51b5; /* Change to your preferred color (e.g., primary) */
+    background-color: rgba(63, 81, 181, 0.1); /* Optional: slight background tint */
+  }
+
+  &.selected {
+    color: #6750a4;
+    mat-icon {
+      color: #6750a4;
+    }
+  }
 }
 
-/*
-   COLLAPSED MODE
-   Icon top, Text bottom, Centered
-*/
+.nav-menu-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 56px;
+  height: 56px;
+  border-radius: 16px;
+  border-color: #3f51b5; /* Change to your preferred color (e.g., primary) */
+  background-color: rgba(63, 81, 181, 0.1);
+
+  button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  ::ng-deep .mat-mdc-button-persistent-ripple::before {
+    background-color: transparent !important;
+  }
+}
+
+.collapsed-mode .nav-menu-container {
+  margin-inline: 0.75rem;
+}
+
+/* COLLAPSED MODE */
 .collapsed-mode .nav-item-container {
   flex-direction: column; /* Stacks items vertically */
   justify-content: center;
   align-items: center;
   text-align: center;
-  // height: 5rem;
+  width: 100%;
+  padding: 8px 0px;
 
   /* Adjust text for small space */
   .psdk-nav-button-span {
     margin-left: 0;
     margin-top: 4px; /* Spacing between icon and text */
-    font-size: 0.85rem; /* Smaller text to fit 5rem width */
+    font-size: 12px; /* Smaller text to fit 5rem width */
     line-height: 1.2;
     white-space: normal; /* Allow wrapping if needed */
     max-width: 100%;
+    padding-left: revert;
   }
 }
 
@@ -151,41 +161,6 @@ mat-nav-list {
   margin-left: 5.313rem !important;
 }
 
-/* Optional: Add spacing below the toggle button if needed */
-.toggle-header {
-  margin-bottom: 10px;
-}
-
-/*
-   ICON BORDER STYLES
-   Apply to the mat-icon-button inside the container
-*/
-// .nav-item-container button[mat-icon-button] {
-//   /* Add transparent border initially to prevent layout shift on hover */
-//   border: 2px solid transparent;
-//   border-radius: 50%; /* Ensure the border is circular */
-//   transition:
-//     border-color 0.2s ease,
-//     background-color 0.2s;
-// }
-
-/* Hover and Active states for the Icon */
-// .nav-item-container:hover button[mat-icon-button],
-// .nav-item-container button[mat-icon-button]:active,
-// .nav-item-container button[mat-icon-button]:focus {
-//   border-color: #3f51b5; /* Change to your preferred color (e.g., primary) */
-//   background-color: rgba(63, 81, 181, 0.1); /* Optional: slight background tint */
-// }
-
-.nav-item-container:hover,
-.nav-item-container:active,
-.nav-item-container:focus,
-.nav-item-container.selected {
-  border-radius: 16px;
-  border-color: #3f51b5; /* Change to your preferred color (e.g., primary) */
-  background-color: rgba(63, 81, 181, 0.1); /* Optional: slight background tint */
-}
-
 .mat-drawer-container,
 .mat-drawer {
   background-color: #fef7ff !important;
@@ -198,3 +173,25 @@ 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;
+
+  .mat-toolbar-multiple-rows {
+    padding-top: 5px;
+  }
+}
+
+/*
+ * This tells the main content area to grow and take up any available
+ * free space, which pushes the footer down.
+ */
+.content-wrapper {
+  flex: 1;
+}