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.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, HostListener } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { ConfirmDialog } from 'primeng/confirmdialog';
 import { ToastModule } from 'primeng/toast';
@@ -8,9 +8,25 @@ import { ToastModule } from 'primeng/toast';
   standalone: true,
   imports: [RouterModule, ToastModule, ConfirmDialog],
   template: `
-    <p-toast position="bottom-right" />
+    <p-toast [position]="toastPosition" />
     <p-confirmDialog />
     <router-outlet />
   `,
 })
-export class AppComponent {}
+export class AppComponent {
+  toastPosition: 'top-center' | 'bottom-right' = 'bottom-right';
+
+  constructor() {
+    this.updateToastPosition();
+  }
+
+  @HostListener('window:resize')
+  onResize() {
+    this.updateToastPosition();
+  }
+
+  private updateToastPosition() {
+    this.toastPosition =
+      typeof window !== 'undefined' && window.innerWidth <= 768 ? 'top-center' : 'bottom-right';
+  }
+}