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/modules/landing/components/grid-view.component.html

@@ -7,10 +7,10 @@
     }
   } @else {
     @for (good of goods(); track good.id) {
-      <div class="flex-1 bg-surface-card rounded-lg p-1 shadow-xs">
+      <div class="flex-1 bg-surface-card rounded-lg p-1 shadow-xs" (click)="addProduct(good)">
         <img [src]="good.image_url || goodPlaceholder" class="w-full aspect-[1.3] object-cover rounded-md" />
-        <div class="mt-2">
-          <span class="text-lg font-bold">
+        <div class="mt-2 text-center">
+          <span class="text-lg font-bold text-center">
             {{ good.name }}
             @if (!good.is_default_guild_good) {
               <small class="text-xs text-muted-color">*</small>
@@ -18,9 +18,7 @@
           </span>
           <div class="flex items-center justify-between mt-1 w-full px-2 my-2">
             <!-- <span [appPriceMask]="good.salePrice" class="text-base font-bold"></span> -->
-            <button pButton type="button" icon="pi pi-plus" size="small" class="w-full!" (click)="addProduct(good)">
-              انتخاب
-            </button>
+            <button pButton type="button" icon="pi pi-plus" class="w-full!">انتخاب</button>
           </div>
         </div>
       </div>