layout enhancements

src/app/app.component.html

@@ -17,6 +17,7 @@
 
 <ng-template #toolbarItems>
   @for (item of [
+      {id:'menu',icon:'menu',title:'menu',key:'menu'},
       {id:'home',icon:'home',link:'/',title:'Home',key:'home_page'},
       {id:'notifs',icon:'notifications',title:'Notifications',key:'notifs',menu:notifications},
       {id:'chat'},
@@ -29,6 +30,12 @@
             <mat-label>{{(item.key|tr:item.title)}}</mat-label>
           </div>
         }
+        @case (item.id === 'menu') {
+          <div id="{{item.id}}" class="toolbar-item" (click)="sidenav.toggle()">
+            <mat-icon>{{item.icon}}</mat-icon>
+            <mat-label>{{(item.key|tr:item.title)}}</mat-label>
+          </div>
+        }
         @case (item.id === 'user') {
           <div id="{{item.id}}" class="toolbar-item" [matMenuTriggerFor]="item.menu">
             @if (loginService?.user?.pictures?.length > 0) {
@@ -75,7 +82,7 @@
 <div [ngClass]="theme" class="container">
   <div class="main">
     <mat-sidenav-container>
-      <mat-sidenav opened mode="side" class="sidenav">
+      <mat-sidenav #sidenav [opened]="loginService?.user" [mode]="cs.isMobileClient? 'over': 'side'" class="sidenav">
         <div class="logo-container">
           <img
             id="logo"
@@ -93,18 +100,20 @@
           {path:'/settings',icon:'settings',title:{key:'settings',default:'Settings'}}
         ]}"/>
       </mat-sidenav>
-      <mat-sidenav-content>
-        <mat-toolbar class="toolbar">
-          <div class="toolbar-container">
-            <!--<button mat-icon-button aria-label="menu">
-              <mat-icon>menu</mat-icon>
-            </button>-->
-            <h2 id="title">{{pbTitle.getTitle()}}</h2>
-            <div class="right-toolbar-panel">
-              <ng-container *ngTemplateOutlet="toolbarItems"/>
+      <mat-sidenav-content class="sidenav-content">
+        @if (loginService?.user) {
+          <mat-toolbar class="toolbar">
+            <div class="toolbar-container">
+              <!--<button mat-icon-button aria-label="menu">
+                <mat-icon>menu</mat-icon>
+              </button>-->
+              <h2 id="title">{{pbTitle.getTitle()}}</h2>
+              <div class="right-toolbar-panel">
+                <ng-container *ngTemplateOutlet="toolbarItems"/>
+              </div>
             </div>
-          </div>
-        </mat-toolbar>
+          </mat-toolbar>
+        }
         <router-outlet></router-outlet>
       </mat-sidenav-content>
     </mat-sidenav-container>
@@ -121,7 +130,8 @@
   <mat-label class="route-menu-category">{{category.key?(category.key|tr:category.default):category}}</mat-label>
   <div class="route-menu">
     @for (item of items; track item) {
-      <button mat-button [routerLink]="[item.path]" 
+      <button mat-button [routerLink]="[item.path]"
+        (click)="cs.isMobileClient? sidenav.close():undefined"
         [queryParams]="item.queryParams"
         matBadge="{{item.badge}}" replaceUrl="{{item.path==='/'?'true':'false'}}"
         [ngClass]="{'active':router.isActive(item.path,true)}"

src/app/app.component.scss

@@ -6,7 +6,6 @@
 
 .sidenav {
     width: 250px;
-    background: none;
 }
 
 .logo-container {
@@ -33,11 +32,11 @@
 .container > .left {
     flex-grow: 1;
 }
-
+$footer-height: 30px;
 .container > .main {
     flex-grow: 4;
     margin: 5px;
-    height: calc(100vh - 35px);
+    height: calc(100vh - $footer-height);
     max-width: 1920px;
     overflow-y: auto;
 }
@@ -46,6 +45,10 @@
     min-height: 100%;
 }
 
+.container .main .sidenav-content {
+    height: calc(100vh - $footer-height);
+}
+
 .container > .right {
     flex-grow: 1;
 }

src/app/dashboard/dashboard.component.html

@@ -1,78 +1,83 @@
 <main class="main" [ngClass]="cs.theme">
-  <div class="content">
-    <div class="left"></div>
-    <!--<div class="divider" role="separator" aria-label="Divider"></div>-->
-    <div class="center">
-      @if (!loginService.user?.token?.ucp) {
-      <div class="header">
-        <img
-          id="site-logo"
-          src="https://cdn.swopt.com/fis/image/fis-logo.webp"
-          alt="FIS"
-        />
-        <!--<h1>{{'welcome'|tr:'Welcome'}}</h1>-->
-      </div>
-      <div class="login">
-        <inputx
-          [field]="goto.field"
-          [value]="goto.value"
-          (onChange)="goto.onChange($event)"
-        ></inputx>
-        <login />
-      </div>
-      } @else {
-      <div class="segment">
-        <h3>{{ "eleave" | tr : "eLeave" }}</h3>
-        <mat-divider></mat-divider>
-        <div class="dashitems">
-          <leave-submission-dashitem></leave-submission-dashitem>
-          @if ($safeNavigationMigration(accessRight.leave?.approval)|async) {
-          <leave-approval-dashitem></leave-approval-dashitem>
-          }
-          <leave-info-dashitem></leave-info-dashitem>
+  @if (loginService.user) {
+    <div class="content">
+      <div class="left"></div>
+      <!--<div class="divider" role="separator" aria-label="Divider"></div>-->
+      <div class="center">
+        <div class="segment">
+          <h3>{{ "eleave" | tr : "eLeave" }}</h3>
+          <mat-divider></mat-divider>
+          <div class="dashitems">
+            <leave-submission-dashitem></leave-submission-dashitem>
+            @if ($safeNavigationMigration(accessRight.leave?.approval)|async) {
+            <leave-approval-dashitem></leave-approval-dashitem>
+            }
+            <leave-info-dashitem></leave-info-dashitem>
+          </div>
         </div>
-      </div>
-      <div class="segment">
-        <h3>{{ "spts" | tr : "SPTS" }}</h3>
-        <mat-divider></mat-divider>
-        <div class="dashitems">
-          <sales-tender-submission-dashitem></sales-tender-submission-dashitem>
+        <div class="segment">
+          <h3>{{ "spts" | tr : "SPTS" }}</h3>
+          <mat-divider></mat-divider>
+          <div class="dashitems">
+            <sales-tender-submission-dashitem></sales-tender-submission-dashitem>
+          </div>
+        </div>
+        <div class="social-links">
+          <a aria-label="Twitter" target="_blank" rel="noopener">
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              alt="Twitter"
+            >
+              <path
+                d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
+              />
+            </svg>
+          </a>
+          <a aria-label="Youtube" target="_blank" rel="noopener">
+            <svg
+              width="29"
+              height="20"
+              viewBox="0 0 29 20"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              alt="Youtube"
+            >
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M27.4896 1.52422C27.9301 1.96749 28.2463 2.51866 28.4068 3.12258C29.0004 5.35161 29.0004 10 29.0004 10C29.0004 10 29.0004 14.6484 28.4068 16.8774C28.2463 17.4813 27.9301 18.0325 27.4896 18.4758C27.0492 18.9191 26.5 19.2389 25.8972 19.4032C23.6778 20 14.8068 20 14.8068 20C14.8068 20 5.93586 20 3.71651 19.4032C3.11363 19.2389 2.56449 18.9191 2.12405 18.4758C1.68361 18.0325 1.36732 17.4813 1.20683 16.8774C0.613281 14.6484 0.613281 10 0.613281 10C0.613281 10 0.613281 5.35161 1.20683 3.12258C1.36732 2.51866 1.68361 1.96749 2.12405 1.52422C2.56449 1.08095 3.11363 0.76113 3.71651 0.596774C5.93586 0 14.8068 0 14.8068 0C14.8068 0 23.6778 0 25.8972 0.596774C26.5 0.76113 27.0492 1.08095 27.4896 1.52422ZM19.3229 10L11.9036 5.77905V14.221L19.3229 10Z"
+              />
+            </svg>
+          </a>
         </div>
       </div>
-      }
-      <div class="social-links">
-        <a aria-label="Twitter" target="_blank" rel="noopener">
-          <svg
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            alt="Twitter"
-          >
-            <path
-              d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
-            />
-          </svg>
-        </a>
-        <a aria-label="Youtube" target="_blank" rel="noopener">
-          <svg
-            width="29"
-            height="20"
-            viewBox="0 0 29 20"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            alt="Youtube"
-          >
-            <path
-              fill-rule="evenodd"
-              clip-rule="evenodd"
-              d="M27.4896 1.52422C27.9301 1.96749 28.2463 2.51866 28.4068 3.12258C29.0004 5.35161 29.0004 10 29.0004 10C29.0004 10 29.0004 14.6484 28.4068 16.8774C28.2463 17.4813 27.9301 18.0325 27.4896 18.4758C27.0492 18.9191 26.5 19.2389 25.8972 19.4032C23.6778 20 14.8068 20 14.8068 20C14.8068 20 5.93586 20 3.71651 19.4032C3.11363 19.2389 2.56449 18.9191 2.12405 18.4758C1.68361 18.0325 1.36732 17.4813 1.20683 16.8774C0.613281 14.6484 0.613281 10 0.613281 10C0.613281 10 0.613281 5.35161 1.20683 3.12258C1.36732 2.51866 1.68361 1.96749 2.12405 1.52422C2.56449 1.08095 3.11363 0.76113 3.71651 0.596774C5.93586 0 14.8068 0 14.8068 0C14.8068 0 23.6778 0 25.8972 0.596774C26.5 0.76113 27.0492 1.08095 27.4896 1.52422ZM19.3229 10L11.9036 5.77905V14.221L19.3229 10Z"
-            />
-          </svg>
-        </a>
+      <div class="right"></div>
+  </div>
+  } @else {
+    <div class="content">
+      <div class="center">
+        <div class="header">
+          <img
+            id="site-logo"
+            src="https://cdn.swopt.com/fis/image/fis-logo.webp"
+            alt="FIS"
+          />
+          <!--<h1>{{'welcome'|tr:'Welcome'}}</h1>-->
+        </div>
+        <div class="login">
+          <inputx
+            [field]="goto.field"
+            [value]="goto.value"
+            (onChange)="goto.onChange($event)"
+          ></inputx>
+          <login />
+        </div>
       </div>
     </div>
-    <div class="right"></div>
-  </div>
+  }
+  
 </main>

src/app/dashboard/dashboard.component.scss

@@ -89,6 +89,7 @@ main {
 
 .content .center {
   flex-grow: 1;
+  height: 100%;
 }
 
 .content .center .login {