added master menu

src/app/app.component.html

@@ -17,9 +17,45 @@
   <button mat-icon-button [routerLink]="'/'">
     <mat-icon>home</mat-icon>
   </button>
-  {{title}}
+  <h2><i>{{title}}</i></h2>
+  <div class="right-toolbar-panel">
+    <ng-container *ngTemplateOutlet="toolbarItems"/>
+  </div>
 </mat-toolbar>
 
+<mat-toolbar class="mobile-toolbar">
+  <ng-container *ngTemplateOutlet="toolbarItems"/>
+</mat-toolbar>
+
+<ng-template #toolbarItems>
+  @for (item of [
+      {icon:'home',link:'/',title:'Home',titleKey:'home'},
+      {icon:'notifications',link:'/',title:'Notifications',titleKey:'notifications'},
+      {icon:'account_circle',menu:userMenu,title:'User',titleKey:'user'}
+    ]; track $index) {
+      @switch (true) {
+        @case (item.link !== undefined) {
+          <div id="{{item.titleKey}}" class="toolbar-item" [routerLink]="item.link">
+            <mat-icon>{{item.icon}}</mat-icon>
+            <mat-label>{{(item.titleKey|tr:item.title)}}</mat-label>
+          </div>
+        }
+        @case (item.menu !== undefined) {
+          <div id="{{item.titleKey}}" class="toolbar-item" [matMenuTriggerFor]="item.menu">
+            <mat-icon>{{item.icon}}</mat-icon>
+            <mat-label>{{(item.titleKey|tr:item.title)}}</mat-label>
+          </div>
+        }
+        @default {
+          <div id="{{item.titleKey}}" class="toolbar-item">
+            <mat-icon>{{item.icon}}</mat-icon>
+            <mat-label>{{(item.titleKey|tr:item.title)}}</mat-label>
+          </div>
+        }
+      }
+    }
+</ng-template>
+
 <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
 <!-- * * * * * * * * * * * The content above * * * * * * * * * * * * -->
 <!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * * -->
@@ -27,7 +63,15 @@
 <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
 <!-- * * * * * * * * * * End of Placeholder  * * * * * * * * * * * * -->
 <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-
-<div class="content">
-  <router-outlet></router-outlet>
+<div class="container">
+  <div class="main">
+    <router-outlet></router-outlet>
+  </div>
 </div>
+
+<!--menus-->
+<mat-menu #userMenu="matMenu">
+  <button mat-menu-item (click)="loginService.logout()" [disabled]="!loginService.user">
+    <mat-icon>logout</mat-icon>
+    {{'logout'|tr:'Logout'}}</button>
+</mat-menu>

src/app/app.component.scss

@@ -1,3 +1,81 @@
-.content {
+
+:host {
+    --bright-blue: oklch(51.01% 0.274 263.83);
+    --pill-accent: var(--bright-blue);
+}
+
+.container {
+    display: flex;
+    flex-flow: row;
+}
+.container > .left {
+    flex-grow: 1;
+}
+
+.container > .main {
+    flex-grow: 4;
     margin: 1rem;
+    height: calc(100vh - 75px);
+}
+
+.container > .right {
+    flex-grow: 1;
+}
+
+
+.toolbar-item {
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    flex: 1;
+    max-height: 100% !important;
+    transition: background 0.3s ease;
+    border-radius: 10px;
+    .mat-icon {
+        flex-grow: 2;
+    }
+    mat-label {
+        line-height: 9pt;
+        font-size: 8pt;
+    }
+}
+
+.toolbar-item:hover {
+    background: color-mix(in srgb, var(--pill-accent) 15%, transparent);
+}
+
+.toolbar, .mobile-toolbar {
+    height: 40px;
+}
+
+.mobile-toolbar {
+    display: none;
+    position: fixed;
+    bottom: 0;
+}
+
+.right-toolbar-panel {
+    display: flex;
+    flex-direction: row;
+    position: absolute;
+    right: 10px;
+    .toolbar-item {
+        padding-left: 0.5rem;
+        padding-right: 0.5rem;
+        mat-label {display: none;}
+    }
+    #home {display: none;}
+    #clock_in {display: none;}
+    #clock_out {display: none;}
+}
+
+/** Mobile styles */
+@media screen and (pointer: none), (pointer: coarse) {
+    .toolbar {display: none;}
+    .container > .left {display: none;}
+    .container > .right {display: none;}
+    
+    .mobile-toolbar {
+        display: flex;
+    }
 }

src/app/app.component.ts

@@ -7,11 +7,13 @@ import { BaseComponent, untilDestroy } from 'angularlib/base.component';
 import { Subject, filter, map, repeat, takeUntil, timer } from 'rxjs';
 import { Title } from '@angular/platform-browser';
 import { LoginService } from 'angularlib/login/login.service';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-root',
   standalone: true,
   imports: [
+    CommonModule,
     RouterOutlet, 
     MatModule, 
     RouterModule,
@@ -23,7 +25,7 @@ import { LoginService } from 'angularlib/login/login.service';
   ]
 })
 export class AppComponent extends BaseComponent implements OnInit {
-  title = 'SwOPT Angular';
+  title = 'FIS App';
 
   /**login timeout duration in milliseconds
      * @default 5 minutes

src/app/app.routes.ts

@@ -3,7 +3,7 @@ import { DashboardComponent } from './dashboard/dashboard.component';
 
 export const routes: Routes = [
     { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
-    {path:'dashboard', component: DashboardComponent, data: {title: 'SwOPT Angular'}},
+    {path:'dashboard', component: DashboardComponent, data: {title: 'FIS App'}},
     {
         path: 'quotation',
         loadChildren: () => import('./quotation/quotation.module').then(m => m.QuotationModule)

src/app/dashboard/dashboard.component.scss

@@ -70,10 +70,19 @@
     display: flex;
     justify-content: space-around;
     width: 100%;
-    max-width: 700px;
     margin-bottom: 3rem;
   }
 
+  .content > [class$='-side'] {
+    flex-grow: 1;
+  }
+
+  .content > .left-side {
+    display: flex;
+    flex-direction: column;
+    align-items: end;
+  }
+
   .content h1 {
     margin-top: 1.75rem;
   }

src/app/dashboard/dashboard.component.ts

@@ -4,13 +4,15 @@ import { BaseComponent, untilDestroy } from 'angularlib/base.component';
 import { LoginModule } from 'angularlib/login';
 import { Store } from '@ngxs/store';
 import { LoginService } from 'angularlib/login/login.service';
+import { MasterMenuComponent } from 'angularlib/menu/master.menu/master.menu.component';
 
 @Component({
   selector: 'app-dashboard',
   standalone: true,
   imports: [
     RouterModule,
-    LoginModule
+    LoginModule,
+    MasterMenuComponent
   ],
   templateUrl: './dashboard.component.html',
   styleUrl: './dashboard.component.scss'

src/app/quotation/quotation.module.ts

@@ -12,7 +12,7 @@ import { CommonModule } from '@angular/common';
 import { LabelModule } from 'angularlib/labels/label.module';
 
 const routes: Routes = [
-  { path: 'sales', component: QuotationComponent, canActivate: [AuthGuard], data: {serviceId: ServiceID.Submission, type: 'sales'} },
+  { path: 'sales', component: QuotationComponent, canActivate: [AuthGuard], data: {title: 'Sales Quotation',serviceId: ServiceID.Submission, type: 'sales'} },
 ]
 
 @NgModule({

src/dependencies/angularlib

@@ -1 +1 @@
-Subproject commit e8eb0e0e61f64980054e8f038de82f5212bcfb95
+Subproject commit f69f78e0383fa33ae08087ca93a4d1d0a6619905