feat(project-editor): add Navigation tab for header/flat footer nav

src/app/features/project-editor/sections/navigation-section.component.ts

@@ -0,0 +1,63 @@
+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 { NavigationItemConfig } from '../../../shared/models/config';
+
+@Component({
+  selector: 'app-project-editor-navigation-section',
+  standalone: true,
+  imports: [FormsModule, TranslatePipe],
+  templateUrl: './navigation-section.component.html',
+  styleUrls: ['./section.shared.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ProjectEditorNavigationSectionComponent {
+  private readonly facade = inject(ProjectEditorFacade);
+  readonly bootstrap = this.facade.bootstrap;
+
+  readonly headerLinks = computed(() => this.sorted(this.bootstrap()?.navigation.header ?? []));
+  readonly footerLinks = computed<NavigationItemConfig[] | null>(() => {
+    const footer = this.bootstrap()?.navigation.footer ?? [];
+    if (footer.length === 0) {
+      return [];
+    }
+    return 'items' in footer[0] ? null : this.sorted(footer as NavigationItemConfig[]);
+  });
+
+  labelOf(item: NavigationItemConfig): string {
+    if (typeof item.label === 'string' || !item.label) {
+      return item.label ?? '';
+    }
+    const defaultLocale = this.bootstrap()?.localization.defaultLocale ?? 'en';
+    return item.label[defaultLocale] ?? Object.values(item.label)[0] ?? '';
+  }
+
+  addLink(target: 'header' | 'footer'): void {
+    this.facade.addNavLink(target);
+  }
+
+  removeLink(target: 'header' | 'footer', id: string): void {
+    this.facade.removeNavLink(target, id);
+  }
+
+  move(target: 'header' | 'footer', id: string, direction: -1 | 1): void {
+    this.facade.reorderNavLink(target, id, direction);
+  }
+
+  updateLabel(target: 'header' | 'footer', id: string, value: string): void {
+    this.facade.updateNavLink(target, id, { label: value });
+  }
+
+  updateRoute(target: 'header' | 'footer', id: string, value: string): void {
+    this.facade.updateNavLink(target, id, { route: value });
+  }
+
+  updateVisible(target: 'header' | 'footer', id: string, value: boolean): void {
+    this.facade.updateNavLink(target, id, { visible: value });
+  }
+
+  private sorted(items: NavigationItemConfig[]): NavigationItemConfig[] {
+    return [...items].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+  }
+}