@designcrowd/library.brand-page 6.1.10 → 6.1.11

package/src/brand-page-maker/models/i18n/models.de-DE.json

@@ -10,6 +10,9 @@
     "iconBackgroundColor": "Symbolhintergrundfarbe",
     "subNavBackgroundColor": "Hintergrundfarbe der Unternavigation",
 
+    "navigationTypeBar": "Navigationsleiste",
+    "navigationTypeHamburger": "Hamburger-Menü",
+
     "allDisplayName": "Alle",
     "generalDisplayName": "Allgemein",
     "socialLinksDisplayName": "Social Media",

package/src/brand-page-maker/models/i18n/models.es-ES.json

@@ -10,6 +10,9 @@
     "iconBackgroundColor": "Color de fondo del icono",
     "subNavBackgroundColor": "Color de fondo del submenú",
 
+    "navigationTypeBar": "Barra de navegación",
+    "navigationTypeHamburger": "Menú de hamburguesas",
+
     "allDisplayName": "Todo",
     "generalDisplayName": "General",
     "socialLinksDisplayName": "Redes sociales",

package/src/brand-page-maker/models/i18n/models.fr-CA.json

@@ -10,6 +10,9 @@
     "iconBackgroundColor": "Couleur d’arrière-plan de l’icône",
     "subNavBackgroundColor": "Couleur de fond de sous-navigation",
 
+    "navigationTypeBar": "Barre de navigation",
+    "navigationTypeHamburger": "Menu hamburger",
+
     "allDisplayName": "Tous",
     "generalDisplayName": "Général",
     "socialLinksDisplayName": "Réseaux sociaux",

package/src/brand-page-maker/models/i18n/models.fr-FR.json

@@ -10,6 +10,9 @@
     "iconBackgroundColor": "Couleur d’arrière-plan de l’icône",
     "subNavBackgroundColor": "Couleur d’arrière-plan de la sous-navigation",
 
+    "navigationTypeBar": "Barre de navigation",
+    "navigationTypeHamburger": "Menu hamburger",
+
     "allDisplayName": "Tous",
     "generalDisplayName": "Général",
     "socialLinksDisplayName": "Réseaux sociaux",

package/src/brand-page-maker/models/i18n/models.json

@@ -10,6 +10,9 @@
     "iconBackgroundColor": "Icon background color",
     "subNavBackgroundColor": "Sub nav background color",
 
+    "navigationTypeBar": "Navigation bar",
+    "navigationTypeHamburger": "Hamburger menu",
+
     "allDisplayName": "all",
     "generalDisplayName": "General",
     "socialLinksDisplayName": "Socials",

package/src/brand-page-maker/models/i18n/models.pt-BR.json

@@ -10,6 +10,9 @@
     "iconBackgroundColor": "Cor de fundo do ícone",
     "subNavBackgroundColor": "Cor de fundo da subnavegação",
 
+    "navigationTypeBar": "Barra de navegação",
+    "navigationTypeHamburger": "Menu de hambúrguer",
+
     "allDisplayName": "tudo",
     "generalDisplayName": "Geral",
     "socialLinksDisplayName": "Redes sociais",

package/src/brand-page-maker/models/i18n/models.pt-PT.json

@@ -10,6 +10,9 @@
     "iconBackgroundColor": "Cor de fundo do ícone",
     "subNavBackgroundColor": "Cor de fundo da navegação inferior",
 
+    "navigationTypeBar": "Barra de navegação",
+    "navigationTypeHamburger": "Menu hambúrguer",
+
     "allDisplayName": "Tudo",
     "generalDisplayName": "Geral",
     "socialLinksDisplayName": "Redes sociais",

package/src/brand-page-maker/models/navigation-style-configs.ts

@@ -1,6 +1,7 @@
 import {
   defaultHamburgerNavigation,
   NAVIGATION_DISPLAY,
+  NAVIGATION_TYPE,
   FONT_FAMILY_CONFIGS,
   DEFAULT_FONT_FAMILY_KEY,
   FONT_SIZE_BODY,
@@ -108,7 +109,8 @@ export const availableNavigationStyleConfigs: NavigationStyleConfig[] = [
     buttonGroupOption: {
       value: NAVIGATION_DISPLAY.TAB_1,
       iconName: 'nav-style-tab-display-style-1',
-      iconViewBox: '0 0 94 50',
+      iconViewBox: '0 0 160 56',
+      dataAttribute: 'data-nav-style-tab-1',
       isSelected: false,
     },
     renderAfterLogo: false,
@@ -145,7 +147,8 @@ export const availableNavigationStyleConfigs: NavigationStyleConfig[] = [
     buttonGroupOption: {
       value: NAVIGATION_DISPLAY.TAB_2,
       iconName: 'nav-style-tab-display-style-2',
-      iconViewBox: '0 0 94 50',
+      iconViewBox: '0 0 160 56',
+      dataAttribute: 'data-nav-style-tab-2',
       isSelected: false,
     },
     renderAfterLogo: false,
@@ -157,7 +160,8 @@ export const availableNavigationStyleConfigs: NavigationStyleConfig[] = [
     buttonGroupOption: {
       value: NAVIGATION_DISPLAY.HAMBURGER_1,
       iconName: 'nav-style-hamburger-display-style-1',
-      iconViewBox: '0 0 94 50',
+      iconViewBox: '0 0 33 33',
+      dataAttribute: 'data-nav-style-hamburger-1',
       isSelected: false,
     },
     renderAfterLogo: false,
@@ -168,7 +172,8 @@ export const availableNavigationStyleConfigs: NavigationStyleConfig[] = [
     buttonGroupOption: {
       value: NAVIGATION_DISPLAY.HAMBURGER_2,
       iconName: 'nav-style-hamburger-display-style-2',
-      iconViewBox: '0 0 94 50',
+      iconViewBox: '0 0 33 33',
+      dataAttribute: 'data-nav-style-hamburger-2',
       isSelected: false,
     },
     renderAfterLogo: false,
@@ -179,7 +184,8 @@ export const availableNavigationStyleConfigs: NavigationStyleConfig[] = [
     buttonGroupOption: {
       value: NAVIGATION_DISPLAY.HAMBURGER_3,
       iconName: 'nav-style-hamburger-display-style-3',
-      iconViewBox: '0 0 94 50',
+      iconViewBox: '0 0 33 33',
+      dataAttribute: 'data-nav-style-hamburger-3',
       isSelected: false,
     },
     renderAfterLogo: false,
@@ -190,13 +196,33 @@ export const availableNavigationStyleConfigs: NavigationStyleConfig[] = [
     buttonGroupOption: {
       value: NAVIGATION_DISPLAY.HAMBURGER_4,
       iconName: 'nav-style-hamburger-display-style-4',
-      iconViewBox: '0 0 94 50',
+      iconViewBox: '0 0 33 33',
+      dataAttribute: 'data-nav-style-hamburger-4',
       isSelected: false,
     },
     renderAfterLogo: false,
   },
 ];
 
+export const navigationTypeOptions = (): ButtonGroupOption[] => [
+  {
+    value: NAVIGATION_TYPE.bar,
+    iconName: 'nav-style-type-bar',
+    iconViewBox: '0 0 160 28',
+    title: modelsTr('navigationTypeBar'),
+    dataAttribute: 'data-nav-type-bar',
+    isSelected: false,
+  },
+  {
+    value: NAVIGATION_TYPE.hamburger,
+    iconName: 'nav-style-type-hamburger',
+    iconViewBox: '0 0 160 28',
+    title: modelsTr('navigationTypeHamburger'),
+    dataAttribute: 'data-nav-type-hamburger',
+    isSelected: false,
+  },
+];
+
 export interface NavigationStylesTypeConfig {
   type: PageSection;
   isLogoFieldsOptional: boolean;

package/src/bundles/bundled-translations.de-DE.json

@@ -1274,6 +1274,8 @@
     "iconColor": "Symbolfarbe",
     "iconBackgroundColor": "Symbolhintergrundfarbe",
     "subNavBackgroundColor": "Hintergrundfarbe der Unternavigation",
+    "navigationTypeBar": "Navigationsleiste",
+    "navigationTypeHamburger": "Hamburger-Menü",
     "allDisplayName": "Alle",
     "generalDisplayName": "Allgemein",
     "socialLinksDisplayName": "Social Media",
@@ -1859,6 +1861,9 @@
     "showNavigationBelow": "Navigation unter dem Logo anzeigen",
     "previewDescription": "Eine Vorschau ist für diese Bildschirmgröße nicht verfügbar.",
     "navigationStyle": "Navigationsstil",
+    "navigationType": "Navigationstyp",
+    "menuStyle": "Menüstil",
+    "iconStyle": "Symbol-Stil",
     "logoSize": "Logogröße",
     "socialLinks": "Social-Media-Links",
     "copyright": "Copyright"

package/src/bundles/bundled-translations.es-ES.json

@@ -1274,6 +1274,8 @@
     "iconColor": "Color del icono",
     "iconBackgroundColor": "Color de fondo del icono",
     "subNavBackgroundColor": "Color de fondo del submenú",
+    "navigationTypeBar": "Barra de navegación",
+    "navigationTypeHamburger": "Menú de hamburguesas",
     "allDisplayName": "Todo",
     "generalDisplayName": "General",
     "socialLinksDisplayName": "Redes sociales",
@@ -1859,6 +1861,9 @@
     "showNavigationBelow": "Muestra la navegación debajo del logo",
     "previewDescription": "La vista previa no está disponible en este tamaño de pantalla.",
     "navigationStyle": "Estilo de navegación",
+    "navigationType": "Tipo de navegación",
+    "menuStyle": "Estilo de menú",
+    "iconStyle": "Estilo de icono",
     "logoSize": "Tamaño del logo",
     "socialLinks": "Enlaces a redes sociales",
     "copyright": "Derechos de autor"

package/src/bundles/bundled-translations.fr-CA.json

@@ -1274,6 +1274,8 @@
     "iconColor": "Couleur de l'icône",
     "iconBackgroundColor": "Couleur d’arrière-plan de l’icône",
     "subNavBackgroundColor": "Couleur de fond de sous-navigation",
+    "navigationTypeBar": "Barre de navigation",
+    "navigationTypeHamburger": "Menu hamburger",
     "allDisplayName": "Tous",
     "generalDisplayName": "Général",
     "socialLinksDisplayName": "Réseaux sociaux",
@@ -1859,6 +1861,9 @@
     "showNavigationBelow": "Afficher la navigation sous le logo",
     "previewDescription": "L'aperçu n'est pas disponible pour cette taille d'écran.",
     "navigationStyle": "Style de navigation",
+    "navigationType": "Type de navigation",
+    "menuStyle": "Style de menu",
+    "iconStyle": "Style d'icône",
     "logoSize": "Taille du logo",
     "socialLinks": "Liens vers les réseaux sociaux",
     "copyright": "Droits d’auteur"

package/src/bundles/bundled-translations.fr-FR.json

@@ -1274,6 +1274,8 @@
     "iconColor": "Couleur de l'icône",
     "iconBackgroundColor": "Couleur d’arrière-plan de l’icône",
     "subNavBackgroundColor": "Couleur d’arrière-plan de la sous-navigation",
+    "navigationTypeBar": "Barre de navigation",
+    "navigationTypeHamburger": "Menu hamburger",
     "allDisplayName": "Tous",
     "generalDisplayName": "Général",
     "socialLinksDisplayName": "Réseaux sociaux",
@@ -1859,6 +1861,9 @@
     "showNavigationBelow": "Afficher la navigation sous le logo",
     "previewDescription": "L'aperçu n'est pas disponible pour cette taille d'écran.",
     "navigationStyle": "Style de navigation",
+    "navigationType": "Type de navigation",
+    "menuStyle": "Style de menu",
+    "iconStyle": "Style d'icône",
     "logoSize": "Taille du logo",
     "socialLinks": "Liens vers les réseaux sociaux",
     "copyright": "Droits d’auteur"

package/src/bundles/bundled-translations.json

@@ -1274,6 +1274,8 @@
     "iconColor": "Icon color",
     "iconBackgroundColor": "Icon background color",
     "subNavBackgroundColor": "Sub nav background color",
+    "navigationTypeBar": "Navigation bar",
+    "navigationTypeHamburger": "Hamburger menu",
     "allDisplayName": "all",
     "generalDisplayName": "General",
     "socialLinksDisplayName": "Socials",
@@ -1859,6 +1861,9 @@
     "showNavigationBelow": "Show navigation below logo",
     "previewDescription": "Preview is not available on this screen size.",
     "navigationStyle": "Navigation style",
+    "navigationType": "Navigation type",
+    "menuStyle": "Menu style",
+    "iconStyle": "Icon style",
     "logoSize": "Logo Size",
     "socialLinks": "Social Links",
     "copyright": "Copyright"

package/src/bundles/bundled-translations.pt-BR.json

@@ -1274,6 +1274,8 @@
     "iconColor": "Cor do ícone",
     "iconBackgroundColor": "Cor de fundo do ícone",
     "subNavBackgroundColor": "Cor de fundo da subnavegação",
+    "navigationTypeBar": "Barra de navegação",
+    "navigationTypeHamburger": "Menu de hambúrguer",
     "allDisplayName": "tudo",
     "generalDisplayName": "Geral",
     "socialLinksDisplayName": "Redes sociais",
@@ -1859,6 +1861,9 @@
     "showNavigationBelow": "Mostrar navegação abaixo do logotipo",
     "previewDescription": "A visualização não está disponível neste tamanho de tela.",
     "navigationStyle": "Estilo de navegação",
+    "navigationType": "Tipo de navegação",
+    "menuStyle": "Estilo de menu",
+    "iconStyle": "Estilo de ícone",
     "logoSize": "Tamanho do logotipo",
     "socialLinks": "Links de redes sociais",
     "copyright": "Direitos autorais"

package/src/bundles/bundled-translations.pt-PT.json

@@ -1274,6 +1274,8 @@
     "iconColor": "Cor do ícone",
     "iconBackgroundColor": "Cor de fundo do ícone",
     "subNavBackgroundColor": "Cor de fundo da navegação inferior",
+    "navigationTypeBar": "Barra de navegação",
+    "navigationTypeHamburger": "Menu hambúrguer",
     "allDisplayName": "Tudo",
     "generalDisplayName": "Geral",
     "socialLinksDisplayName": "Redes sociais",
@@ -1859,6 +1861,9 @@
     "showNavigationBelow": "Mostrar a navegação por baixo do logótipo",
     "previewDescription": "A pré-visualização não está disponível neste tamanho de ecrã.",
     "navigationStyle": "Estilo de navegação",
+    "navigationType": "Tipo de navegação",
+    "menuStyle": "Estilo de menu",
+    "iconStyle": "Estilo de Ícone",
     "logoSize": "Tamanho do logótipo",
     "socialLinks": "Links de redes sociais",
     "copyright": "Direitos de autor"

package/src/shared/navigation-style-settings/components/navigation-style-settings/NavigationStyleSettings.vue

@@ -2,12 +2,6 @@
   <div data-component="navigation-style-settings">
     <!-- Start text style fields -->
     <div class="tw-mb-4">
-      <span
-        class="tw-font-sans tw-font-bold tw-text-secondary-800 tw-text-sm tw-mb-2"
-      >
-        {{ commonTr('fontSettings') }}
-      </span>
-
       <TextStyleField
         v-show="value.displayType.includes('hamburger')"
         id="navigation-hamburger-default-button-style"

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

@@ -27,7 +27,13 @@
       @changed="toggleSectionCollapsed('navigation')"
     >
       <HeaderNavigationType
+        :navigation-type="navigationType"
+        :on-select="handleHeaderNavigationTypeChange"
+      />
+
+      <HeaderNavigationStyle
         :navigation-display-type="navigation.displayType"
+        :navigation-type="navigationType"
         :available-navigation-style-configs="availableNavigationStyleConfigs"
         :on-select="handleHeaderNavigationDisplayTypeChange"
       />
@@ -144,6 +150,7 @@ import {
 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 HeaderNavigationStyle from '../page-settings-section-styles/HeaderNavigationStyle.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';
@@ -160,6 +167,7 @@ export default {
     Toggle,
     HeaderDisplayStyle,
     HeaderNavigationType,
+    HeaderNavigationStyle,
     NavigationStyleSettings,
     LogoSelection,
     LogoSizeSlider,

package/src/shared/page-settings/components/page-settings-section-styles/HeaderNavigationStyle.vue

@@ -0,0 +1,95 @@
+<template>
+  <div
+    v-if="options.length > 1"
+    data-component="header-navigation-style"
+    class="tw-w-full tw-mb-4"
+  >
+    <p
+      class="tw-font-sans tw-font-bold tw-text-secondary-800 tw-text-sm tw-mb-2"
+    >
+      {{ tr(`pageSettingsSection.${sectionLabelKey}`) }}
+    </p>
+    <ButtonGroup
+      variant="icon"
+      :columns="numOfColumns"
+      btn-style-variant="compressed"
+      :options="options"
+      class="tw-w-full"
+      :class="{ 'icon-style-options': isHamburgerType }"
+      @on-select="handleSelect"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue';
+import { ButtonGroup } from '@designcrowd/fe-shared-lib';
+import { getNavigationType, NAVIGATION_TYPE } from '@brand-page';
+import type { NavigationType } from '@brand-page';
+import type { NavigationStyleConfig } from '@brand-page-maker/models/navigation-style-configs';
+import type { ButtonGroupOption } from '@brand-page-maker/models/button-group.model';
+import { tr } from '@src/composables/useTranslate';
+
+interface Props {
+  availableNavigationStyleConfigs: NavigationStyleConfig[];
+  navigationDisplayType: string;
+  navigationType: NavigationType;
+  onSelect: (navigationDisplayType: string) => void;
+}
+
+const props = defineProps<Props>();
+
+const options = computed(() =>
+  props.availableNavigationStyleConfigs
+    .filter(
+      (config) =>
+        getNavigationType(config.displayType) === props.navigationType,
+    )
+    .map((config) => ({
+      ...config.buttonGroupOption,
+      isSelected:
+        props.navigationDisplayType === config.buttonGroupOption.value,
+    })),
+);
+
+const isHamburgerType = computed(
+  () => props.navigationType === NAVIGATION_TYPE.hamburger,
+);
+
+const sectionLabelKey = computed(() =>
+  isHamburgerType.value ? 'iconStyle' : 'menuStyle',
+);
+
+const numOfColumns = computed(() => options.value.length);
+
+const handleSelect = (option: ButtonGroupOption) => {
+  props.onSelect(option.value);
+};
+</script>
+<style scoped>
+/* Icon-style boxes follow Figma's 84x56 proportion and scale with the sidebar:
+   the grid's 1fr columns set the width, aspect-ratio keeps the 3:2 box, and the
+   icon is sized as a width percentage (Figma: 32px icon / 60px content = 53.33%).
+   Width percentages (not a height:100% chain) because iOS Safari doesn't resolve
+   percentage heights inside aspect-ratio boxes — the icon blew up to full tile
+   width on mobile. Only the 12px padding is a fixed value. */
+.icon-style-options :deep(button) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 3 / 2;
+  padding: 12px !important;
+}
+
+.icon-style-options :deep(button div) {
+  width: 100%;
+}
+
+/* `div > svg` targets only the outer Icon svg (the nested inner svg's parent
+   is an svg), so the percentage isn't applied twice. */
+.icon-style-options :deep(button div > svg) {
+  display: block;
+  width: 50%;
+  height: auto;
+  margin: 0 auto;
+}
+</style>

package/src/shared/page-settings/components/page-settings-section-styles/HeaderNavigationType.vue

@@ -1,16 +1,20 @@
 <template>
-  <div data-component="header-navigation-type" class="tw-w-full tw-mb-2">
+  <div
+    data-component="header-navigation-type"
+    class="tw-w-full tw-mt-2 tw-mb-4"
+  >
     <p
       class="tw-font-sans tw-font-bold tw-text-secondary-800 tw-text-sm tw-mb-2"
     >
-      {{ tr('pageSettingsSection.navigationStyle') }}
+      {{ tr('pageSettingsSection.navigationType') }}
     </p>
     <ButtonGroup
       variant="icon"
-      :columns="3"
+      :columns="2"
       btn-style-variant="compressed"
+      :title-inside-button="true"
       :options="options"
-      class="tw-w-full"
+      class="tw-w-full navigation-type-options"
       @on-select="handleSelect"
     />
   </div>
@@ -18,27 +22,35 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { ButtonGroup } from '@designcrowd/fe-shared-lib';
-import type { NavigationStyleConfig } from '@brand-page-maker/models/navigation-style-configs';
+import { navigationTypeOptions } from '@brand-page-maker/models/navigation-style-configs';
+import type { NavigationType } from '@brand-page';
 import type { ButtonGroupOption } from '@brand-page-maker/models/button-group.model';
 import { tr } from '@src/composables/useTranslate';
 
 interface Props {
-  availableNavigationStyleConfigs: NavigationStyleConfig[];
-  navigationDisplayType: string;
-  onSelect: (navigationDisplayType: string) => void;
+  navigationType: NavigationType;
+  onSelect: (navigationType: NavigationType) => void;
 }
 
 const props = defineProps<Props>();
 
 const options = computed(() =>
-  props.availableNavigationStyleConfigs.map((config) => {
-    config.buttonGroupOption.isSelected =
-      props.navigationDisplayType === config.buttonGroupOption.value;
-    return config.buttonGroupOption;
-  }),
+  navigationTypeOptions().map((option) => ({
+    ...option,
+    isSelected: option.value === props.navigationType,
+  })),
 );
 
 const handleSelect = (option: ButtonGroupOption) => {
-  props.onSelect(option.value);
+  props.onSelect(option.value as NavigationType);
 };
 </script>
+<style scoped>
+.navigation-type-options :deep(button) {
+  padding-top: 8px !important;
+}
+
+.navigation-type-options :deep(button > p) {
+  text-transform: none;
+}
+</style>

package/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.mixin.ts

@@ -11,6 +11,7 @@ import type {
 import type {
   LogoTheme,
   NavigationDisplayType,
+  NavigationType,
   LinksItem,
   HeaderDisplayStyle,
   FooterDisplayStyle,
@@ -30,6 +31,8 @@ import {
   LOGO_SLIDER_MOBILE_MAX,
   LOGO_SLIDER_MOBILE_MIN,
   VIEWPORTS,
+  getNavigationType,
+  NAVIGATION_TYPE_DEFAULT_DISPLAY_TYPE,
 } from '@brand-page';
 import type {
   ContentItemFieldSettings,
@@ -157,6 +160,9 @@ export default defineComponent({
     header(): PageHeaderDesktop | PageHeaderMobile {
       return this.sections[PAGE_SECTIONS.header][this.viewport];
     },
+    navigationType(): NavigationType {
+      return getNavigationType(this.navigation.displayType);
+    },
     footer(): PageFooterDesktop | PageFooterMobile {
       return this.sections[PAGE_SECTIONS.footer][this.viewport];
     },
@@ -357,13 +363,39 @@ export default defineComponent({
     },
     handleHeaderNavigationDisplayTypeChange(
       displayType: NavigationDisplayType,
-    ) {
+    ): void {
+      this.pageSettingsStore.setPreviousSelectedNavigationDisplayType(
+        this.viewport,
+        displayType,
+      );
+
       this.navigationStyleSettingsStore.setDisplayType({
         section: PAGE_SECTIONS.header,
         displayType: displayType,
         viewport: this.viewport,
       });
     },
+    handleHeaderNavigationTypeChange(navigationType: NavigationType): void {
+      if (this.navigationType === navigationType) {
+        return;
+      }
+
+      // remember the outgoing style (which may be the draft's persisted value,
+      // never selected this session) so switching back restores it
+      this.pageSettingsStore.setPreviousSelectedNavigationDisplayType(
+        this.viewport,
+        this.navigation.displayType,
+      );
+
+      const remembered =
+        this.pageSettingsStore.previousSelectedNavigationDisplayTypes?.[
+          this.viewport
+        ]?.[navigationType];
+
+      this.handleHeaderNavigationDisplayTypeChange(
+        remembered || NAVIGATION_TYPE_DEFAULT_DISPLAY_TYPE[navigationType],
+      );
+    },
     handleHeaderNavigationStyleOptionValueChange({
       option,
       value,

package/src/shared/page-settings/components/page-settings-section-styles/i18n/page-settings-section.de-DE.json

@@ -1,10 +1,13 @@
 {
-  "pageSettingsSection" : {
-    "showNavigationBelow" : "Navigation unter dem Logo anzeigen",
-    "previewDescription" : "Eine Vorschau ist für diese Bildschirmgröße nicht verfügbar.",
-    "navigationStyle" : "Navigationsstil",
-    "logoSize" : "Logogröße",
-    "socialLinks" : "Social-Media-Links",
-    "copyright" : "Copyright"
+  "pageSettingsSection": {
+    "showNavigationBelow": "Navigation unter dem Logo anzeigen",
+    "previewDescription": "Eine Vorschau ist für diese Bildschirmgröße nicht verfügbar.",
+    "navigationStyle": "Navigationsstil",
+    "navigationType": "Navigationstyp",
+    "menuStyle": "Menüstil",
+    "iconStyle": "Symbol-Stil",
+    "logoSize": "Logogröße",
+    "socialLinks": "Social-Media-Links",
+    "copyright": "Copyright"
   }
 }

package/src/shared/page-settings/components/page-settings-section-styles/i18n/page-settings-section.es-ES.json

@@ -1,10 +1,13 @@
 {
-  "pageSettingsSection" : {
-    "showNavigationBelow" : "Muestra la navegación debajo del logo",
-    "previewDescription" : "La vista previa no está disponible en este tamaño de pantalla.",
-    "navigationStyle" : "Estilo de navegación",
-    "logoSize" : "Tamaño del logo",
-    "socialLinks" : "Enlaces a redes sociales",
-    "copyright" : "Derechos de autor"
+  "pageSettingsSection": {
+    "showNavigationBelow": "Muestra la navegación debajo del logo",
+    "previewDescription": "La vista previa no está disponible en este tamaño de pantalla.",
+    "navigationStyle": "Estilo de navegación",
+    "navigationType": "Tipo de navegación",
+    "menuStyle": "Estilo de menú",
+    "iconStyle": "Estilo de icono",
+    "logoSize": "Tamaño del logo",
+    "socialLinks": "Enlaces a redes sociales",
+    "copyright": "Derechos de autor"
   }
 }

package/src/shared/page-settings/components/page-settings-section-styles/i18n/page-settings-section.fr-CA.json

@@ -1,10 +1,13 @@
 {
-  "pageSettingsSection" : {
-    "showNavigationBelow" : "Afficher la navigation sous le logo",
-    "previewDescription" : "L'aperçu n'est pas disponible pour cette taille d'écran.",
-    "navigationStyle" : "Style de navigation",
-    "logoSize" : "Taille du logo",
-    "socialLinks" : "Liens vers les réseaux sociaux",
-    "copyright" : "Droits d’auteur"
+  "pageSettingsSection": {
+    "showNavigationBelow": "Afficher la navigation sous le logo",
+    "previewDescription": "L'aperçu n'est pas disponible pour cette taille d'écran.",
+    "navigationStyle": "Style de navigation",
+    "navigationType": "Type de navigation",
+    "menuStyle": "Style de menu",
+    "iconStyle": "Style d'icône",
+    "logoSize": "Taille du logo",
+    "socialLinks": "Liens vers les réseaux sociaux",
+    "copyright": "Droits d’auteur"
   }
 }