@designcrowd/library.brand-page 5.17.24 → 5.17.25-ast-subnav-1

package/lib/src/{CreatedOnBrandCrowd-de-de-BNZPy6gb.js → CreatedOnBrandCrowd-de-de-A1LIY1JG.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-BFXrGmbh.js";
+import { _ as t } from "./lib-C3eglZr2.js";
 const i = {}, h = {
   width: "275",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-en-us-CDYK8a2c.js → CreatedOnBrandCrowd-en-us-DVloWK9E.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-BFXrGmbh.js";
+import { _ as t } from "./lib-C3eglZr2.js";
 const i = {}, h = {
   width: "251",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-es-es-DphVKlns.js → CreatedOnBrandCrowd-es-es-BtENFJW9.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-BFXrGmbh.js";
+import { _ as t } from "./lib-C3eglZr2.js";
 const i = {}, h = {
   width: "250",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-fr-B6h0Kz4w.js → CreatedOnBrandCrowd-fr-ca-0SsE1mKX.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-BFXrGmbh.js";
+import { _ as t } from "./lib-C3eglZr2.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-ca-B6h0Kz4w.js → CreatedOnBrandCrowd-fr-fr-0SsE1mKX.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-BFXrGmbh.js";
+import { _ as t } from "./lib-C3eglZr2.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-pt-Ul4cjCzn.js → CreatedOnBrandCrowd-pt-br-CUCW0hCq.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-BFXrGmbh.js";
+import { _ as t } from "./lib-C3eglZr2.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-br-Ul4cjCzn.js → CreatedOnBrandCrowd-pt-pt-CUCW0hCq.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-BFXrGmbh.js";
+import { _ as t } from "./lib-C3eglZr2.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnDcom-de-de-BgUISgrB.js → CreatedOnDcom-de-de-B6r9MkXB.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-BFXrGmbh.js";
+import { _ as e } from "./lib-C3eglZr2.js";
 const M = {}, Z = {
   width: "242",
   height: "36",

package/lib/src/{CreatedOnDcom-en-us-B9ndU3Ol.js → CreatedOnDcom-en-us-CGk1MSrt.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-BFXrGmbh.js";
+import { _ as e } from "./lib-C3eglZr2.js";
 const i = {}, M = {
   width: "231",
   height: "36",

package/lib/src/{CreatedOnDcom-es-es-ChU3xDaI.js → CreatedOnDcom-es-es-NuLxxhFL.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-BFXrGmbh.js";
+import { _ as e } from "./lib-C3eglZr2.js";
 const M = {}, Z = {
   width: "230",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-ca-R2QasTac.js → CreatedOnDcom-fr-ca-CEHyAXGc.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-BFXrGmbh.js";
+import { _ as e } from "./lib-C3eglZr2.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-fr-R5PO6IlI.js → CreatedOnDcom-fr-fr-XPf1Jn7E.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-BFXrGmbh.js";
+import { _ as e } from "./lib-C3eglZr2.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-br-DRRbRn6T.js → CreatedOnDcom-pt-br-DxL3djRr.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-BFXrGmbh.js";
+import { _ as M } from "./lib-C3eglZr2.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-pt-B-V3d_gi.js → CreatedOnDcom-pt-pt-D2N04Ne0.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-BFXrGmbh.js";
+import { _ as M } from "./lib-C3eglZr2.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/brand-page/components/navigation/navigation-side-menu/NavigationSideMenu.mixin.js

@@ -70,12 +70,16 @@ export default defineComponent({
             return navItem.relativePath === this.context.currentPageRelativePath;
         },
         getSubNavItemStyle(navItem) {
-            const baseStyle = this.isCurrentPage(navItem)
+            const isActive = this.isCurrentPage(navItem);
+            const baseStyle = isActive
                 ? this.selectedButtonStyle
                 : this.defaultButtonStyle;
             return {
                 ...baseStyle,
-                paddingLeft: '32px', // 16px additional indentation (base is 16px)
+                paddingLeft: '32px',
+                backgroundColor: isActive
+                    ? baseStyle.backgroundColor
+                    : this.styles.hamburgerMenuStyle.subNavBackgroundColor ?? '#ffffff',
             };
         },
         closeSideMenu() {

package/lib/src/brand-page/models/navigation-styles.model.d.ts

@@ -5,8 +5,10 @@ export declare class NavigationMenuStyles {
     defaultButtonStyle: TextStyleDeclaration;
     selectedButtonStyle: BrandPageCssStyle;
     iconStyle: BrandPageCssStyle;
+    subNavBackgroundColor?: string;
     constructor(options: Partial<NavigationMenuStyles>, defaultOptions: Partial<NavigationMenuStyles>);
 }
+export declare const getDefaultSubNavBackgroundColor: (defaultTextColor: string | undefined) => string | undefined;
 type NavigationStylesOptionType = Partial<Omit<NavigationDesktop | NavigationMobile, 'hamburgerMenuStyle'>> & {
     hamburgerMenuStyle?: Partial<NavigationMenuStyles>;
 };
@@ -17,6 +19,7 @@ declare abstract class NavigationStyles implements NavigationMenuStyles {
     defaultButtonStyle: TextStyleDeclaration;
     selectedButtonStyle: BrandPageCssStyle;
     iconStyle: BrandPageCssStyle;
+    subNavBackgroundColor?: string;
     isLogoVisible: boolean;
     hamburgerMenuStyle: NavigationMenuStyles;
     viewport: ViewportsType;

package/lib/src/brand-page/models/navigation-styles.model.js

@@ -1,4 +1,4 @@
-import { DEFAULT_FONT_FAMILY_KEY, DEFAULT_FONT_STYLE, DEFAULT_TEXT_ALIGN, DEFAULT_TEXT_DECORATION, FONT_FAMILY_CONFIGS, FONT_SIZE_BODY, FONT_WEIGHT_NORMAL, defaultHamburgerNavigation, NAVIGATION_DISPLAY, } from '../constants';
+import { DEFAULT_FONT_FAMILY_KEY, DEFAULT_FONT_STYLE, DEFAULT_TEXT_ALIGN, DEFAULT_TEXT_DECORATION, FONT_FAMILY_CONFIGS, FONT_SIZE_BODY, FONT_WEIGHT_NORMAL, STYLE_THEME_KEYS, defaultHamburgerNavigation, NAVIGATION_DISPLAY, } from '../constants';
 import { VIEWPORTS } from './index';
 import { TEXT_STYLE_TYPES } from './index';
 import cloneDeep from 'lodash.clonedeep';
@@ -6,18 +6,33 @@ export class NavigationMenuStyles {
     defaultButtonStyle;
     selectedButtonStyle;
     iconStyle;
+    subNavBackgroundColor;
     constructor(options, defaultOptions) {
         this.defaultButtonStyle = Object.assign({}, defaultOptions.defaultButtonStyle, options.defaultButtonStyle || {});
         this.selectedButtonStyle = Object.assign({}, defaultOptions.selectedButtonStyle, options.selectedButtonStyle || {});
         this.iconStyle = Object.assign({}, defaultOptions.iconStyle, options.iconStyle || {});
+        this.subNavBackgroundColor =
+            options.subNavBackgroundColor ?? defaultOptions.subNavBackgroundColor;
     }
 }
+export const getDefaultSubNavBackgroundColor = (defaultTextColor) => {
+    if (defaultTextColor === STYLE_THEME_KEYS.LogoTextColor ||
+        defaultTextColor === STYLE_THEME_KEYS.LogoTextMultiColor) {
+        return STYLE_THEME_KEYS.LogoBackgroundColor;
+    }
+    if (defaultTextColor === STYLE_THEME_KEYS.LogoBackgroundColor ||
+        defaultTextColor === STYLE_THEME_KEYS.LogoBackgroundMultiColor) {
+        return STYLE_THEME_KEYS.LogoTextColor;
+    }
+    return undefined;
+};
 class NavigationStyles {
     displayType;
     renderAfterLogo;
     defaultButtonStyle;
     selectedButtonStyle;
     iconStyle;
+    subNavBackgroundColor;
     isLogoVisible;
     hamburgerMenuStyle;
     viewport;
@@ -55,6 +70,9 @@ class NavigationStyles {
             borderColor: theme?.primaryColor,
         }, option?.selectedButtonStyle || {});
         this.iconStyle = Object.assign({}, option?.iconStyle || {});
+        this.subNavBackgroundColor =
+            option?.subNavBackgroundColor ??
+                getDefaultSubNavBackgroundColor(this.defaultButtonStyle.color);
         this.isLogoVisible = option?.isLogoVisible || true;
         this.hamburgerMenuStyle = new NavigationMenuStyles(option?.hamburgerMenuStyle || {}, {
             defaultButtonStyle: {
@@ -74,6 +92,7 @@ class NavigationStyles {
                 color: theme?.secondaryColor,
                 backgroundColor: theme?.primaryColor,
             },
+            subNavBackgroundColor: theme?.secondaryColor,
         });
     }
 }

package/lib/src/brand-page/utils/migration/migration-15.d.ts

@@ -0,0 +1,2 @@
+import type { MigrationData } from '../migration.util';
+export declare const migration15: (migrationResult: MigrationData) => Promise<MigrationData>;

package/lib/src/brand-page/utils/migration/migration-15.js

@@ -0,0 +1,3 @@
+export const migration15 = async (migrationResult) => {
+    return migrationResult;
+};

package/lib/src/brand-page/utils/migration.util.js

@@ -17,6 +17,7 @@ import { migration12 } from './migration/migration-12';
 import { migration12_1 } from './migration/migration-12_1';
 import { migration13 } from './migration/migration-13';
 import { migration14 } from './migration/migration-14';
+import { migration15 } from './migration/migration-15';
 const MIGRATION_TABLE = [
     {
         version: 1,
@@ -109,6 +110,11 @@ const MIGRATION_TABLE = [
         migrateFn: migration14,
         description: 'Renaming messageTextColor to successMessageStyle on contact form content',
     },
+    {
+        version: 15,
+        migrateFn: migration15,
+        description: 'Set sub nav background color based on default text style color',
+    },
 ];
 export const GetLatestModelVersion = () => Math.max(...MIGRATION_TABLE.map((x) => x.version));
 export const migrateBrandPageModel = async (brandPageModel, options) => {

package/lib/src/brand-page/utils/style.util.js

@@ -162,13 +162,23 @@ export const applyLogoThemeToBrandPageNavigationStyles = (logoTheme, navigation)
         : new NavigationDesktop();
     for (const [key, value] of Object.entries(navigation)) {
         if (typeof value === 'string' || typeof value === 'boolean') {
-            newNavigation[key] = value;
+            if (typeof value === 'string') {
+                const output = colorMatchCssKeyValue(key, value, logoTheme);
+                newNavigation[key] = output.cssValue;
+                isModified = isModified || output.isModified;
+            }
+            else {
+                newNavigation[key] = value;
+            }
         }
-        else {
+        else if (value != null && typeof value === 'object') {
             const output = applyLogoThemeToBrandPageStyleRecursive(logoTheme, key, value);
             newNavigation[key] = output.newStyle;
             isModified = isModified || output.isApplied;
         }
+        else {
+            newNavigation[key] = value;
+        }
     }
     return { navigation: newNavigation, isModified };
 };

package/lib/src/brand-page/utils/view-model.util.js

@@ -669,10 +669,12 @@ export const mapToPageHeaderViewModel = (pageHeader, pageStyles, pages, useOldLo
     };
     const navDefaultButtonTextStyle = getTextStyleByContentTextStyle(pageHeader.navigation.defaultButtonStyle, pageStyles.textStyles.textStyleOptions);
     const navDefaultButtonStyle = Object.assign({}, pageHeader.navigation.defaultButtonStyle, navDefaultButtonTextStyle);
-    const navSelectedButtonStyle = Object.assign({}, navDefaultButtonTextStyle, pageHeader.navigation.selectedButtonStyle);
+    const { backgroundColor: _defaultBg, ...navDefaultTextStyleWithoutBg } = navDefaultButtonTextStyle || {};
+    const navSelectedButtonStyle = Object.assign({}, navDefaultTextStyleWithoutBg, pageHeader.navigation.selectedButtonStyle);
     const hamburgerButtonTextStyle = getTextStyleByContentTextStyle(pageHeader.navigation.hamburgerMenuStyle.defaultButtonStyle, pageStyles.textStyles.textStyleOptions);
     const hamburgerButtonStyle = Object.assign({}, pageHeader.navigation.hamburgerMenuStyle.defaultButtonStyle, hamburgerButtonTextStyle);
-    const hamburgerSelectedButtonStyle = Object.assign({}, hamburgerButtonTextStyle, pageHeader.navigation.hamburgerMenuStyle.selectedButtonStyle);
+    const { backgroundColor: _hamburgerDefaultBg, ...hamburgerTextStyleWithoutBg } = hamburgerButtonTextStyle || {};
+    const hamburgerSelectedButtonStyle = Object.assign({}, hamburgerTextStyleWithoutBg, pageHeader.navigation.hamburgerMenuStyle.selectedButtonStyle);
     const hamburgerMenuStyle = new NavigationMenuStyles(Object.assign({}, pageHeader.navigation.hamburgerMenuStyle, {
         defaultButtonStyle: hamburgerButtonStyle,
         selectedButtonStyle: hamburgerSelectedButtonStyle,

package/lib/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.mixin.d.ts

@@ -1110,7 +1110,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }): void;
         setInitialSearchTerm(payload: {
             initialSearchTerm: string;
+            onSearchTermChanged?: import("@shared/template-settings/store").OnSearchTermChangedCallback | undefined;
         }): void;
+        notifySearchTermChanged(searchTerm: string | undefined): void;
         clearTemplates(): void;
         getTemplateByTemplateId(id: string): import("@shared/template-settings/models").TemplateSettingsTemplate | undefined;
         setupLogoChangeWatcher(): void;

package/lib/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.mixin.d.ts

@@ -964,6 +964,12 @@ declare const _default: import("vue").DefineComponent<{}, {
             style: BrandPageCssStyle;
             viewport: import("@brand-page").ViewportsType;
         }): void;
+        _setSubNavBackgroundColor({ displayType, section, value, viewport, }: {
+            displayType: import("@brand-page").NavigationDisplayType;
+            section: "footer" | "header";
+            value: string | undefined;
+            viewport: import("@brand-page").ViewportsType;
+        }): void;
         _setButtonStyles({ section, defaultButtonStyle, selectedButtonStyle, iconStyle, viewport, }: {
             section: "footer" | "header";
             defaultButtonStyle: import("@brand-page").TextStyleDeclaration;
@@ -978,7 +984,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         }): void;
         setNavigationStyleOptionValue({ section, option, value, viewport, }: {
             section: "footer" | "header";
-            option: "defaultBorderColor" | "selectedBorderColor" | "defaultTextStyle" | "defaultBackgroundColor" | "selectedTextColor" | "selectedBackgroundColor" | "iconColor" | "iconBackgroundColor";
+            option: "defaultBorderColor" | "selectedBorderColor" | "subNavBackgroundColor" | "defaultTextStyle" | "defaultBackgroundColor" | "selectedTextColor" | "selectedBackgroundColor" | "iconColor" | "iconBackgroundColor";
             value: any;
             viewport: import("@brand-page").ViewportsType;
         }): void;

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

@@ -11,6 +11,7 @@ export declare const NavigationStyleConfigOptions: {
     readonly selectedBackgroundColor: "selectedBackgroundColor";
     readonly iconColor: "iconColor";
     readonly iconBackgroundColor: "iconBackgroundColor";
+    readonly subNavBackgroundColor: "subNavBackgroundColor";
 };
 export type NavigationStyleConfigOption = keyof typeof NavigationStyleConfigOptions;
 export declare const NAVIGATION_STYLE_CONFIG_OPTION_TITLES: () => Record<NavigationStyleConfigOption, string>;

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

@@ -10,6 +10,7 @@ export const NavigationStyleConfigOptions = {
     selectedBackgroundColor: 'selectedBackgroundColor',
     iconColor: 'iconColor',
     iconBackgroundColor: 'iconBackgroundColor',
+    subNavBackgroundColor: 'subNavBackgroundColor',
 };
 export const NAVIGATION_STYLE_CONFIG_OPTION_TITLES = () => ({
     defaultBorderColor: modelsTr('defaultBorderColor'),
@@ -20,6 +21,7 @@ export const NAVIGATION_STYLE_CONFIG_OPTION_TITLES = () => ({
     selectedBackgroundColor: modelsTr('selectedBackgroundColor'),
     iconColor: commonTr('iconColor'),
     iconBackgroundColor: modelsTr('iconBackgroundColor'),
+    subNavBackgroundColor: modelsTr('subNavBackgroundColor'),
 });
 const hamburgerNavigationConfig = {
     ...defaultHamburgerNavigation,
@@ -29,6 +31,7 @@ const hamburgerNavigationConfig = {
         'selectedBackgroundColor',
         'iconColor',
         'iconBackgroundColor',
+        'subNavBackgroundColor',
     ],
     selectedButtonStyle: {},
     iconStyle: {},
@@ -68,6 +71,7 @@ export const availableNavigationStyleConfigs = [
             'selectedBackgroundColor',
             'selectedBorderColor',
             'selectedTextColor',
+            'subNavBackgroundColor',
         ],
         buttonGroupOption: {
             value: NAVIGATION_DISPLAY.TAB_1,
@@ -104,6 +108,7 @@ export const availableNavigationStyleConfigs = [
             'defaultBorderColor',
             'selectedBackgroundColor',
             'selectedTextColor',
+            'subNavBackgroundColor',
         ],
         buttonGroupOption: {
             value: NAVIGATION_DISPLAY.TAB_2,

package/lib/src/brand-page-maker/stores/brandpage-container/brand-page-container-store.d.ts

@@ -4,6 +4,7 @@ import type { CustomDomainConfigModel, CustomDomainModel } from '@brand-page-mak
 import { type AbTest } from '@brand-page';
 import type { WebsiteSlugCheckResponse } from '@brand-page-maker/models/api.model';
 import { WEBSITE_UPGRADE_CONTEXT_TYPES } from '@designcrowd/fe-shared-lib';
+import { type OnSearchTermChangedCallback } from '@shared/template-settings/store';
 export type WebsiteContextUpgradeType = keyof typeof WEBSITE_UPGRADE_CONTEXT_TYPES;
 export interface BrandPageContainerState {
     availableTaxes: any[];
@@ -74,6 +75,7 @@ export type InitialisePayload = Omit<BrandPageContainerState, 'customDomain' | '
     logoDraftAssets: LogoDraftAsset[];
     gettyVideos: GettyVideoEditorViewModelResponse[];
     templateSearchTerm: string | undefined;
+    onSearchTermChanged?: OnSearchTermChangedCallback;
 };
 export declare const BRANDPAGE_STATUS: Readonly<{
     Published: "Published";

package/lib/src/brand-page-maker/stores/brandpage-container/brand-page-container-store.js

@@ -13,7 +13,7 @@ import { navigationTr } from '@src/composables/useTranslate';
 import { errorTr, constantsTr } from '@src/composables/useTranslate';
 import { findValuesByKey } from '../../../helpers/ts.helper';
 import { WEBSITE_UPGRADE_CONTEXT_TYPES } from '@designcrowd/fe-shared-lib';
-import { useUiTemplateSettingsStore } from '@shared/template-settings/store';
+import { useUiTemplateSettingsStore, } from '@shared/template-settings/store';
 export const BRANDPAGE_STATUS = Object.freeze({
     Published: 'Published',
     Unpublished: 'Unpublished',
@@ -135,6 +135,7 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
             });
             templateSettingsStore.setInitialSearchTerm({
                 initialSearchTerm: payload.templateSearchTerm ?? '',
+                onSearchTermChanged: payload.onSearchTermChanged,
             });
             brandPageMakerStore.setSelectedTemplateId({
                 templateId: this.designTemplateToken,

package/lib/src/brand-page-maker/stores/brandpage-maker/brandpage-maker-store.js

@@ -18,7 +18,7 @@ import { useUiContentSettingsStore } from '@shared/content-settings/store';
 import { setContentSettingsAddContentOptions } from './brandpage-maker-store-utils';
 import { useAdminLogoSettingsStore } from '../admin-logo-settings';
 import { useUiPageSettingsStore } from '@shared/page-settings/store';
-import { mapBrandPageContentToContentSettingsItem, removeContentFieldValues, removeLogoTemplateModel, } from '@brand-page-maker/utils';
+import { isColorMatched, mapBrandPageContentToContentSettingsItem, removeContentFieldValues, removeLogoTemplateModel, } from '@brand-page-maker/utils';
 import { UI_DEVICE_MODES, UI_SCREENSIZE_MODES, } from '@shared/models';
 import { PAGE_SECTIONS } from '@shared/page-settings/models';
 import { useUiTemplateSettingsStore } from '@shared/template-settings/store';
@@ -345,6 +345,14 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
                     },
                 },
             });
+            if (userStore.isAdmin) {
+                for (const viewport of [VIEWPORTS.desktop, VIEWPORTS.mobile]) {
+                    const hamburger = navigationStyleSettingsStore.navigation[PAGE_SECTIONS.header][viewport].hamburgerMenuStyle;
+                    if (isColorMatched(hamburger.subNavBackgroundColor)) {
+                        hamburger.subNavBackgroundColor = undefined;
+                    }
+                }
+            }
             backgroundSettingsStore.setBackgroundStyles({
                 backgroundStyles: brandPageModel.styles.backgroundStyles,
             });