feat(layout): enhance topbar with customizable templates and full-page support

- Updated app.layout.component.html to include start, center, and end templates for the topbar.
- Modified app.layout.component.ts to manage new template references and added isFullPage getter.
- Refactored app.topbar.component.html to utilize new templates and improved layout structure.
- Enhanced app.topbar.component.ts to accept new input properties for templates.
- Updated layout.service.ts to manage full-page state and new topbar slots.
- Added new payment bridge services for POS functionality.
- Introduced greater validator for form validation.
- Improved dialog component to support mobile drawer and responsive design.
- Updated styles for better mobile support and layout adjustments.
- Added new main menu sidebar for POS with dynamic content.

src/app/domains/pos/layouts/layout.component.ts

@@ -1,15 +1,25 @@
 import { AuthService } from '@/core';
+import { LayoutService } from '@/layout/service/layout.service';
 import { PageLoadingComponent } from '@/shared/components/page-loading.component';
 import { JalaliDateDirective } from '@/shared/directives';
-import { Component, computed, inject } from '@angular/core';
+import {
+  AfterViewInit,
+  Component,
+  TemplateRef,
+  ViewChild,
+  computed,
+  inject,
+  signal,
+} from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { MenuItem } from 'primeng/api';
-import { ButtonDirective } from 'primeng/button';
+import { Button, ButtonDirective } from 'primeng/button';
 import { Card } from 'primeng/card';
 import { Menu } from 'primeng/menu';
 import images from 'src/assets/images';
 import { PosInfoStore, PosProfileStore } from '../store';
 import { PosChooseCardsComponent } from './choose-pos.component';
+import { PosMainMenuSidebarComponent } from './mainMenuSidebar/main-menu-sidebar.component';
 
 @Component({
   selector: 'pos-layout',
@@ -22,14 +32,22 @@ import { PosChooseCardsComponent } from './choose-pos.component';
     ButtonDirective,
     Card,
     PosChooseCardsComponent,
+    Button,
+    PosMainMenuSidebarComponent,
   ],
 })
-export class PosLayoutComponent {
+export class PosLayoutComponent implements AfterViewInit {
   constructor() {}
+  @ViewChild('topbarStart', { static: true }) topbarStart!: TemplateRef<any>;
+  @ViewChild('topbarCenter', { static: true }) topbarCenter!: TemplateRef<any>;
+  @ViewChild('topbarEnd', { static: true }) topbarEnd!: TemplateRef<any>;
 
   private readonly posProfileStore = inject(PosProfileStore);
   private readonly posInfoStore = inject(PosInfoStore);
   private readonly authService = inject(AuthService);
+  private readonly layoutService = inject(LayoutService);
+
+  mainMenuVisible = signal(false);
 
   readonly posProfileLoading = computed(() => this.posProfileStore.loading());
   readonly posProfile = computed(() => this.posProfileStore.entity());
@@ -71,11 +89,28 @@ export class PosLayoutComponent {
     });
   }
 
+  toggleMenu() {
+    this.mainMenuVisible.update((v) => !v);
+  }
+
   onChoosePos() {
     this.getData();
   }
 
   ngOnInit() {
+    this.layoutService.changeIsFullPage(true);
     this.getData();
   }
+
+  ngAfterViewInit() {
+    this.layoutService.setTopbarStartSlot(this.topbarStart);
+    this.layoutService.setTopbarCenterSlot(this.topbarCenter);
+    this.layoutService.setTopbarEndSlot(this.topbarEnd);
+  }
+
+  ngOnDestroy() {
+    this.layoutService.setTopbarStartSlot(null);
+    this.layoutService.setTopbarCenterSlot(null);
+    this.layoutService.setTopbarEndSlot(null);
+  }
 }