From d8456ecb9fdc87526982544a229cff5cab479713 Mon Sep 17 00:00:00 2001
From: sdarbinyan <sdarbinyan@4pay.ru>
Date: Fri, 17 Jul 2026 15:29:55 +0400
Subject: [PATCH] feat(project-editor): header layout + sticky option

- HeaderConfig gains sticky (default true) and layout ('default'|'centered')
- header editor exposes layout select + sticky toggle
- runtime header component applies static/centered classes from config

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../components/header/header.component.html   |  2 +-
 .../components/header/header.component.scss   |  8 +++++
 .../models/project-editor.model.ts            |  2 ++
 .../sections/header-section.component.html    | 10 ++++++
 .../sections/header-section.component.ts      | 33 +++++++++++++++++--
 src/app/i18n/en.ts                            |  6 ++++
 src/app/i18n/hy.ts                            |  6 ++++
 src/app/i18n/ru.ts                            |  6 ++++
 src/app/i18n/translations.ts                  |  6 ++++
 .../models/config/header-config.model.ts      |  6 ++++
 10 files changed, 82 insertions(+), 3 deletions(-)

diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html
index cf3d390..c174424 100644
--- a/src/app/components/header/header.component.html
+++ b/src/app/components/header/header.component.html
@@ -1,5 +1,5 @@
   <!-- platform VERSION - Redesigned 2026 -->
-  <header class="platform-header">
+  <header class="platform-header" [class.platform-header--static]="headerConfig().sticky === false" [class.platform-header--centered]="headerConfig().layout === 'centered'">
     <div class="platform-header-container">
       <!-- Logo -->
       @if (headerConfig().showLogo) {
diff --git a/src/app/components/header/header.component.scss b/src/app/components/header/header.component.scss
index 636d6d1..8f17505 100644
--- a/src/app/components/header/header.component.scss
+++ b/src/app/components/header/header.component.scss
@@ -501,6 +501,14 @@
   z-index: 1000;
   backdrop-filter: blur(10px);
   font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+
+  &--static {
+    position: static;
+  }
+}
+
+.platform-header--centered .platform-header-container {
+  justify-content: center;
 }
 
 .platform-header-container {
diff --git a/src/app/features/project-editor/models/project-editor.model.ts b/src/app/features/project-editor/models/project-editor.model.ts
index 18b34a2..93d281a 100644
--- a/src/app/features/project-editor/models/project-editor.model.ts
+++ b/src/app/features/project-editor/models/project-editor.model.ts
@@ -55,4 +55,6 @@ export const DEFAULT_EDITOR_HEADER_CONFIG: Required<HeaderConfig> = {
   showWishlist: true,
   showCompare: true,
   showRegion: true,
+  sticky: true,
+  layout: 'default',
 };
diff --git a/src/app/features/project-editor/sections/header-section.component.html b/src/app/features/project-editor/sections/header-section.component.html
index 7c4b1c7..2d5af4d 100644
--- a/src/app/features/project-editor/sections/header-section.component.html
+++ b/src/app/features/project-editor/sections/header-section.component.html
@@ -1,5 +1,15 @@
 @if (bootstrap(); as bootstrap) {
 <app-section-card [title]="'builder.header' | translate">
+  <div class="editor-grid two">
+    <app-form-field [label]="'builder.headerLayout' | translate" [hint]="'builder.headerLayoutDesc' | translate">
+      <app-select [options]="layoutSelectOptions()" [ngModel]="bootstrap.header?.layout || 'default'" (ngModelChange)="updateLayout($event)" />
+    </app-form-field>
+    <label class="toggle-row">
+      <app-toggle [ngModel]="isSticky()" (ngModelChange)="toggleSticky($event)" [ariaLabel]="'builder.headerSticky' | translate" />
+      <span>{{ 'builder.headerSticky' | translate }}</span>
+      <small class="field-desc">{{ 'builder.headerStickyDesc' | translate }}</small>
+    </label>
+  </div>
   <div class="editor-grid three toggles">
     @for (item of items; track item.key) {
       <label class="toggle-row">
diff --git a/src/app/features/project-editor/sections/header-section.component.ts b/src/app/features/project-editor/sections/header-section.component.ts
index 0cb7f7a..f814a8f 100644
--- a/src/app/features/project-editor/sections/header-section.component.ts
+++ b/src/app/features/project-editor/sections/header-section.component.ts
@@ -1,21 +1,25 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { ProjectEditorFacade } from '../facade/project-editor.facade';
 import { TranslatePipe } from '../../../i18n/translate.pipe';
+import { TranslateService } from '../../../i18n/translate.service';
 import { HeaderConfig } from '../../../shared/models/config';
 import { SectionCardComponent } from '../../../shared/ui/section-card/section-card.component';
 import { ToggleComponent } from '../../../shared/ui/toggle/toggle.component';
+import { FormFieldComponent } from '../../../shared/ui/form-field/form-field.component';
+import { SelectComponent, SelectOption } from '../../../shared/ui/select/select.component';
 
 @Component({
   selector: 'app-project-editor-header-section',
   standalone: true,
-  imports: [FormsModule, TranslatePipe, SectionCardComponent, ToggleComponent],
+  imports: [FormsModule, TranslatePipe, SectionCardComponent, ToggleComponent, FormFieldComponent, SelectComponent],
   templateUrl: './header-section.component.html',
   styleUrls: ['./section.shared.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ProjectEditorHeaderSectionComponent {
   private readonly facade = inject(ProjectEditorFacade);
+  private readonly translate = inject(TranslateService);
   readonly bootstrap = this.facade.bootstrap;
   readonly items: Array<{ key: keyof HeaderConfig; label: string; descKey: string }> = [
     { key: 'showLogo', label: 'builder.showLogo', descKey: 'builder.showLogoDesc' },
@@ -29,6 +33,15 @@ export class ProjectEditorHeaderSectionComponent {
     { key: 'showRegion', label: 'builder.showRegion', descKey: 'builder.showRegionDesc' },
   ];
 
+  private readonly layoutOptions: Array<{ value: string; labelKey: string }> = [
+    { value: 'default', labelKey: 'builder.headerLayoutDefault' },
+    { value: 'centered', labelKey: 'builder.headerLayoutCentered' },
+  ];
+
+  readonly layoutSelectOptions = computed<SelectOption[]>(() =>
+    this.layoutOptions.map(option => ({ value: option.value, label: this.translate.t(option.labelKey) }))
+  );
+
   toggle(key: keyof HeaderConfig, checked: boolean): void {
     this.facade.updateBootstrap(current => ({
       ...current,
@@ -39,4 +52,20 @@ export class ProjectEditorHeaderSectionComponent {
   isChecked(key: keyof HeaderConfig): boolean {
     return !!this.bootstrap()?.header?.[key];
   }
+
+  readonly isSticky = (): boolean => this.bootstrap()?.header?.sticky !== false;
+
+  toggleSticky(checked: boolean): void {
+    this.facade.updateBootstrap(current => ({
+      ...current,
+      header: { ...(current.header ?? {}), sticky: checked }
+    }));
+  }
+
+  updateLayout(layout: string): void {
+    this.facade.updateBootstrap(current => ({
+      ...current,
+      header: { ...(current.header ?? {}), layout: layout as HeaderConfig['layout'] }
+    }));
+  }
 }
diff --git a/src/app/i18n/en.ts b/src/app/i18n/en.ts
index 9d19903..0a2651c 100644
--- a/src/app/i18n/en.ts
+++ b/src/app/i18n/en.ts
@@ -430,6 +430,10 @@ export const en: Translations = {
     socialImage: 'Social Share Image',
     gallery: 'Gallery',
     addGalleryImage: 'Add image',
+    headerLayout: 'Header Layout',
+    headerLayoutDefault: 'Default',
+    headerLayoutCentered: 'Centered',
+    headerSticky: 'Sticky Header',
     marketplaceTitle: 'Marketplace Title',
     primaryColor: 'Primary Color',
     secondaryColor: 'Secondary Color',
@@ -577,6 +581,8 @@ export const en: Translations = {
     faviconDesc: 'Browser tab icon image URL. Should be a small square image.',
     socialImageDesc: 'Default image shown when the marketplace is shared on social media (Open Graph).',
     galleryDesc: 'Extra brand images available for future use across the storefront.',
+    headerLayoutDesc: 'How the header content is arranged: default (logo left, nav spread) or centered.',
+    headerStickyDesc: 'Keep the header pinned to the top of the viewport while scrolling.',
     marketplaceTitleDesc: 'The page title used by search engines and browser tabs.',
     primaryColorDesc: 'The main brand color, used on primary buttons and highlights. Must be a valid hex color.',
     secondaryColorDesc: 'A supporting brand color used for secondary UI elements. Must be a valid hex color.',
diff --git a/src/app/i18n/hy.ts b/src/app/i18n/hy.ts
index 59c8cfd..cc81e5d 100644
--- a/src/app/i18n/hy.ts
+++ b/src/app/i18n/hy.ts
@@ -430,6 +430,10 @@ export const hy: Translations = {
     socialImage: 'Սոցիալական պատկեր',
     gallery: 'Պատկերասրահ',
     addGalleryImage: 'Ավելացնել պատկեր',
+    headerLayout: 'Վերնագրի դասավորություն',
+    headerLayoutDefault: 'Կանխադրված',
+    headerLayoutCentered: 'Կենտրոնացված',
+    headerSticky: 'Կպչուն վերնագիր',
     marketplaceTitle: 'Մարքեթփլեյսի վերնագիր',
     primaryColor: 'Հիմնական գույն',
     secondaryColor: 'Երկրորդական գույն',
@@ -577,6 +581,8 @@ export const hy: Translations = {
     faviconDesc: 'Բրաուզերի ներդիրի պատկերակի URL։ Պետք է լինի փոքր քառակուսի պատկեր։',
     socialImageDesc: 'Կանխադրված պատկեր, երբ մարքեթփլեյսը կիսվում է սոցիալական ցանցերում (Open Graph)։',
     galleryDesc: 'Լրացուցիչ բրենդային պատկերներ ապագա օգտագործման համար։',
+    headerLayoutDesc: 'Ինչպես է դասավորված վերնագրի պարունակությունը՝ կանխադրված (լոգոն ձախից) կամ կենտրոնացված։',
+    headerStickyDesc: 'Պահել վերնագիրը էկրանի վերևում էջը էջում ոլորելիս։',
     marketplaceTitleDesc: 'Էջի վերնագիրը որոնողական համակարգերի և բրաուզերի ներդիրների համար։',
     primaryColorDesc: 'Բրենդի հիմնական գույնը՝ հիմնական կոճակների և ընդգծումների համար։ Պետք է վավեր hex գույն լինի։',
     secondaryColorDesc: 'Բրենդի երկրորդական գույնը՝ երկրորդական տարրերի համար։ Պետք է վավեր hex գույն լինի։',
diff --git a/src/app/i18n/ru.ts b/src/app/i18n/ru.ts
index 8ea4a84..c844f89 100644
--- a/src/app/i18n/ru.ts
+++ b/src/app/i18n/ru.ts
@@ -430,6 +430,10 @@ export const ru: Translations = {
     socialImage: 'Изображение для соцсетей',
     gallery: 'Галерея',
     addGalleryImage: 'Добавить изображение',
+    headerLayout: 'Расположение шапки',
+    headerLayoutDefault: 'По умолчанию',
+    headerLayoutCentered: 'По центру',
+    headerSticky: 'Липкая шапка',
     marketplaceTitle: 'Заголовок маркетплейса',
     primaryColor: 'Основной цвет',
     secondaryColor: 'Вторичный цвет',
@@ -577,6 +581,8 @@ export const ru: Translations = {
     faviconDesc: 'URL иконки вкладки браузера. Должен быть небольшим квадратным изображением.',
     socialImageDesc: 'Изображение по умолчанию при публикации маркетплейса в соцсетях (Open Graph).',
     galleryDesc: 'Дополнительные брендовые изображения для будущего использования в витрине.',
+    headerLayoutDesc: 'Как расположен контент шапки: по умолчанию (логотип слева, навигация разнесена) или по центру.',
+    headerStickyDesc: 'Закреплять шапку вверху экрана при прокрутке.',
     marketplaceTitleDesc: 'Заголовок страницы для поисковых систем и вкладок браузера.',
     primaryColorDesc: 'Основной цвет бренда для главных кнопок и акцентов. Должен быть корректным hex-цветом.',
     secondaryColorDesc: 'Дополнительный цвет бренда для второстепенных элементов. Должен быть корректным hex-цветом.',
diff --git a/src/app/i18n/translations.ts b/src/app/i18n/translations.ts
index 2314754..9590b6a 100644
--- a/src/app/i18n/translations.ts
+++ b/src/app/i18n/translations.ts
@@ -428,6 +428,10 @@ export interface Translations {
     socialImage: string;
     gallery: string;
     addGalleryImage: string;
+    headerLayout: string;
+    headerLayoutDefault: string;
+    headerLayoutCentered: string;
+    headerSticky: string;
     marketplaceTitle: string;
     primaryColor: string;
     secondaryColor: string;
@@ -575,6 +579,8 @@ export interface Translations {
     faviconDesc: string;
     socialImageDesc: string;
     galleryDesc: string;
+    headerLayoutDesc: string;
+    headerStickyDesc: string;
     marketplaceTitleDesc: string;
     primaryColorDesc: string;
     secondaryColorDesc: string;
diff --git a/src/app/shared/models/config/header-config.model.ts b/src/app/shared/models/config/header-config.model.ts
index 05f3e16..0ac58b4 100644
--- a/src/app/shared/models/config/header-config.model.ts
+++ b/src/app/shared/models/config/header-config.model.ts
@@ -1,3 +1,5 @@
+export type HeaderLayout = 'default' | 'centered';
+
 export interface HeaderConfig {
   showLogo?: boolean;
   showSearch?: boolean;
@@ -8,6 +10,8 @@ export interface HeaderConfig {
   showWishlist?: boolean;
   showCompare?: boolean;
   showRegion?: boolean;
+  sticky?: boolean;
+  layout?: HeaderLayout;
 }
 
 export const DEFAULT_HEADER_CONFIG: Required<HeaderConfig> = {
@@ -20,4 +24,6 @@ export const DEFAULT_HEADER_CONFIG: Required<HeaderConfig> = {
   showWishlist: true,
   showCompare: true,
   showRegion: true,
+  sticky: true,
+  layout: 'default',
 };