@designcrowd/library.brand-page 6.1.7 → 6.1.8-ast-header

package/src/shared/page-settings/components/header-settings-panel/HeaderSettingsPanel.vue

@@ -0,0 +1,205 @@
+<template>
+  <div data-component="header-settings-panel">
+    <SideBarSettingsHeader
+      :show-back-button="true"
+      :title="pageSettingsTr('headerSettings')"
+      @on-back="$emit('on-back')"
+    />
+
+    <TabMenu
+      :tab-names="viewports"
+      :selected-tab-name="selectedViewportTabName"
+      class="tw-mb-4"
+      @on-tab-selected="handleSelectViewport"
+    />
+
+    <HelloBar
+      v-if="showDeviceWarning"
+      variant="warning"
+      :label="tr('previewDescription')"
+      class="tw-mb-4"
+    />
+
+    <CollapsiblePanel
+      data-component="collapsible-panel"
+      :title="pageSettingsTr('navigationSectionTitle')"
+      :is-collapsed="collapsedSections.navigation"
+      @changed="toggleSectionCollapsed('navigation')"
+    >
+      <HeaderNavigationType
+        :navigation-display-type="navigation.displayType"
+        :available-navigation-style-configs="availableNavigationStyleConfigs"
+        :on-select="handleHeaderNavigationDisplayTypeChange"
+      />
+
+      <div v-if="!isBrandSite">
+        <div
+          v-if="showNavigationBelowLogoOption"
+          class="tw-my-4 tw-flex tw-items-center tw-justify-between tw-cursor-pointer"
+        >
+          <div class="tw-flex tw-items-center">
+            <div
+              class="tw-font-sans tw-font-bold tw-text-secondary-800 tw-text-sm tw-mr-2"
+            >
+              {{ tr('showNavigationBelow') }}
+            </div>
+          </div>
+          <Toggle
+            id="move-logo"
+            :model-value="isRenderAfterLogo"
+            @update:model-value="toggleShowNavigationBelowLogo"
+          />
+        </div>
+      </div>
+
+      <HeaderDisplayStyle
+        :display-style="header.displayStyle"
+        :navigation-display-type="navigation.displayType"
+        :on-select="handleHeaderDisplayStyleChange"
+        :viewport="viewport"
+        :is-logo-visible="isLogoVisible"
+      />
+
+      <NavigationStyleSettings
+        :available-navigation-style-configs="availableNavigationStyleConfigs"
+        :is-admin-maker="isAdminMaker"
+        :logo-theme="logoTheme"
+        :value="navigation"
+        @option-value-change="handleHeaderNavigationStyleOptionValueChange"
+      />
+    </CollapsiblePanel>
+
+    <CollapsiblePanel
+      v-if="isBrandSite"
+      data-component="collapsible-panel"
+      :title="pageSettingsTr('headerSectionTitle')"
+      :is-collapsed="collapsedSections.header"
+      @changed="toggleSectionCollapsed('header')"
+    >
+      <ColorField
+        id="backgroundStyle"
+        :class="{ 'tw-mt-4': isHeader }"
+        :enable-color-match="true"
+        name="backgroundColor"
+        :label="commonTr('backgroundColor')"
+        :value="backgroundColor"
+        :is-admin-maker="isAdminMaker"
+        :logo-theme="logoTheme"
+        :toggle-unique-id="sectionName"
+        @update:model-value="onSelectColor"
+      />
+    </CollapsiblePanel>
+
+    <CollapsiblePanel
+      v-if="isBrandSite"
+      data-component="collapsible-panel"
+      :title="pageSettingsTr('logoSectionTitle')"
+      :is-collapsed="collapsedSections.logo"
+      @changed="toggleSectionCollapsed('logo')"
+    >
+      <LogoSelection
+        :is-logo-visible="isLogoVisible"
+        :selected-logo="selectedLogoViewModel"
+        :selected-logo-image-url="logoImageBase64Url || logoImageUrl"
+        :selected-logo-draft-token="logoDraftToken"
+        @on-logo-visible-changed="onLogoVisibleChanged"
+        @on-logo-variation-selected="onLogoVariationSelected"
+        @on-editable-logo-variation-selected="onEditableLogoVariationSelected"
+        @on-logo-version-selected="onLogoVersionSelected"
+      />
+      <div v-if="isLogoVisible">
+        <div class="tw-mb-2 tw-flex tw-items-center tw-justify-between">
+          <span class="header-settings-panel_option-title tw-mt-2">
+            {{ tr('logoSize') }}
+          </span>
+        </div>
+        <LogoSizeSlider
+          :value="logoImageHeight"
+          :viewport="viewport"
+          @on-change="onLogoSizeChanged"
+        />
+      </div>
+    </CollapsiblePanel>
+
+    <!-- Button section hidden for now (BP-5854) — re-enable once BP-5852 implements
+         the header button. Left commented rather than removed since the shell
+         (CollapsiblePanel + collapsedSections.button state) is already wired up.
+    <CollapsiblePanel
+      data-component="collapsible-panel"
+      :title="pageSettingsTr('buttonSectionTitle')"
+      :is-collapsed="collapsedSections.button"
+      @changed="toggleSectionCollapsed('button')"
+    />
+    -->
+  </div>
+</template>
+<script>
+import {
+  CollapsiblePanel,
+  HelloBar,
+  TabMenu,
+  Toggle,
+} from '@designcrowd/fe-shared-lib';
+import PageSettingsSectionStyleMixin from '../page-settings-section-styles/PageSettingsSectionStyles.mixin.ts';
+import HeaderDisplayStyle from '../page-settings-section-styles/HeaderDisplayStyle.vue';
+import HeaderNavigationType from '../page-settings-section-styles/HeaderNavigationType.vue';
+import NavigationStyleSettings from '../../../navigation-style-settings/components/navigation-style-settings/NavigationStyleSettings.vue';
+import ColorField from '../../../content-settings/components/color-field/ColorField.vue';
+import LogoSelection from '@shared/content-settings/components/logo-selection-field/LogoSelection.vue';
+import LogoSizeSlider from '@shared/content-settings/components/logo-size-field/LogoSizeSlider.vue';
+import SideBarSettingsHeader from '../../../common/SideBarSettingsHeader.vue';
+import { tr, commonTr, pageSettingsTr } from '@src/composables/useTranslate';
+
+export default {
+  components: {
+    CollapsiblePanel,
+    ColorField,
+    HelloBar,
+    TabMenu,
+    Toggle,
+    HeaderDisplayStyle,
+    HeaderNavigationType,
+    NavigationStyleSettings,
+    LogoSelection,
+    LogoSizeSlider,
+    SideBarSettingsHeader,
+  },
+  mixins: [PageSettingsSectionStyleMixin],
+  emits: ['on-back'],
+  setup() {
+    return {
+      ...PageSettingsSectionStyleMixin.setup(),
+      tr: (key) => tr(`pageSettingsSection.${key}`),
+      commonTr,
+      pageSettingsTr,
+    };
+  },
+  data() {
+    return {
+      // All sections start collapsed, matching the panel's default-state
+      // design (BP-5854) — not persisted, this is purely local UI state.
+      collapsedSections: {
+        navigation: true,
+        header: true,
+        logo: true,
+        button: true,
+      },
+    };
+  },
+  computed: {
+    selectedViewportTabName() {
+      return this.findSelectedViewport();
+    },
+  },
+  methods: {
+    toggleSectionCollapsed(section) {
+      this.collapsedSections[section] = !this.collapsedSections[section];
+    },
+  },
+};
+</script>
+<style scoped>
+.header-settings-panel_option-title {
+  @apply tw-font-sans tw-font-bold tw-text-secondary-800 tw-text-sm;
+}
+</style>

package/src/shared/page-settings/components/page-settings/PageSettings.header-settings-panel.test.ts

@@ -0,0 +1,97 @@
+import { describe, test, expect, beforeEach } from 'vitest';
+import { createPinia, setActivePinia } from 'pinia';
+import { shallowMount } from '@vue/test-utils';
+import PageSettings from './PageSettings.vue';
+import HeaderSettingsPanel from '../header-settings-panel/HeaderSettingsPanel.vue';
+import { useUiPageSettingsStore } from '../../store';
+
+// Coverage for BP-5854: the flat "Header Settings" CollapsiblePanel became a
+// chevron row that navigates to a dedicated HeaderSettingsPanel, mirroring the
+// existing ContentSettings mode-switch pattern. This pins that navigation and
+// the "jump here from the live-preview canvas" path (selectedSectionName).
+describe('PageSettings — header settings panel navigation', () => {
+  let pageSettingsStore: ReturnType<typeof useUiPageSettingsStore>;
+
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    pageSettingsStore = useUiPageSettingsStore();
+  });
+
+  const mountPageSettings = () => shallowMount(PageSettings);
+
+  test('by default: header settings panel is not shown, the chevron row is', () => {
+    const wrapper = mountPageSettings();
+
+    expect(wrapper.findComponent(HeaderSettingsPanel).exists()).toBe(false);
+    expect(wrapper.find('[data-test-tag="header-settings-row"]').exists()).toBe(
+      true,
+    );
+  });
+
+  test('clicking the header settings row opens the panel', async () => {
+    const wrapper = mountPageSettings();
+
+    await wrapper
+      .find('[data-test-tag="header-settings-row"]')
+      .trigger('click');
+
+    expect(wrapper.findComponent(HeaderSettingsPanel).exists()).toBe(true);
+    expect(wrapper.find('[data-test-tag="header-settings-row"]').exists()).toBe(
+      false,
+    );
+  });
+
+  test('the panel\'s "on-back" event returns to the pages list', async () => {
+    const wrapper = mountPageSettings();
+
+    await wrapper
+      .find('[data-test-tag="header-settings-row"]')
+      .trigger('click');
+    await wrapper.findComponent(HeaderSettingsPanel).vm.$emit('on-back');
+
+    expect(wrapper.findComponent(HeaderSettingsPanel).exists()).toBe(false);
+    expect(wrapper.find('[data-test-tag="header-settings-row"]').exists()).toBe(
+      true,
+    );
+  });
+
+  test('selecting the header section (e.g. from the live-preview canvas) opens the panel', async () => {
+    const wrapper = mountPageSettings();
+
+    pageSettingsStore.setSelectedSectionName({ sectionName: 'header' });
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.findComponent(HeaderSettingsPanel).exists()).toBe(true);
+  });
+
+  test('selecting the pages section keeps the list view (no panel)', async () => {
+    const wrapper = mountPageSettings();
+
+    pageSettingsStore.setSelectedSectionName({ sectionName: 'header' });
+    await wrapper.vm.$nextTick();
+
+    pageSettingsStore.setSelectedSectionName({ sectionName: 'pages' });
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.findComponent(HeaderSettingsPanel).exists()).toBe(false);
+  });
+
+  test('re-selecting the header section after Back reopens the panel (same-value store write must still re-trigger)', async () => {
+    const wrapper = mountPageSettings();
+
+    // Opened once via the canvas (selectedSectionName), then closed via Back.
+    pageSettingsStore.setSelectedSectionName({ sectionName: 'header' });
+    await wrapper.vm.$nextTick();
+    await wrapper.findComponent(HeaderSettingsPanel).vm.$emit('on-back');
+
+    expect(pageSettingsStore.selectedSectionName).toBeUndefined();
+
+    // Clicking the header on the canvas again writes the SAME value ('header')
+    // it already held before Back reset it to undefined — this must still open
+    // the panel rather than being a no-op against Pinia's change detection.
+    pageSettingsStore.setSelectedSectionName({ sectionName: 'header' });
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.findComponent(HeaderSettingsPanel).exists()).toBe(true);
+  });
+});

package/src/shared/page-settings/components/page-settings/PageSettings.mixin.ts

@@ -264,6 +264,7 @@ export default defineComponent({
       onDraggingStart,
       onDraggingEnd,
       eventTracker,
+      pageSettingsView: ref<'list' | 'headerSettings'>('list'),
     };
   },
   data() {
@@ -297,18 +298,6 @@ export default defineComponent({
     contentListItems(): ContentItem<Content>[] {
       return this.contentSettingsStore.items;
     },
-    headerPageSectionStyleOptions(): PageSectionStyleOption[] {
-      if (this.isBrandSite) {
-        return [
-          PAGE_SECTION_STYLE_OPTIONS.logo,
-          PAGE_SECTION_STYLE_OPTIONS.logoSize,
-          PAGE_SECTION_STYLE_OPTIONS.backgroundColor,
-          PAGE_SECTION_STYLE_OPTIONS.headerDisplay,
-        ];
-      }
-
-      return [PAGE_SECTION_STYLE_OPTIONS.headerDisplay];
-    },
     footerPageSectionStyleOptions(): PageSectionStyleOption[] {
       return [
         PAGE_SECTION_STYLE_OPTIONS.logo,
@@ -485,6 +474,16 @@ export default defineComponent({
       });
     },
     scrollToPageSettingsSection(sectionName: PageSettingsSection) {
+      if (sectionName === PAGE_SETTINGS_SECTIONS.header) {
+        // Header settings live in their own dedicated panel now (BP-5854),
+        // not an inline CollapsiblePanel to scroll to.
+        this.pageSettingsView = 'headerSettings';
+
+        return;
+      }
+
+      this.pageSettingsView = 'list';
+
       this.$nextTick(() => {
         const $sideBarContent = document.querySelector(
           `#${SIDE_BAR_CONTENT_ID}`,
@@ -519,6 +518,22 @@ export default defineComponent({
         $sideBarContent.scrollTop = $el.offsetTop - $sidebarHeader.clientHeight;
       });
     },
+    openHeaderSettingsPanel() {
+      this.pageSettingsView = 'headerSettings';
+    },
+    closeHeaderSettingsPanel() {
+      this.pageSettingsView = 'list';
+
+      // Keep the store in sync so a repeat click on the header in the
+      // live-preview canvas (which sets selectedSectionName to the same
+      // value it already had) still re-fires the watcher and reopens
+      // this panel, instead of being a no-op.
+      if (this.pageSettingsStore.selectedSectionName) {
+        this.pageSettingsStore.setSelectedSectionName({
+          sectionName: undefined,
+        });
+      }
+    },
     async onHideBrandPageLogoClickFromFooter() {
       this.eventTracker.setUpsellBridgeState({
         cta_location: UPGRADE_CTA_LOCATIONS.REMOVE_WATERMARK_FOOTER_SETTINGS,

package/src/shared/page-settings/components/page-settings/PageSettings.vue

@@ -5,118 +5,137 @@
     <ReplaceImageSettingsForContent v-if="isReplacingPageSettingsImage" />
     <!-- start page settings -->
     <div v-show="!isReplacingPageSettingsImage">
-      <SideBarSettingsHeader :title="pageSettingsTr('managePages')" />
-      <p class="tw-font-sans tw-text-sm tw-text-grayscale-600 tw-mb-3">
-        {{ pageSettingsTr('addPagesDescription') }}
-      </p>
-      <CollapsiblePanel
-        :ref="PAGE_SETTINGS_SECTIONS.pages"
-        data-component="collapsible-panel"
-        :title="pageSettingsTr('pages')"
-        :is-collapsed="sectionCollapsedStates[PAGE_SETTINGS_SECTIONS.pages]"
-      >
-        <SideBarSectionTitle :title="pageSettingsTr('addPages')" />
-        <!-- Nested draggable section for visible pages -->
-        <NestedDraggable
-          :orders="pageNavigationStore.orders"
-          :is-dragging-page="isDraggingPage"
-          :is-design-com="isDesignCom"
-          :on-page-title-input="onPageTitleInput"
-          :on-delete-page-selected="onDeletePageSelected"
-          :on-change-page-visibility="onChangePageVisibility"
-          :on-add-sub-page-selected="onAddSubPageSelected"
-          @drag-start="onDraggingStart"
-          @drag-end="onDraggingEnd"
-        />
-
-        <Button
-          data-test-tag="add-page"
-          :label="addPageLabel"
-          :variant="addPageButtonVariant"
-          size="small-wide"
-          :full-width="true"
-          @on-click.stop="onAddNewPageSelected()"
-        />
-      </CollapsiblePanel>
+      <!-- style-options is required by the shared mixin (PageSettingsSectionStyles.mixin.ts)
+           but unused here — HeaderSettingsPanel's own isBrandSite checks decide what renders. -->
+      <HeaderSettingsPanel
+        v-if="pageSettingsView === 'headerSettings'"
+        :is-admin-maker="isAdminMaker"
+        :is-brand-site="isBrandSite"
+        :logo-theme="logoTheme"
+        section-name="header"
+        :style-options="[]"
+        @on-back="closeHeaderSettingsPanel"
+      />
 
-      <CollapsiblePanel
-        :ref="PAGE_SETTINGS_SECTIONS.header"
-        data-component="collapsible-panel"
-        :title="pageSettingsTr('headerSettings')"
-        :is-collapsed="sectionCollapsedStates[PAGE_SETTINGS_SECTIONS.header]"
-      >
-        <PageSettingsSectionStyles
-          section-name="header"
-          :is-admin-maker="isAdminMaker"
-          :is-brand-site="isBrandSite"
-          :logo-theme="logoTheme"
-          :style-options="headerPageSectionStyleOptions"
-        />
-      </CollapsiblePanel>
+      <template v-else>
+        <SideBarSettingsHeader :title="pageSettingsTr('managePages')" />
+        <p class="tw-font-sans tw-text-sm tw-text-grayscale-600 tw-mb-3">
+          {{ pageSettingsTr('addPagesDescription') }}
+        </p>
+        <CollapsiblePanel
+          :ref="PAGE_SETTINGS_SECTIONS.pages"
+          data-component="collapsible-panel"
+          :title="pageSettingsTr('pages')"
+          :is-collapsed="sectionCollapsedStates[PAGE_SETTINGS_SECTIONS.pages]"
+        >
+          <SideBarSectionTitle :title="pageSettingsTr('addPages')" />
+          <!-- Nested draggable section for visible pages -->
+          <NestedDraggable
+            :orders="pageNavigationStore.orders"
+            :is-dragging-page="isDraggingPage"
+            :is-design-com="isDesignCom"
+            :on-page-title-input="onPageTitleInput"
+            :on-delete-page-selected="onDeletePageSelected"
+            :on-change-page-visibility="onChangePageVisibility"
+            :on-add-sub-page-selected="onAddSubPageSelected"
+            @drag-start="onDraggingStart"
+            @drag-end="onDraggingEnd"
+          />
 
-      <CollapsiblePanel
-        v-if="showFooterSettings"
-        :ref="PAGE_SETTINGS_SECTIONS.footer"
-        data-component="collapsible-panel"
-        :title="pageSettingsTr('footerSettings')"
-        :is-collapsed="sectionCollapsedStates[PAGE_SETTINGS_SECTIONS.footer]"
-      >
-        <PageSettingsSectionStyles
-          section-name="footer"
-          :font-settings-options="footerFontSettingsOptions"
-          :is-admin-maker="isAdminMaker"
-          :is-brand-site="isBrandSite"
-          :logo-theme="logoTheme"
-          :style-options="footerPageSectionStyleOptions"
-        />
+          <Button
+            data-test-tag="add-page"
+            :label="addPageLabel"
+            :variant="addPageButtonVariant"
+            size="small-wide"
+            :full-width="true"
+            @on-click.stop="onAddNewPageSelected()"
+          />
+        </CollapsiblePanel>
 
         <div
-          v-if="!isAdminMaker && !isPrePurchase && showBrandCrowdLogo"
-          class="tw-flex tw-items-center tw-justify-between tw-cursor-pointer"
-          @click="onHideBrandPageLogoClickFromFooter"
+          data-component="header-settings-row"
+          data-test-tag="header-settings-row"
+          class="tw-bg-white tw-border tw-border-grayscale-500 tw-border-solid tw-flex tw-items-center tw-justify-between tw-cursor-pointer tw-mb-4 tw-p-4 tw-rounded-md"
+          @click="openHeaderSettingsPanel"
         >
-          <div class="tw-flex tw-items-center">
-            <div
-              class="tw-font-sans tw-font-bold tw-text-secondary-800 tw-text-sm tw-mr-2"
-            >
-              {{ hideText }}
-            </div>
-            <div
-              class="tw-inline-block tw-text-primary-500 tw-border-2 tw-border-solid tw-border-current tw-rounded-full tw-px-3 tw-py-px tw-uppercase tw-text-xs"
-            >
-              {{ styleSettingsTr('premium') }}
-            </div>
+          <div
+            class="tw-text-md tw-font-sans tw-font-bold tw-text-secondary-800"
+          >
+            {{ pageSettingsTr('headerSettings') }}
           </div>
-          <Toggle
-            id="hide-brandpage-logo"
-            class="tw-pointer-events-none tw-touch-none"
-            :model-value="false"
-            color="info"
-          />
+          <Icon name="chevron-right" size="sm" class="tw-text-grayscale-600" />
         </div>
-      </CollapsiblePanel>
 
-      <DeletePageModal
-        :is-visible="isDeleteModalVisible"
-        :page-id="deleteModalPageId"
-        :page-title="deleteModalPageTitle"
-        @cancel="onCancelDeletePage"
-        @confirm="onConfirmDeletePage"
-      />
+        <CollapsiblePanel
+          v-if="showFooterSettings"
+          :ref="PAGE_SETTINGS_SECTIONS.footer"
+          data-component="collapsible-panel"
+          :title="pageSettingsTr('footerSettings')"
+          :is-collapsed="sectionCollapsedStates[PAGE_SETTINGS_SECTIONS.footer]"
+        >
+          <PageSettingsSectionStyles
+            section-name="footer"
+            :font-settings-options="footerFontSettingsOptions"
+            :is-admin-maker="isAdminMaker"
+            :is-brand-site="isBrandSite"
+            :logo-theme="logoTheme"
+            :style-options="footerPageSectionStyleOptions"
+          />
+
+          <div
+            v-if="!isAdminMaker && !isPrePurchase && showBrandCrowdLogo"
+            class="tw-flex tw-items-center tw-justify-between tw-cursor-pointer"
+            @click="onHideBrandPageLogoClickFromFooter"
+          >
+            <div class="tw-flex tw-items-center">
+              <div
+                class="tw-font-sans tw-font-bold tw-text-secondary-800 tw-text-sm tw-mr-2"
+              >
+                {{ hideText }}
+              </div>
+              <div
+                class="tw-inline-block tw-text-primary-500 tw-border-2 tw-border-solid tw-border-current tw-rounded-full tw-px-3 tw-py-px tw-uppercase tw-text-xs"
+              >
+                {{ styleSettingsTr('premium') }}
+              </div>
+            </div>
+            <Toggle
+              id="hide-brandpage-logo"
+              class="tw-pointer-events-none tw-touch-none"
+              :model-value="false"
+              color="info"
+            />
+          </div>
+        </CollapsiblePanel>
+
+        <DeletePageModal
+          :is-visible="isDeleteModalVisible"
+          :page-id="deleteModalPageId"
+          :page-title="deleteModalPageTitle"
+          @cancel="onCancelDeletePage"
+          @confirm="onConfirmDeletePage"
+        />
 
-      <NewPageModal />
+        <NewPageModal />
+      </template>
     </div>
     <!-- end page settings -->
   </div>
 </template>
 <script>
-import { Button, CollapsiblePanel, Toggle } from '@designcrowd/fe-shared-lib';
+import {
+  Button,
+  CollapsiblePanel,
+  Icon,
+  Toggle,
+} from '@designcrowd/fe-shared-lib';
 import SideBarSettingsHeader from '../../../common/SideBarSettingsHeader.vue';
 import PageSettingsMixin from './PageSettings.mixin.ts';
 import SideBarSectionTitle from '../../../common/SideBarSectionTitle.vue';
 import DeletePageModal from '../delete-page-modal/DeletePageModal.vue';
 import NewPageModal from '../new-page-modal/NewPageModal.vue';
 import PageSettingsSectionStyles from '../page-settings-section-styles/PageSettingsSectionStyles.vue';
+import HeaderSettingsPanel from '../header-settings-panel/HeaderSettingsPanel.vue';
 import ReplaceImageSettingsForContent from '../../../content-settings/components/content-settings/ReplaceImageSettingsForContent.vue';
 import NestedDraggable from './NestedDraggable.vue';
 import { useBrandPageContainerStore } from '@brand-page-maker/stores';
@@ -126,6 +145,7 @@ export default {
   components: {
     Button,
     CollapsiblePanel,
+    Icon,
     Toggle,
     SideBarSettingsHeader,
     SideBarSectionTitle,
@@ -133,6 +153,7 @@ export default {
     DeletePageModal,
     NewPageModal,
     PageSettingsSectionStyles,
+    HeaderSettingsPanel,
     ReplaceImageSettingsForContent,
   },
   mixins: [PageSettingsMixin],

package/src/shared/page-settings/components/page-settings/i18n/page-settings.json

@@ -1,6 +1,10 @@
 {
   "pageSettings": {
     "headerSettings": "Header Settings",
+    "navigationSectionTitle": "Navigation",
+    "headerSectionTitle": "Header",
+    "logoSectionTitle": "Logo",
+    "buttonSectionTitle": "Button",
     "footerSettings": "Footer Settings",
     "managePages": "Manage Pages",
     "pages": "Pages",