@designcrowd/library.brand-page 6.1.10 → 6.1.11

package/lib/src/shared/content-settings/components/content-settings/ContentSettings.mixin.d.ts

@@ -565,6 +565,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         }): void;
         collapseAllSections(): void;
         setPreviousSelectedDisplayStyle(viewport: string, displayStyle: string): void;
+        setPreviousSelectedNavigationDisplayType(viewport: string, displayType: string): void;
     }>;
     sideBarStore: import("pinia").Store<"uiSideBar", import("../../../side-bar/store").SideBarState, {}, {
         setBrandPageSettingsTabVisibility(payload: {

package/lib/src/shared/content-settings/components/content-settings/ReplaceImageSettingsForContent.mixin.d.ts

@@ -574,6 +574,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         }): void;
         collapseAllSections(): void;
         setPreviousSelectedDisplayStyle(viewport: string, displayStyle: string): void;
+        setPreviousSelectedNavigationDisplayType(viewport: string, displayType: string): void;
     }>;
     brandPageMakerStore: import("pinia").Store<"brandPageMaker", import("@brand-page-maker/stores").BrandPageMakerState, {
         contentErrorCount(): number;

package/lib/src/shared/content-settings/components/content-settings-item/ContentSettingsItemField.mixin.d.ts

@@ -796,6 +796,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }): void;
         collapseAllSections(): void;
         setPreviousSelectedDisplayStyle(viewport: string, displayStyle: string): void;
+        setPreviousSelectedNavigationDisplayType(viewport: string, displayType: string): void;
     }>;
     uiLogoSettingsStore: import("pinia").Store<"uiLogoSettings", import("../../../logo-settings/store").LogoSettingsState, {
         selectedLogoImageUrl(): {

package/lib/src/shared/content-settings/components/payment-config-field/PaymentConfigField.mixin.d.ts

@@ -619,6 +619,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }): void;
         collapseAllSections(): void;
         setPreviousSelectedDisplayStyle(viewport: string, displayStyle: string): void;
+        setPreviousSelectedNavigationDisplayType(viewport: string, displayType: string): void;
     }>;
 }, {
     selectedPaymentConfig: BrandPagePaymentConfig | undefined;

package/lib/src/shared/logo-settings/components/LogoSettings.mixin.d.ts

@@ -786,6 +786,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         }): void;
         collapseAllSections(): void;
         setPreviousSelectedDisplayStyle(viewport: string, displayStyle: string): void;
+        setPreviousSelectedNavigationDisplayType(viewport: string, displayType: string): void;
     }>;
 }, {}, {}, {
     onLogoUpload(response: CreateWebsiteByoUploadResult): Promise<void>;

package/lib/src/shared/page-settings/components/new-page-modal/NewPageModal.mixin.d.ts

@@ -75,6 +75,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         }): void;
         collapseAllSections(): void;
         setPreviousSelectedDisplayStyle(viewport: string, displayStyle: string): void;
+        setPreviousSelectedNavigationDisplayType(viewport: string, displayType: string): void;
     }>;
     pageNavigationStore: import("pinia").Store<"pageNavigation", import("../../../page-navigation/store/page-navigation-store").PageNavigationState, {
         nav(): import("../../../../brand-page").NavModel;

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

@@ -4018,6 +4018,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         }): void;
         collapseAllSections(): void;
         setPreviousSelectedDisplayStyle(viewport: string, displayStyle: string): void;
+        setPreviousSelectedNavigationDisplayType(viewport: string, displayType: string): void;
     }>;
     pageNavigationStore: import("pinia").Store<"pageNavigation", import("../../../page-navigation/store/page-navigation-store").PageNavigationState, {
         nav(): import("@brand-page").NavModel;

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

@@ -1,7 +1,7 @@
 import type { PropType } from 'vue';
 import type { PageSectionStyleOption } from '@brand-page-maker/models/page-section-style.model';
 import type { NavigationStyleOptionValueChangeEvent, PageSection, PageSettingsFontSettingsOption } from '../../models';
-import type { LogoTheme, NavigationDisplayType, LinksItem, HeaderDisplayStyle, FooterDisplayStyle, ViewportsType, NavigationDesktop, NavigationMobile, PageHeaderDesktop, PageHeaderMobile, PageFooterDesktop, PageFooterMobile, LogoImageModel, LogoViewModel } from '@brand-page';
+import type { LogoTheme, NavigationDisplayType, NavigationType, LinksItem, HeaderDisplayStyle, FooterDisplayStyle, ViewportsType, NavigationDesktop, NavigationMobile, PageHeaderDesktop, PageHeaderMobile, PageFooterDesktop, PageFooterMobile, LogoImageModel, LogoViewModel } from '@brand-page';
 import type { ContentItemFieldSettings, UpdateItemValuePayload } from '../../../content-settings/models';
 import type { PageSettingsStateSectionStyles } from '../../store';
 import type { DisplayLogoDraftAsset } from '../../../../clients/models';
@@ -3307,6 +3307,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }): void;
         collapseAllSections(): void;
         setPreviousSelectedDisplayStyle(viewport: string, displayStyle: string): void;
+        setPreviousSelectedNavigationDisplayType(viewport: string, displayType: string): void;
     }>;
     styleSettingsStore: import("pinia").Store<"uiStyleSettings", import("../../../style-settings/store").StyleSettingsState, {
         availableTextFontFamilyOptions(): import("../../../style-settings/models").StyleTextFontFamilyOption[];
@@ -4648,6 +4649,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     isRenderAfterLogo(): any;
     navigation(): NavigationDesktop | NavigationMobile;
     header(): PageHeaderDesktop | PageHeaderMobile;
+    navigationType(): NavigationType;
     footer(): PageFooterDesktop | PageFooterMobile;
     showDeviceWarning(): boolean;
     showFooterDisplayStyle(): boolean;
@@ -4689,6 +4691,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     findSelectedViewport(): any;
     handleHeaderDisplayStyleChange(displayStyle: HeaderDisplayStyle): void;
     handleHeaderNavigationDisplayTypeChange(displayType: NavigationDisplayType): void;
+    handleHeaderNavigationTypeChange(navigationType: NavigationType): void;
     handleHeaderNavigationStyleOptionValueChange({ option, value, }: NavigationStyleOptionValueChangeEvent): void;
     handleFooterDisplayStyleChange(displayStyle: FooterDisplayStyle): void;
     onCopyrightTextChange({ value }: {

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

@@ -1,7 +1,7 @@
 import { defineComponent, computed } from 'vue';
 import { PAGE_SECTION_STYLE_OPTIONS } from '@brand-page-maker/models/page-section-style.model';
 import { PAGE_SECTIONS } from '../../models';
-import { LOGO_SLIDER_DESKTOP_MAX, LOGO_SLIDER_DESKTOP_MIN, LOGO_SLIDER_MOBILE_MAX, LOGO_SLIDER_MOBILE_MIN, VIEWPORTS, } from '@brand-page';
+import { LOGO_SLIDER_DESKTOP_MAX, LOGO_SLIDER_DESKTOP_MIN, LOGO_SLIDER_MOBILE_MAX, LOGO_SLIDER_MOBILE_MIN, VIEWPORTS, getNavigationType, NAVIGATION_TYPE_DEFAULT_DISPLAY_TYPE, } from '@brand-page';
 import { UI_DEVICE_MODES, UI_EVENT_SOURCES } from '../../../models';
 import { useUiPageSettingsStore } from '../../store';
 import { useUiNavigationStyleSettingsStore } from '../../../navigation-style-settings/store';
@@ -99,6 +99,9 @@ export default defineComponent({
         header() {
             return this.sections[PAGE_SECTIONS.header][this.viewport];
         },
+        navigationType() {
+            return getNavigationType(this.navigation.displayType);
+        },
         footer() {
             return this.sections[PAGE_SECTIONS.footer][this.viewport];
         },
@@ -264,12 +267,23 @@ export default defineComponent({
             });
         },
         handleHeaderNavigationDisplayTypeChange(displayType) {
+            this.pageSettingsStore.setPreviousSelectedNavigationDisplayType(this.viewport, displayType);
             this.navigationStyleSettingsStore.setDisplayType({
                 section: PAGE_SECTIONS.header,
                 displayType: displayType,
                 viewport: this.viewport,
             });
         },
+        handleHeaderNavigationTypeChange(navigationType) {
+            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, }) {
             this.navigationStyleSettingsStore.setNavigationStyleOptionValue({
                 section: PAGE_SECTIONS.header,

package/lib/src/shared/page-settings/store/page-settings-store.d.ts

@@ -1,5 +1,6 @@
 import type { ContentItem } from '../../content-settings/models';
 import { PageHeaderDesktop, PageHeaderMobile, PageFooterDesktop, PageFooterMobile, VIEWPORTS } from '@brand-page';
+import type { NavigationType } from '@brand-page';
 import type { Content, ImageGalleryItem, LinksItem, LogoImageModel, ViewportsType, LogoTemplateImageModel, BrandPagePaymentConfig, BrandPagePaymentConfigCurrency } from '@brand-page';
 import type { ContentPage } from '../models';
 import { PAGE_SECTIONS } from '../models';
@@ -32,6 +33,10 @@ export interface PageSettingsState {
         [VIEWPORTS.desktop]: string[];
         [VIEWPORTS.mobile]: string[];
     };
+    previousSelectedNavigationDisplayTypes?: {
+        [VIEWPORTS.desktop]: Partial<Record<NavigationType, string>>;
+        [VIEWPORTS.mobile]: Partial<Record<NavigationType, string>>;
+    };
 }
 export declare const useUiPageSettingsStore: import("pinia").StoreDefinition<"uiPageSettings", PageSettingsState, {
     canAddPage(): boolean;
@@ -107,4 +112,5 @@ export declare const useUiPageSettingsStore: import("pinia").StoreDefinition<"ui
     }): void;
     collapseAllSections(): void;
     setPreviousSelectedDisplayStyle(viewport: string, displayStyle: string): void;
+    setPreviousSelectedNavigationDisplayType(viewport: string, displayType: string): void;
 }>;

package/lib/src/shared/page-settings/store/page-settings-store.js

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { PageHeaderDesktop, PageHeaderMobile, PageFooterDesktop, PageFooterMobile, VIEWPORTS, } from '@brand-page';
+import { PageHeaderDesktop, PageHeaderMobile, PageFooterDesktop, PageFooterMobile, VIEWPORTS, getNavigationType, } from '@brand-page';
 import { v4 as uuid } from 'uuid';
 import { PAGE_SECTIONS } from '../models';
 import { navigateToPageByPageId } from '@brand-page-maker/routing';
@@ -41,6 +41,10 @@ export const useUiPageSettingsStore = defineStore('uiPageSettings', {
             [VIEWPORTS.desktop]: [],
             [VIEWPORTS.mobile]: [],
         },
+        previousSelectedNavigationDisplayTypes: {
+            [VIEWPORTS.desktop]: {},
+            [VIEWPORTS.mobile]: {},
+        },
     }),
     actions: {
         setState({ newState, }) {
@@ -244,6 +248,11 @@ export const useUiPageSettingsStore = defineStore('uiPageSettings', {
             });
         },
         setPreviousSelectedDisplayStyle(viewport, displayStyle) {
+            // guard against a setState payload wiping the initialized default
+            this.previousSelectedDisplayStyles ??= {
+                [VIEWPORTS.desktop]: [],
+                [VIEWPORTS.mobile]: [],
+            };
             // filter out duplicate
             this.previousSelectedDisplayStyles[viewport] =
                 this.previousSelectedDisplayStyles[viewport].filter((x) => x !== displayStyle);
@@ -253,6 +262,18 @@ export const useUiPageSettingsStore = defineStore('uiPageSettings', {
                 ...this.previousSelectedDisplayStyles[viewport].splice(0, 1),
             ];
         },
+        setPreviousSelectedNavigationDisplayType(viewport, displayType) {
+            // guard against a setState payload wiping the initialized default
+            this.previousSelectedNavigationDisplayTypes ??= {
+                [VIEWPORTS.desktop]: {},
+                [VIEWPORTS.mobile]: {},
+            };
+            // one remembered style per navigation type, so switching type restores it
+            this.previousSelectedNavigationDisplayTypes[viewport] = {
+                ...this.previousSelectedNavigationDisplayTypes[viewport],
+                [getNavigationType(displayType)]: displayType,
+            };
+        },
     },
     getters: {
         // Single source of truth for the page-limit paywall. Admin-maker (template

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "6.1.10",
+  "version": "6.1.11",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",
@@ -71,7 +71,7 @@
   },
   "dependencies": {
     "@ckpack/vue-color": "1.6.0",
-    "@designcrowd/fe-shared-lib": "2.0.9",
+    "@designcrowd/fe-shared-lib": "2.0.22",
     "@pinia/nuxt": "0.11.3",
     "@storybook/react": "9.0.4",
     "@tiptap/extension-bubble-menu": "3.28.0",

package/src/brand-page/constants/index.ts

@@ -5,4 +5,5 @@ export * from './misc.constants';
 export * from './logo.constants';
 export * from './sections/header-display.constants';
 export * from './sections/navigation-display.constants';
+export * from './sections/navigation-type.constants';
 export * from './sections/footer-display.constants';

package/src/brand-page/constants/sections/header-display.constants.ts

@@ -6,6 +6,7 @@ import {
 } from '../misc.constants';
 import type { ButtonGroupOption } from '@brand-page-maker/models/button-group.model';
 import { NAVIGATION_DISPLAY } from './navigation-display.constants';
+import type { NavigationType } from './navigation-type.constants';
 
 export const HEADER_DISPLAY = {
   /** @deprecated */
@@ -53,7 +54,7 @@ export type HeaderDisplayStyle = PageSectionDisplayStyle;
 
 interface HeaderDisplayStyleConfig {
   viewMode: 'desktop' | 'mobile';
-  navType: 'tabs' | 'hamburger';
+  navType: NavigationType;
   supportLogo: boolean;
   supportedNavTypes: string[]; // NAVIGATION_DISPLAY
   option: ButtonGroupOption;
@@ -69,7 +70,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS: HeaderDisplayStyleConfig[] = [
     option: {
       value: HEADER_DISPLAY.DESKTOP_TAB_1,
       iconName: 'header-desktop-nav-style-tab-display-style-1',
-      iconViewBox: '0 0 169 57',
+      iconViewBox: '0 0 160 56',
       dataAttribute: HEADER_DISPLAY.DESKTOP_TAB_1,
       isSelected: false,
     },
@@ -82,7 +83,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS: HeaderDisplayStyleConfig[] = [
     option: {
       value: HEADER_DISPLAY.DESKTOP_TAB_2,
       iconName: 'header-desktop-nav-style-tab-display-style-2',
-      iconViewBox: '0 0 169 57',
+      iconViewBox: '0 0 160 56',
       dataAttribute: HEADER_DISPLAY.DESKTOP_TAB_2,
       isSelected: false,
     },
@@ -95,7 +96,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS: HeaderDisplayStyleConfig[] = [
     option: {
       value: HEADER_DISPLAY.DESKTOP_TAB_3,
       iconName: 'header-desktop-nav-style-tab-display-style-3',
-      iconViewBox: '0 0 169 57',
+      iconViewBox: '0 0 160 56',
       dataAttribute: HEADER_DISPLAY.DESKTOP_TAB_3,
       isSelected: false,
     },
@@ -108,7 +109,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS: HeaderDisplayStyleConfig[] = [
     option: {
       value: HEADER_DISPLAY.DESKTOP_TAB_4,
       iconName: 'header-desktop-nav-style-tab-display-style-4',
-      iconViewBox: '0 0 169 57',
+      iconViewBox: '0 0 160 56',
       dataAttribute: HEADER_DISPLAY.DESKTOP_TAB_4,
       isSelected: false,
     },
@@ -121,7 +122,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS: HeaderDisplayStyleConfig[] = [
     option: {
       value: HEADER_DISPLAY.DESKTOP_TAB_5,
       iconName: 'header-desktop-nav-style-tab-display-style-5',
-      iconViewBox: '0 0 169 57',
+      iconViewBox: '0 0 160 56',
       dataAttribute: HEADER_DISPLAY.DESKTOP_TAB_5,
       isSelected: false,
     },
@@ -134,7 +135,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS: HeaderDisplayStyleConfig[] = [
     option: {
       value: HEADER_DISPLAY.DESKTOP_TAB_6,
       iconName: 'header-desktop-nav-style-tab-display-style-6',
-      iconViewBox: '0 0 169 57',
+      iconViewBox: '0 0 160 56',
       dataAttribute: HEADER_DISPLAY.DESKTOP_TAB_6,
       isSelected: false,
     },
@@ -148,7 +149,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS: HeaderDisplayStyleConfig[] = [
     option: {
       value: HEADER_DISPLAY.DESKTOP_TAB_NO_LOGO_1,
       iconName: 'header-nav-style-tab-display-style-no-logo-1',
-      iconViewBox: '0 0 169 75',
+      iconViewBox: '0 0 160 56',
       dataAttribute: HEADER_DISPLAY.DESKTOP_TAB_NO_LOGO_1,
       isSelected: false,
     },
@@ -161,7 +162,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS: HeaderDisplayStyleConfig[] = [
     option: {
       value: HEADER_DISPLAY.DESKTOP_TAB_NO_LOGO_2,
       iconName: 'header-nav-style-tab-display-style-no-logo-2',
-      iconViewBox: '0 0 169 75',
+      iconViewBox: '0 0 160 56',
       dataAttribute: HEADER_DISPLAY.DESKTOP_TAB_NO_LOGO_2,
       isSelected: false,
     },
@@ -174,7 +175,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS: HeaderDisplayStyleConfig[] = [
     option: {
       value: HEADER_DISPLAY.DESKTOP_TAB_NO_LOGO_3,
       iconName: 'header-nav-style-tab-display-style-no-logo-3',
-      iconViewBox: '0 0 169 75',
+      iconViewBox: '0 0 160 56',
       dataAttribute: HEADER_DISPLAY.DESKTOP_TAB_NO_LOGO_3,
       isSelected: false,
     },
@@ -193,7 +194,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS: HeaderDisplayStyleConfig[] = [
     option: {
       value: HEADER_DISPLAY.DESKTOP_HAMBURGER_1,
       iconName: 'header-desktop-nav-style-hamburger-display-style-1',
-      iconViewBox: '0 0 169 57',
+      iconViewBox: '0 0 160 56',
       dataAttribute: HEADER_DISPLAY.DESKTOP_HAMBURGER_1,
       isSelected: false,
     },
@@ -211,7 +212,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS: HeaderDisplayStyleConfig[] = [
     option: {
       value: HEADER_DISPLAY.DESKTOP_HAMBURGER_2,
       iconName: 'header-desktop-nav-style-hamburger-display-style-2',
-      iconViewBox: '0 0 169 57',
+      iconViewBox: '0 0 160 56',
       dataAttribute: HEADER_DISPLAY.DESKTOP_HAMBURGER_2,
       isSelected: false,
     },
@@ -230,7 +231,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS: HeaderDisplayStyleConfig[] = [
     option: {
       value: HEADER_DISPLAY.DESKTOP_HAMBURGER_NO_LOGO_1,
       iconName: 'header-nav-style-hamburger-display-style-no-logo-1',
-      iconViewBox: '0 0 169 75',
+      iconViewBox: '0 0 160 56',
       dataAttribute: HEADER_DISPLAY.DESKTOP_HAMBURGER_NO_LOGO_1,
       isSelected: false,
     },
@@ -248,7 +249,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS: HeaderDisplayStyleConfig[] = [
     option: {
       value: HEADER_DISPLAY.DESKTOP_HAMBURGER_NO_LOGO_2,
       iconName: 'header-nav-style-hamburger-display-style-no-logo-2',
-      iconViewBox: '0 0 169 75',
+      iconViewBox: '0 0 160 56',
       dataAttribute: HEADER_DISPLAY.DESKTOP_HAMBURGER_NO_LOGO_2,
       isSelected: false,
     },
@@ -266,7 +267,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS: HeaderDisplayStyleConfig[] = [
     option: {
       value: HEADER_DISPLAY.DESKTOP_HAMBURGER_NO_LOGO_3,
       iconName: 'header-nav-style-hamburger-display-style-no-logo-3',
-      iconViewBox: '0 0 169 75',
+      iconViewBox: '0 0 160 56',
       dataAttribute: HEADER_DISPLAY.DESKTOP_HAMBURGER_NO_LOGO_3,
       isSelected: false,
     },
@@ -280,7 +281,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS: HeaderDisplayStyleConfig[] = [
     option: {
       value: HEADER_DISPLAY.MOBILE_TAB_1,
       iconName: 'header-mobile-nav-style-tab-display-style-1',
-      iconViewBox: '0 0 169 57',
+      iconViewBox: '0 0 160 56',
       dataAttribute: HEADER_DISPLAY.MOBILE_TAB_1,
       isSelected: false,
     },
@@ -293,7 +294,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS: HeaderDisplayStyleConfig[] = [
     option: {
       value: HEADER_DISPLAY.MOBILE_TAB_2,
       iconName: 'header-mobile-nav-style-tab-display-style-2',
-      iconViewBox: '0 0 169 57',
+      iconViewBox: '0 0 160 56',
       dataAttribute: HEADER_DISPLAY.MOBILE_TAB_2,
       isSelected: false,
     },
@@ -307,7 +308,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS: HeaderDisplayStyleConfig[] = [
     option: {
       value: HEADER_DISPLAY.MOBILE_TAB_NO_LOGO_1,
       iconName: 'header-nav-style-tab-display-style-no-logo-2',
-      iconViewBox: '0 0 169 75',
+      iconViewBox: '0 0 160 56',
       dataAttribute: HEADER_DISPLAY.MOBILE_TAB_NO_LOGO_1,
       isSelected: false,
     },
@@ -326,7 +327,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS: HeaderDisplayStyleConfig[] = [
     option: {
       value: HEADER_DISPLAY.MOBILE_HAMBURGER_1,
       iconName: 'header-mobile-nav-style-hamburger-display-style-1',
-      iconViewBox: '0 0 169 57',
+      iconViewBox: '0 0 160 56',
       dataAttribute: HEADER_DISPLAY.MOBILE_HAMBURGER_1,
       isSelected: false,
     },
@@ -344,7 +345,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS: HeaderDisplayStyleConfig[] = [
     option: {
       value: HEADER_DISPLAY.MOBILE_HAMBURGER_2,
       iconName: 'header-mobile-nav-style-hamburger-display-style-2',
-      iconViewBox: '0 0 169 57',
+      iconViewBox: '0 0 160 56',
       dataAttribute: HEADER_DISPLAY.MOBILE_HAMBURGER_2,
       isSelected: false,
     },
@@ -362,7 +363,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS: HeaderDisplayStyleConfig[] = [
     option: {
       value: HEADER_DISPLAY.MOBILE_HAMBURGER_3,
       iconName: 'header-mobile-nav-style-hamburger-display-style-3',
-      iconViewBox: '0 0 169 57',
+      iconViewBox: '0 0 160 56',
       dataAttribute: HEADER_DISPLAY.MOBILE_HAMBURGER_3,
       isSelected: false,
     },
@@ -380,7 +381,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS: HeaderDisplayStyleConfig[] = [
     option: {
       value: HEADER_DISPLAY.MOBILE_HAMBURGER_4,
       iconName: 'header-mobile-nav-style-hamburger-display-style-4',
-      iconViewBox: '0 0 169 57',
+      iconViewBox: '0 0 160 56',
       dataAttribute: HEADER_DISPLAY.MOBILE_HAMBURGER_4,
       isSelected: false,
     },
@@ -399,7 +400,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS: HeaderDisplayStyleConfig[] = [
     option: {
       value: HEADER_DISPLAY.MOBILE_HAMBURGER_NO_LOGO_1,
       iconName: 'header-nav-style-hamburger-display-style-no-logo-1',
-      iconViewBox: '0 0 169 75',
+      iconViewBox: '0 0 160 56',
       dataAttribute: HEADER_DISPLAY.MOBILE_HAMBURGER_NO_LOGO_1,
       isSelected: false,
     },
@@ -417,7 +418,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS: HeaderDisplayStyleConfig[] = [
     option: {
       value: HEADER_DISPLAY.MOBILE_HAMBURGER_NO_LOGO_2,
       iconName: 'header-nav-style-hamburger-display-style-no-logo-2',
-      iconViewBox: '0 0 169 75',
+      iconViewBox: '0 0 160 56',
       dataAttribute: HEADER_DISPLAY.MOBILE_HAMBURGER_NO_LOGO_2,
       isSelected: false,
     },
@@ -435,7 +436,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS: HeaderDisplayStyleConfig[] = [
     option: {
       value: HEADER_DISPLAY.MOBILE_HAMBURGER_NO_LOGO_3,
       iconName: 'header-nav-style-hamburger-display-style-no-logo-3',
-      iconViewBox: '0 0 169 75',
+      iconViewBox: '0 0 160 56',
       dataAttribute: HEADER_DISPLAY.MOBILE_HAMBURGER_NO_LOGO_3,
       isSelected: false,
     },

package/src/brand-page/constants/sections/navigation-type.constants.test.ts

@@ -0,0 +1,53 @@
+import { NAVIGATION_DISPLAY } from './navigation-display.constants';
+import {
+  NAVIGATION_TYPE,
+  NAVIGATION_TYPE_DEFAULT_DISPLAY_TYPE,
+  getNavigationType,
+} from './navigation-type.constants';
+
+describe('getNavigationType', () => {
+  test.each([
+    [NAVIGATION_DISPLAY.TAB_1, NAVIGATION_TYPE.bar],
+    [NAVIGATION_DISPLAY.TAB_2, NAVIGATION_TYPE.bar],
+    [NAVIGATION_DISPLAY.HAMBURGER_1, NAVIGATION_TYPE.hamburger],
+    [NAVIGATION_DISPLAY.HAMBURGER_2, NAVIGATION_TYPE.hamburger],
+    [NAVIGATION_DISPLAY.HAMBURGER_3, NAVIGATION_TYPE.hamburger],
+    [NAVIGATION_DISPLAY.HAMBURGER_4, NAVIGATION_TYPE.hamburger],
+  ])('classifies modern display type %s as %s', (displayType, expected) => {
+    expect(getNavigationType(displayType)).toEqual(expected);
+  });
+
+  test.each([
+    [NAVIGATION_DISPLAY.tabs, NAVIGATION_TYPE.bar],
+    [NAVIGATION_DISPLAY.buttons, NAVIGATION_TYPE.bar],
+    [NAVIGATION_DISPLAY.hamburger, NAVIGATION_TYPE.hamburger],
+    [NAVIGATION_DISPLAY.hamburgerLight, NAVIGATION_TYPE.hamburger],
+    [NAVIGATION_DISPLAY.hamburgerLightHalf, NAVIGATION_TYPE.hamburger],
+    [NAVIGATION_DISPLAY.hamburgerRounded, NAVIGATION_TYPE.hamburger],
+  ])(
+    'classifies deprecated legacy display type %s as %s (backward compat)',
+    (displayType, expected) => {
+      expect(getNavigationType(displayType)).toEqual(expected);
+    },
+  );
+
+  test('falls back to substring classification for unknown persisted values', () => {
+    expect(getNavigationType('some-future-hamburger-style')).toEqual(
+      NAVIGATION_TYPE.hamburger,
+    );
+    expect(getNavigationType('some-future-tab-style')).toEqual(
+      NAVIGATION_TYPE.bar,
+    );
+    expect(getNavigationType('')).toEqual(NAVIGATION_TYPE.bar);
+  });
+});
+
+describe('NAVIGATION_TYPE_DEFAULT_DISPLAY_TYPE', () => {
+  test('each navigation type defaults to a display type of its own group', () => {
+    Object.entries(NAVIGATION_TYPE_DEFAULT_DISPLAY_TYPE).forEach(
+      ([navigationType, displayType]) => {
+        expect(getNavigationType(displayType)).toEqual(navigationType);
+      },
+    );
+  });
+});

package/src/brand-page/constants/sections/navigation-type.constants.ts

@@ -0,0 +1,48 @@
+import { NAVIGATION_DISPLAY } from './navigation-display.constants';
+import type { NavigationDisplayType } from './navigation-display.constants';
+
+export const NAVIGATION_TYPE = {
+  // 'tabs' matches the legacy persisted HEADER_DISPLAY_STYLE_CONFIGS.navType
+  // value — the key/value mismatch is load-bearing for backward compat.
+  bar: 'tabs',
+  hamburger: 'hamburger',
+} as const;
+
+export type NavigationType =
+  (typeof NAVIGATION_TYPE)[keyof typeof NAVIGATION_TYPE];
+
+// Exhaustive: TS forces every NAVIGATION_DISPLAY value (current + deprecated legacy) to be classified
+// into a group here, so a future style can't be added without deciding which group it belongs to.
+export const NAVIGATION_TYPE_BY_DISPLAY_TYPE: Record<
+  NavigationDisplayType,
+  NavigationType
+> = {
+  [NAVIGATION_DISPLAY.TAB_1]: NAVIGATION_TYPE.bar,
+  [NAVIGATION_DISPLAY.TAB_2]: NAVIGATION_TYPE.bar,
+  [NAVIGATION_DISPLAY.HAMBURGER_1]: NAVIGATION_TYPE.hamburger,
+  [NAVIGATION_DISPLAY.HAMBURGER_2]: NAVIGATION_TYPE.hamburger,
+  [NAVIGATION_DISPLAY.HAMBURGER_3]: NAVIGATION_TYPE.hamburger,
+  [NAVIGATION_DISPLAY.HAMBURGER_4]: NAVIGATION_TYPE.hamburger,
+  [NAVIGATION_DISPLAY.tabs]: NAVIGATION_TYPE.bar,
+  [NAVIGATION_DISPLAY.buttons]: NAVIGATION_TYPE.bar,
+  [NAVIGATION_DISPLAY.hamburger]: NAVIGATION_TYPE.hamburger,
+  [NAVIGATION_DISPLAY.hamburgerLight]: NAVIGATION_TYPE.hamburger,
+  [NAVIGATION_DISPLAY.hamburgerLightHalf]: NAVIGATION_TYPE.hamburger,
+  [NAVIGATION_DISPLAY.hamburgerRounded]: NAVIGATION_TYPE.hamburger,
+};
+
+export const NAVIGATION_TYPE_DEFAULT_DISPLAY_TYPE: Record<
+  NavigationType,
+  NavigationDisplayType
+> = {
+  [NAVIGATION_TYPE.bar]: NAVIGATION_DISPLAY.TAB_1,
+  [NAVIGATION_TYPE.hamburger]: NAVIGATION_DISPLAY.HAMBURGER_1,
+};
+
+// Falls back to a substring sniff for any value not in the map (e.g. a hand-edited
+// or not-yet-migrated draft) so this can never fail to classify a stored displayType.
+export const getNavigationType = (displayType: string): NavigationType =>
+  NAVIGATION_TYPE_BY_DISPLAY_TYPE[displayType as NavigationDisplayType] ??
+  (displayType.includes('hamburger')
+    ? NAVIGATION_TYPE.hamburger
+    : NAVIGATION_TYPE.bar);