UI-Prototype/src/app/app.component.html

<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
<!-- * * * * * * * * * * and can be replaced.  * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * Delete the template below * * * * * * * * * -->
<!-- * * * * * * * to get started with your project! * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->

<style>
  
</style>
<mat-toolbar class="toolbar" color="primary">
  <div class="toolbar-container">
    <button mat-icon-button aria-label="menu">
      <mat-icon>menu</mat-icon>
    </button>
    <button mat-icon-button [routerLink]="'/'">
      <mat-icon>home</mat-icon>
    </button>
    <h2 id="title"><i>{{pbTitle.getTitle()}}</i></h2>
    <div class="right-toolbar-panel">
      <ng-container *ngTemplateOutlet="toolbarItems"/>
    </div>
  </div>
</mat-toolbar>

<mat-toolbar class="mobile-toolbar" color="primary">
  <ng-container *ngTemplateOutlet="toolbarItems"/>
</mat-toolbar>

<ng-template #toolbarItems>
  @for (item of [
      {id:'home',icon:'home',link:'/',title:'Home',key:'home_page'},
      {id:'notifs',icon:'notifications',title:'Notifications',key:'notifs',menu:notifications},
      {id:'user',icon:'account_circle',menu:userMenu,title:'User & Settings',key:'#{user} & #{settings}'}
    ]; track $index) {
      @switch (true) {
        @case (item.link !== undefined) {
          <div id="{{item.id}}" class="toolbar-item" [routerLink]="item.link" replaceUrl="{{item.id==='home'?'true':'false'}}">
            <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) {
              <img title="{{'profile_pic'|tr:'Profile Picture'}}" class="profile-pic" src="{{loginService?.user?.pictures[0]?.value}}">
            }
            @else {
              <mat-icon id="{{item.key}}-icon">{{item.icon}}</mat-icon>
            }
            <mat-label>{{(item.key|tr:item.title)}}</mat-label>
          </div>
        }
        @case (item.menu !== undefined) {
          <div id="{{item.id}}" class="toolbar-item" [matMenuTriggerFor]="item.menu">
            <mat-icon id="{{item.key}}-icon">{{item.icon}}</mat-icon>
            <mat-label>{{(item.key|tr:item.title)}}</mat-label>
            @if (item.key === 'notifs' && notificationCount > 0) {
              <div class="count">{{notificationCount}}</div>
            }
          </div>
        }
        @default {
          <div id="{{item.id}}" class="toolbar-item">
            <mat-icon>{{item.icon}}</mat-icon>
            <mat-label>{{(item.key|tr:item.title)}}</mat-label>
          </div>
        }
      }
    }
</ng-template>

<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * The content above * * * * * * * * * * * * -->
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * * -->
<!-- * * * * * * * * * * and can be replaced.  * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * End of Placeholder  * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<div [ngClass]="theme" class="container">
  <div class="main">
    <router-outlet></router-outlet>
  </div>
</div>
<footer>
  © {{currentDate.getFullYear()}} 
  {{cs.getLabel('companyName.full','Software Optima Sdn. Bhd.')}}
  <a class="version-short" href="../assets/realease_notes.html" target="_blank">(ver. {{cs.info?.version}})</a>
</footer>

<!--menus-->
<mat-menu #userMenu="matMenu">
  <button mat-menu-item>{{'my_account'|tr:'My Account'}}</button>
  <button mat-menu-item [matMenuTriggerFor]="settings">{{'settings'|tr:'Settings'}}</button>
  <button mat-menu-item (click)="loginService.logout()" [disabled]="!loginService.user">
    <mat-icon>logout</mat-icon>
    {{'logout'|tr:'Logout'}}</button>
</mat-menu>

<mat-menu #settings="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="themes">{{'theme'|tr:'Theme'}}</button>
  <button mat-menu-item [matMenuTriggerFor]="language">{{'language'|tr:'Language'}}</button>
</mat-menu>

<mat-menu #themes="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="lightThemes">{{'light'|tr:'Light'}}</button>
  <button mat-menu-item [matMenuTriggerFor]="darkThemes">{{'dark'|tr:'Dark'}}</button>
</mat-menu>

<mat-menu #lightThemes="matMenu">
  @for(theme of [
    {name:'theme',label:'main'|tr:'Blue',color:"#3F51B6"},
    {name:'theme-pink',label:'pink'|tr:'Pink',color:"#e91e63"}
  ]; track $index) {
    <button mat-menu-item (click)="cs.theming.changeTheme(theme.name)">
      <mat-icon style="color:{{theme.color}}">fiber_manual_record</mat-icon>
      {{theme.label}}</button>
  }
</mat-menu>

<mat-menu #darkThemes="matMenu">
  @for(theme of [
    {name:'dark-theme',label:'main'|tr:'Blue',color:"#3F51B6"},
    {name:'dark-theme-pink',label:'pink'|tr:'Pink',color:"#e91e63"}
  ]; track $index) {
    <button mat-menu-item (click)="cs.theming.changeTheme(theme.name)">
      <mat-icon style="color:{{theme.color}}">fiber_manual_record</mat-icon>
      {{theme.label}}</button>
  }
</mat-menu>

<mat-menu #language="matMenu">
  @for(lang of [
    {name:'en',label:'English',picture:'https://cdn.swopt.com/media/images/flags/GBR.png'},
    {name:'zh',label:'简体中文',picture:'https://cdn.swopt.com/media/images/flags/CHN.png'},
    {name:'ms',label:'Melayu',picture:'https://cdn.swopt.com/media/images/flags/MAS.png'}
  ];track $index) {
    <button mat-menu-item (click)="changeLanguage(lang.name)">
      <div class="language-flag" [style.background-image]="'url('+lang.picture+')'">&nbsp;</div>
      {{lang.label}}
    </button>
  }
</mat-menu>

<mat-menu #notifications="matMenu">
  <notification (click)="$event.stopPropagation()"/>
</mat-menu>