From 5f4509f8125a4b41828c0b4021b68c425977f3b1 Mon Sep 17 00:00:00 2001
From: Mathis Poncet <math712b@gmail.com>
Date: Wed, 26 Feb 2025 14:50:16 +0100
Subject: [PATCH] WIP first version works

---
 src/components.d.ts                           |  10 +
 .../com-nav-category/com-nav-category.scss    | 182 ++++++------
 .../com-nav-category/com-nav-category.tsx     |  14 +-
 .../com-nav-submenu/com-nav-submenu.scss      | 280 +++++++++---------
 .../com-nav-submenu/com-nav-submenu.tsx       |  26 +-
 src/components/com-nav/com-nav-utils.ts       |  13 +-
 src/components/com-nav/com-nav.scss           | 167 ++++++++---
 src/components/com-nav/com-nav.tsx            |  39 ++-
 8 files changed, 461 insertions(+), 270 deletions(-)

diff --git a/src/components.d.ts b/src/components.d.ts
index a4359aa3..5b59dcfd 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -432,6 +432,10 @@ export namespace Components {
           * Name of the application to be displayed in the menu bar
          */
         "appName": string;
+        /**
+          * Breakpoint at which the component switches from desktop to mobile mode. If not set, the breakpoint is set to default value of 575px.
+         */
+        "breakpoint"?: number;
         "setAriaAttribute": (attr: AriaAttributeName, value: string | null | undefined) => Promise<void>;
     }
     /**
@@ -471,6 +475,7 @@ export namespace Components {
          */
         "open": () => Promise<void>;
         "setAriaAttribute": (attr: AriaAttributeName, value: string | null | undefined) => Promise<void>;
+        "setCustomBreakpoint": (customBreakpoint: number) => Promise<void>;
     }
     /**
      * The com-nav-item is a subcomponent of `wcs-com-nav`. It represents a list-item wrapper around a link.
@@ -516,6 +521,7 @@ export namespace Components {
         "panelDescription": string;
         "panelTitle": string;
         "setAriaAttribute": (attr: AriaAttributeName, value: string | null | undefined) => Promise<void>;
+        "setCustomBreakpoint": (customBreakpoint: number) => Promise<void>;
     }
     /**
      * Counter component, meant to be used for small range of values (e.g : 0 - 5).<br>
@@ -4630,6 +4636,10 @@ declare namespace LocalJSX {
           * Name of the application to be displayed in the menu bar
          */
         "appName"?: string;
+        /**
+          * Breakpoint at which the component switches from desktop to mobile mode. If not set, the breakpoint is set to default value of 575px.
+         */
+        "breakpoint"?: number;
     }
     /**
      * The com-nav-category is a subcomponent of `wcs-com-nav`. It represents a category nested inside a `wcs-com-nav-submenu`.
diff --git a/src/components/com-nav-category/com-nav-category.scss b/src/components/com-nav-category/com-nav-category.scss
index fb652b67..9359af86 100644
--- a/src/components/com-nav-category/com-nav-category.scss
+++ b/src/components/com-nav-category/com-nav-category.scss
@@ -2,6 +2,94 @@
 @import '../com-nav/com-nav-focus.scss';
 @import '../../style/breakpoints.scss';
 
+@mixin wcs-com-nav-category-desktop {
+    padding-bottom: unset;
+    
+    .item-container:not([data-open]) {
+        display: none;
+    }
+
+    button {
+        cursor: pointer;
+    }
+
+    .label-container {
+        display: flex;
+        align-items: center;
+        gap: var(--wcs-com-nav-category-label-desktop-gap);
+
+        font-weight: var(--wcs-com-nav-category-label-desktop-font-weight);
+        cursor: pointer;
+        user-select: none;
+        padding-left: unset;
+        color: var(--wcs-com-nav-category-label-desktop-color);
+
+        .arrow-icon {
+            display: inline-block;
+            font-family: icons;
+            font-size: 0.6rem;
+            line-height: 1;
+            box-sizing: border-box;
+        }
+
+        .arrow-container {
+            display: unset;
+        }
+    }
+
+    .label-container:focus-visible {
+        @include focus-outline(var(--wcs-com-nav-category-label-desktop-focus-outline-color), 5px, 0.1rem);
+    }
+
+    @supports not selector(.label-container:focus-visible) {
+        .label-container:focus-within {
+            @include focus-outline(var(--wcs-com-nav-category-label-desktop-focus-outline-color), 5px, 0.1rem);
+        }
+    }
+
+    button.label-container[aria-expanded="true"]:after {
+        position: absolute;
+        left: calc(calc(calc(100% / 2) + calc(var(--wcs-com-content-max-width) / 8)) - calc(1.125rem / 2));
+        z-index: 2;
+        display: block;
+        width: 1.125rem;
+        height: 1.125rem;
+        content: "";
+        background-color: var(--wcs-com-nav-category-desktop-menu-background-indicator-color);
+        transform: rotate(45deg);
+    }
+
+    .item-container[data-open] {
+        position: absolute;
+        border-left: solid var(--wcs-com-nav-category-desktop-menu-border-left-width) var(--wcs-com-nav-category-desktop-menu-border-left-color);
+        left: calc(calc(100% / 2) + calc(var(--wcs-com-content-max-width) / 8));
+        top: 0;
+        right: 0;
+        padding: var(--wcs-com-nav-category-desktop-menu-padding-top) var(--wcs-com-nav-category-desktop-menu-padding-right) var(--wcs-com-nav-category-desktop-menu-padding-bottom) var(--wcs-com-nav-category-desktop-menu-padding-left);
+        background-blend-mode: multiply;
+        background-color: var(--wcs-com-nav-category-desktop-menu-background-color);
+        box-sizing: border-box;
+        height: calc(100%);
+
+        margin-left: unset;
+        margin-top: unset;
+
+        display: flex;
+        flex-direction: column;
+        gap: var(--wcs-com-nav-category-desktop-menu-gap);
+        align-items: start;
+
+        ::slotted(wcs-com-nav-item) {
+            color: var(--wcs-com-nav-category-item-desktop-color);
+            font-weight: var(--wcs-com-nav-category-item-desktop-font-weight);
+        }
+
+        ::slotted(wcs-com-nav-item:focus-within) {
+            @include com-nav-submenu-item-desktop-focus-outline(var(--wcs-com-nav-category-item-desktop-color));
+        }
+    }
+}
+
 :host {
     --wcs-com-nav-category-label-mobile-font-weight: var(--wcs-semantic-font-weight-medium);
     --wcs-com-nav-category-label-mobile-color: var(--wcs-semantic-color-text-primary);
@@ -74,92 +162,12 @@
     }
 }
 
-@include for-tablet-portrait-up {
-    :host {
-        padding-bottom: unset;
-
-        .item-container:not([data-open]) {
-            display: none;
-        }
-
-        button {
-            cursor: pointer;
-        }
-
-        .label-container {
-            display: flex;
-            align-items: center;
-            gap: var(--wcs-com-nav-category-label-desktop-gap);
-
-            font-weight: var(--wcs-com-nav-category-label-desktop-font-weight);
-            cursor: pointer;
-            user-select: none;
-            padding-left: unset;
-            color: var(--wcs-com-nav-category-label-desktop-color);
-
-            .arrow-icon {
-                display: inline-block;
-                font-family: icons;
-                font-size: 0.6rem;
-                line-height: 1;
-                box-sizing: border-box;
-            }
-
-            .arrow-container {
-                display: unset;
-            }
-        }
-
-        .label-container:focus-visible {
-            @include focus-outline(var(--wcs-com-nav-category-label-desktop-focus-outline-color), 5px, 0.1rem);
-        }
-
-        @supports not selector(.label-container:focus-visible) {
-            .label-container:focus-within {
-                @include focus-outline(var(--wcs-com-nav-category-label-desktop-focus-outline-color), 5px, 0.1rem);
-            }
-        }
-
-        button.label-container[aria-expanded="true"]:after {
-            position: absolute;
-            left: calc(calc(calc(100% / 2) + calc(var(--wcs-com-content-max-width) / 8)) - calc(1.125rem / 2));
-            z-index: 2;
-            display: block;
-            width: 1.125rem;
-            height: 1.125rem;
-            content: "";
-            background-color: var(--wcs-com-nav-category-desktop-menu-background-indicator-color);
-            transform: rotate(45deg);
-        }
-
-        .item-container[data-open] {
-            position: absolute;
-            border-left: solid var(--wcs-com-nav-category-desktop-menu-border-left-width) var(--wcs-com-nav-category-desktop-menu-border-left-color);
-            left: calc(calc(100% / 2) + calc(var(--wcs-com-content-max-width) / 8));
-            top: 0;
-            right: 0;
-            padding: var(--wcs-com-nav-category-desktop-menu-padding-top) var(--wcs-com-nav-category-desktop-menu-padding-right) var(--wcs-com-nav-category-desktop-menu-padding-bottom) var(--wcs-com-nav-category-desktop-menu-padding-left);
-            background-blend-mode: multiply;
-            background-color: var(--wcs-com-nav-category-desktop-menu-background-color);
-            box-sizing: border-box;
-            height: calc(100%);
-
-            margin-left: unset;
-            margin-top: unset;
-
-            display: flex;
-            flex-direction: column;
-            gap: var(--wcs-com-nav-category-desktop-menu-gap);
-            align-items: start;
-
-            ::slotted(wcs-com-nav-item) {
-                color: var(--wcs-com-nav-category-item-desktop-color);
-                font-weight: var(--wcs-com-nav-category-item-desktop-font-weight);
-            }
-
-            ::slotted(wcs-com-nav-item:focus-within) {
-                @include com-nav-submenu-item-desktop-focus-outline(var(--wcs-com-nav-category-item-desktop-color));
-            }
-        }
+:host(:not(.has-custom-breakpoint)) {
+    @include for-tablet-portrait-up {
+        @include wcs-com-nav-category-desktop;
     }
 }
+
+:host(.has-custom-breakpoint.desktop) {
+    @include wcs-com-nav-category-desktop;
+}
\ No newline at end of file
diff --git a/src/components/com-nav-category/com-nav-category.tsx b/src/components/com-nav-category/com-nav-category.tsx
index e7359894..2f2d2326 100644
--- a/src/components/com-nav-category/com-nav-category.tsx
+++ b/src/components/com-nav-category/com-nav-category.tsx
@@ -67,6 +67,8 @@ export class ComNavCategory implements ComponentInterface, MutableAriaAttribute
      */
     @State() public currentActiveSizing: ComNavSize = 'desktop';
 
+    @State() customBreakpoint?: number;
+
     @Listen('click', {target: 'window'})
     onWindowClickEvent(_: MouseEvent) {
         if (this.categoryOpen) this.categoryOpen = false;
@@ -109,6 +111,14 @@ export class ComNavCategory implements ComponentInterface, MutableAriaAttribute
         setOrRemoveAttribute(this.nativeButton, attr, value);
     }
 
+    @Method()
+    public async setCustomBreakpoint(customBreakpoint: number) {
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = comNavDidLoadWithResizeObserver(this, customBreakpoint);
+        this.resizeObserver.observe(document.body);
+        this.customBreakpoint = customBreakpoint;
+    }
+
     /**
      * Close the category
      */
@@ -151,8 +161,10 @@ export class ComNavCategory implements ComponentInterface, MutableAriaAttribute
     }
 
     render(): any {
+        const hasCustomBreakpoint = this.customBreakpoint ? 'has-custom-breakpoint' : '';
+
         return (
-            <Host role={"listitem"} onClick={evt => this.onClick(evt)}>
+            <Host role={"listitem"} onClick={evt => this.onClick(evt)} class={`${hasCustomBreakpoint} ${this.currentActiveSizing}`}>
                 {
                     this.currentActiveSizing === 'mobile' ?
                         <h3 role="presentation" class="label-container">
diff --git a/src/components/com-nav-submenu/com-nav-submenu.scss b/src/components/com-nav-submenu/com-nav-submenu.scss
index ff53c268..ac4d70b1 100644
--- a/src/components/com-nav-submenu/com-nav-submenu.scss
+++ b/src/components/com-nav-submenu/com-nav-submenu.scss
@@ -2,6 +2,140 @@
 @import '../com-nav/com-nav-focus.scss';
 @import '../../style/breakpoints.scss';
 
+@mixin com-nav-submenu-desktop {
+    height: 100%;
+    padding-bottom: unset;
+
+    .menu-button {
+        display: flex;
+        align-items: center;
+        height: 100%;
+        cursor: pointer;
+        user-select: none;
+        font-weight: unset;
+        padding-left: unset;
+    }
+
+    .menu-button:focus-visible {
+        @include focus-outline(var(--wcs-com-nav-submenu-button-focus-outline-color), 2px, 0.1rem);
+    }
+
+    @supports not selector(.menu-button:focus-visible) {
+        @include focus-outline(var(--wcs-com-nav-submenu-button-focus-outline-color), 2px, 0.1rem);
+    }
+
+    .label {
+        text-transform: unset;
+        cursor: pointer;
+    }
+
+    .arrow-icon {
+        display: inline-block;
+        font-family: icons;
+        font-size: 0.6rem;
+        line-height: 1;
+        box-sizing: border-box;
+    }
+
+    .arrow-container {
+        display: unset;
+        margin-left: var(--wcs-com-nav-submenu-button-gap);
+    }
+
+    .arrow-icon:not([data-open]) {
+        transform: rotate(90deg);
+    }
+
+    .arrow-icon[data-open] {
+        transform: rotate(-90deg);
+    }
+
+    .drawer {
+        display: none;
+        position: absolute;
+        top: calc(var(--wcs-com-nav-menu-bar-height) + var(--wcs-com-nav-border-width));
+        z-index: 8888;
+        left: 0;
+        width: 100%;
+        box-sizing: border-box;
+        padding: var(--wcs-com-nav-submenu-desktop-menu-padding);
+        background-color: var(--wcs-com-nav-submenu-desktop-menu-background-color);
+        color: var(--wcs-com-nav-submenu-desktop-menu-text-color);
+
+        box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.08); // TODO: wait solution for backdrop (introduce design token later)
+    }
+
+    .drawer-content {
+        display: flex;
+        justify-content: space-between;
+        max-width: 62.5%;
+        flex: 1;
+
+        div:first-child {
+            flex: 0.8;
+        }
+
+        div {
+            max-width: 260px;
+        }
+    }
+
+    .menu-items {
+        padding: 0 var(--wcs-com-nav-submenu-desktop-menu-items-padding-right) 0 var(--wcs-com-nav-submenu-desktop-menu-items-padding-left);
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+
+        ::slotted(wcs-com-nav-item) {
+            color: var(--wcs-com-nav-submenu-desktop-menu-text-color);
+            font-weight: var(--wcs-com-nav-submenu-desktop-menu-link-font-weight);
+        }
+
+        ::slotted(wcs-com-nav-item:focus-within) {
+            @include com-nav-submenu-item-desktop-focus-outline(var(--wcs-com-nav-submenu-desktop-menu-text-color));
+        }
+    }
+
+    .drawer-container {
+        display: flex;
+        max-width: var(--wcs-com-content-max-width);
+        margin: 0 auto;
+
+        h3 {
+            margin: 0 0 var(--wcs-com-nav-submenu-desktop-menu-description-gap) 0;
+            font-size: 1.5rem;
+            line-height: 1.25;
+            font-weight: var(--wcs-com-nav-submenu-desktop-menu-heading-font-weight);
+        }
+
+        p {
+            margin-top: 0;
+            margin-bottom: 1rem;
+            font-weight: var(--wcs-com-nav-submenu-desktop-menu-description-font-weight);
+            font-size: 1rem;
+            line-height: 1.375;
+        }
+    }
+
+    .drawer[data-open] {
+        display: block;
+    }
+    .drawer-description {
+        display: block;
+    }
+}
+
+@mixin com-nav-submenu-mobile {
+    .menu-button {
+        margin: 0;
+    }
+
+    .menu-items {
+        margin-top: var(--wcs-com-nav-submenu-mobile-spacing-top);
+        margin-left: var(--wcs-com-nav-submenu-mobile-spacing-left);
+    }
+}
+
 :host {
     --wcs-com-nav-submenu-button-color: var(--wcs-semantic-color-text-primary);
     --wcs-com-nav-submenu-button-font-weight: var(--wcs-semantic-font-weight-medium);
@@ -80,140 +214,22 @@
     }
 }
 
-@include for-phone-only {
-    :host {
-        .menu-button {
-            margin: 0;
-        }
-
-        .menu-items {
-            margin-top: var(--wcs-com-nav-submenu-mobile-spacing-top);
-            margin-left: var(--wcs-com-nav-submenu-mobile-spacing-left);
-        }
+:host(:not(.has-custom-breakpoint)) {
+    @include for-phone-only {
+        @include com-nav-submenu-mobile;
     }
 }
 
-@include for-tablet-portrait-up {
-    :host {
-        height: 100%;
-        padding-bottom: unset;
-
-        .menu-button {
-            display: flex;
-            align-items: center;
-            height: 100%;
-            cursor: pointer;
-            user-select: none;
-            font-weight: unset;
-            padding-left: unset;
-        }
-
-        .menu-button:focus-visible {
-            @include focus-outline(var(--wcs-com-nav-submenu-button-focus-outline-color), 2px, 0.1rem);
-        }
-
-        @supports not selector(.menu-button:focus-visible) {
-            @include focus-outline(var(--wcs-com-nav-submenu-button-focus-outline-color), 2px, 0.1rem);
-        }
-
-        .label {
-            text-transform: unset;
-            cursor: pointer;
-        }
-
-        .arrow-icon {
-            display: inline-block;
-            font-family: icons;
-            font-size: 0.6rem;
-            line-height: 1;
-            box-sizing: border-box;
-        }
-
-        .arrow-container {
-            display: unset;
-            margin-left: var(--wcs-com-nav-submenu-button-gap);
-        }
-
-        .arrow-icon:not([data-open]) {
-            transform: rotate(90deg);
-        }
-
-        .arrow-icon[data-open] {
-            transform: rotate(-90deg);
-        }
-
-        .drawer {
-            display: none;
-            position: absolute;
-            top: calc(var(--wcs-com-nav-menu-bar-height) + var(--wcs-com-nav-border-width));
-            z-index: 8888;
-            left: 0;
-            width: 100%;
-            box-sizing: border-box;
-            padding: var(--wcs-com-nav-submenu-desktop-menu-padding);
-            background-color: var(--wcs-com-nav-submenu-desktop-menu-background-color);
-            color: var(--wcs-com-nav-submenu-desktop-menu-text-color);
-
-            box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.08); // TODO: wait solution for backdrop (introduce design token later)
-        }
-
-        .drawer-content {
-            display: flex;
-            justify-content: space-between;
-            max-width: 62.5%;
-            flex: 1;
-
-            div:first-child {
-                flex: 0.8;
-            }
-
-            div {
-                max-width: 260px;
-            }
-        }
-
-        .menu-items {
-            padding: 0 var(--wcs-com-nav-submenu-desktop-menu-items-padding-right) 0 var(--wcs-com-nav-submenu-desktop-menu-items-padding-left);
-            display: flex;
-            flex-direction: column;
-            align-items: flex-end;
-
-            ::slotted(wcs-com-nav-item) {
-                color: var(--wcs-com-nav-submenu-desktop-menu-text-color);
-                font-weight: var(--wcs-com-nav-submenu-desktop-menu-link-font-weight);
-            }
-
-            ::slotted(wcs-com-nav-item:focus-within) {
-                @include com-nav-submenu-item-desktop-focus-outline(var(--wcs-com-nav-submenu-desktop-menu-text-color));
-            }
-        }
-
-        .drawer-container {
-            display: flex;
-            max-width: var(--wcs-com-content-max-width);
-            margin: 0 auto;
-
-            h3 {
-                margin: 0 0 var(--wcs-com-nav-submenu-desktop-menu-description-gap) 0;
-                font-size: 1.5rem;
-                line-height: 1.25;
-                font-weight: var(--wcs-com-nav-submenu-desktop-menu-heading-font-weight);
-            }
-
-            p {
-                margin-top: 0;
-                margin-bottom: 1rem;
-                font-weight: var(--wcs-com-nav-submenu-desktop-menu-description-font-weight);
-                font-size: 1rem;
-                line-height: 1.375;
-            }
-        }
-
-        .drawer[data-open] {
-            display: block;
-        }
-        .drawer-description {
-            display: block;
-        }
+:host(:not(.has-custom-breakpoint)) {
+    @include for-tablet-portrait-up {
+        @include com-nav-submenu-desktop;
     }
 }
+
+:host(.has-custom-breakpoint.mobile) {
+    @include com-nav-submenu-mobile;
+}
+
+:host(.has-custom-breakpoint.desktop) {
+    @include com-nav-submenu-desktop;
+}
\ No newline at end of file
diff --git a/src/components/com-nav-submenu/com-nav-submenu.tsx b/src/components/com-nav-submenu/com-nav-submenu.tsx
index 66361984..4b693992 100644
--- a/src/components/com-nav-submenu/com-nav-submenu.tsx
+++ b/src/components/com-nav-submenu/com-nav-submenu.tsx
@@ -59,6 +59,8 @@ export class ComNavSubmenu implements ComponentInterface, MutableAriaAttribute {
     @State() private menuOpen: boolean = false;
     @Event() wcsSubmenuOpened: EventEmitter<MenuOpenedEventDetail>;
 
+    @State() customBreakpoint?: number;
+
     private menuItemsId = `wcs-com-nav-submenu-items`;
     private resizeObserver: ResizeObserver;
     /**
@@ -68,7 +70,10 @@ export class ComNavSubmenu implements ComponentInterface, MutableAriaAttribute {
     @State() public currentActiveSizing: ComNavSize = 'desktop';
 
     componentWillLoad(): Promise<void> | void {
-        const slottedCategoryItems = this.el.querySelectorAll(':scope > wcs-com-nav-category:not([slot])');
+        const slottedCategoryItems = this.getSlottedNavCategories();
+        slottedCategoryItems.forEach(item => {
+            (item as HTMLWcsComNavCategoryElement).setCustomBreakpoint(this.customBreakpoint);
+        });
         registerCloseHandlerForFocusOutEventOn<HTMLWcsComNavCategoryElement>(slottedCategoryItems, WCS_COM_NAV_CATEGORY);
 
         this.inheritedAttributes = {
@@ -77,6 +82,10 @@ export class ComNavSubmenu implements ComponentInterface, MutableAriaAttribute {
         };
     }
 
+    private getSlottedNavCategories() {
+        return this.el.querySelectorAll(':scope > wcs-com-nav-category:not([slot])');
+    }
+
     componentDidLoad(): void {
         if(!this.resizeObserver) {
             this.resizeObserver = comNavDidLoadWithResizeObserver(this);
@@ -84,6 +93,17 @@ export class ComNavSubmenu implements ComponentInterface, MutableAriaAttribute {
         }
     }
 
+    @Method()
+    public async setCustomBreakpoint(customBreakpoint: number) {
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = comNavDidLoadWithResizeObserver(this, customBreakpoint);
+        this.resizeObserver.observe(document.body);
+        this.customBreakpoint = customBreakpoint;
+        this.getSlottedNavCategories().forEach(item => {
+            (item as HTMLWcsComNavCategoryElement).setCustomBreakpoint(customBreakpoint);
+        });
+    }
+
     /**
      * If the user clicks outside the menu, we close it
      */
@@ -175,8 +195,10 @@ export class ComNavSubmenu implements ComponentInterface, MutableAriaAttribute {
     }
 
     render(): any {
+        const hasCustomBreakpoint = this.customBreakpoint ? 'has-custom-breakpoint' : '';
+
         return (
-            <Host onClick={evt => this.onClick(evt)} role="listitem" data-open={this.menuOpen}>
+            <Host onClick={evt => this.onClick(evt)} role="listitem" data-open={this.menuOpen} class={`${hasCustomBreakpoint} ${this.currentActiveSizing}`}>
                 {this.currentActiveSizing === 'mobile' ?
                     <h2 role="presentation" class="menu-button">
                         <span class="label">{this.label}</span><span class="arrow-container">
diff --git a/src/components/com-nav/com-nav-utils.ts b/src/components/com-nav/com-nav-utils.ts
index e9920962..7f9fa0f7 100644
--- a/src/components/com-nav/com-nav-utils.ts
+++ b/src/components/com-nav/com-nav-utils.ts
@@ -37,9 +37,14 @@ function isEventThrownFromChildOfNodeNameToClose(eventComposedPath: EventTarget[
     return eventComposedPath.map(x => (x as HTMLElement).nodeName).indexOf(nodeName) !== -1;
 }
 
-export function comNavDidLoadWithResizeObserver(comNavElement: ComNav | ComNavSubmenu | ComNavCategory): ResizeObserver {
-    const smallBreakpoint = getCssRootPropertyValue('--wcs-phone-breakpoint-max-width') || '575px';
-    const smallBreakpointValue = parseInt(smallBreakpoint, 10);
+export function comNavDidLoadWithResizeObserver(comNavElement: ComNav | ComNavSubmenu | ComNavCategory, customBreakpoint?: number | undefined): ResizeObserver {
+    let smallBreakpointValue;
+    if(customBreakpoint !== undefined) {
+        smallBreakpointValue = customBreakpoint;
+    } else {
+        const smallBreakpoint = getCssRootPropertyValue('--wcs-phone-breakpoint-max-width') || '575px';
+        smallBreakpointValue = parseInt(smallBreakpoint, 10);
+    }
 
     return new ResizeObserver(entry => {
         const cr = entry[0].contentRect;
@@ -51,4 +56,4 @@ export function comNavDidLoadWithResizeObserver(comNavElement: ComNav | ComNavSu
             comNavElement.currentActiveSizing = 'desktop';
         }
     });
-}
+}
\ No newline at end of file
diff --git a/src/components/com-nav/com-nav.scss b/src/components/com-nav/com-nav.scss
index 238b0d37..d1f7f833 100644
--- a/src/components/com-nav/com-nav.scss
+++ b/src/components/com-nav/com-nav.scss
@@ -2,6 +2,122 @@
 @import './com-nav-focus.scss';
 @import '../../style/breakpoints.scss';
 
+@mixin com-nav-mobile {
+    .menu-bar {
+        display: none;
+    }
+
+    #mobile-menu-icon {
+        display: flex;
+        align-items: center;
+        flex-wrap: nowrap;
+        color: var(--wcs-com-nav-mobile-menu-icon-color);
+        padding-left: var(--wcs-com-nav-mobile-menu-icon-gap);
+        margin-left: var(--wcs-com-nav-mobile-menu-icon-margin-left);
+        border-left: solid 1px var(--wcs-com-nav-mobile-menu-icon-border-color);
+    }
+
+    #mobile-menu-icon:focus {
+        outline: none;
+    }
+
+    #mobile-menu-icon:focus-visible::after {
+        @include focus-outline($outline-color: var(--wcs-com-nav-focus-outline-color));
+    }
+
+    @supports not selector(#mobile-menu-icon:focus-visible::after) {
+        #mobile-menu-icon:focus::after {
+            @include focus-outline($outline-color: var(--wcs-com-nav-focus-outline-color));
+        }
+    }
+
+    button {
+        background: none;
+        border: none;
+        padding: 0;
+        margin: 0;
+        font: inherit;
+        color: inherit;
+        cursor: pointer;
+    }
+
+    #mobile-menu-icon:after {
+        font-family: icons;
+        font-size: 18px;
+        cursor: pointer;
+        content: "\f198";
+        line-height: 1;
+        box-sizing: border-box;
+    }
+
+    #mobile-menu-icon[aria-expanded="true"]:after {
+        content: "\f129";
+    }
+
+    .mobile-overlay {
+        display: none;
+    }
+
+    .mobile-overlay[data-mobile-open] {
+        padding: var(--wcs-com-nav-mobile-overlay-padding);
+        position: absolute;
+        top: var(--wcs-com-nav-menu-bar-height);
+        left: 0;
+        right: 0;
+        display: flex;
+        flex-direction: column;
+        gap: var(--wcs-com-nav-mobile-overlay-gap);
+        z-index: 9999;
+        background-color: var(--wcs-com-nav-background-color);
+
+        ::slotted(wcs-com-nav-item) {
+            color: var(--wcs-com-nav-item-color);
+            font-weight: var(--wcs-com-nav-item-font-weight);
+        }
+    }
+}
+
+@mixin com-nav-desktop {
+    .container {
+        margin: 0 auto;
+        max-width: var(--wcs-com-content-max-width);
+    }
+
+    nav {
+        height: 100%;
+    }
+
+    .menu-bar {
+        display: flex;
+        align-items: center;
+        height: 100%;
+        margin-left: var(--wcs-com-nav-menu-bar-margin-left);
+
+        ::slotted(*:not(:first-child)) {
+            margin-left: var(--wcs-com-nav-menu-bar-gap);
+        }
+
+        ::slotted(wcs-com-nav-item) {
+            height: 100%;
+            color: var(--wcs-com-nav-item-color);
+            font-weight: var(--wcs-com-nav-item-font-weight);
+        }
+
+        // Focus style for nav item in menu bar
+        ::slotted(wcs-com-nav-item:focus-within) {
+            @include com-nav-item-desktop-focus-outline(var(--wcs-com-nav-focus-outline-color));
+        }
+    }
+
+    #mobile-menu-icon {
+        display: none;
+    }
+
+    .mobile-overlay {
+        display: none !important;
+    }
+}
+
 :host {
     --wcs-com-nav-menu-bar-height: calc(var(--wcs-semantic-size-base) * 8);
     --wcs-com-nav-border-color: var(--wcs-semantic-color-border-secondary);
@@ -147,45 +263,16 @@
     }
 }
 
-@include for-tablet-portrait-up {
-    :host {
-        .container {
-            margin: 0 auto;
-            max-width: var(--wcs-com-content-max-width);
-        }
-
-        nav {
-            height: 100%;
-        }
-
-        .menu-bar {
-            display: flex;
-            align-items: center;
-            height: 100%;
-            margin-left: var(--wcs-com-nav-menu-bar-margin-left);
-
-            ::slotted(*:not(:first-child)) {
-                margin-left: var(--wcs-com-nav-menu-bar-gap);
-            }
-
-            ::slotted(wcs-com-nav-item) {
-                height: 100%;
-                color: var(--wcs-com-nav-item-color);
-                font-weight: var(--wcs-com-nav-item-font-weight);
-            }
-
-            // Focus style for nav item in menu bar
-            ::slotted(wcs-com-nav-item:focus-within) {
-                @include com-nav-item-desktop-focus-outline(var(--wcs-com-nav-focus-outline-color));
-            }
-        }
-
-        #mobile-menu-icon {
-            display: none;
-        }
-
-        .mobile-overlay {
-            display: none !important;
-        }
+:host(:not(.has-custom-breakpoint)) {
+    @include for-tablet-portrait-up {
+        @include com-nav-desktop;
     }
 }
+
+:host(.has-custom-breakpoint.desktop) {
+    @include com-nav-desktop;
+}
+
+:host(.has-custom-breakpoint.mobile) {
+    @include com-nav-mobile;
+}
\ No newline at end of file
diff --git a/src/components/com-nav/com-nav.tsx b/src/components/com-nav/com-nav.tsx
index c2dea9bc..97501819 100644
--- a/src/components/com-nav/com-nav.tsx
+++ b/src/components/com-nav/com-nav.tsx
@@ -9,6 +9,7 @@ import {
     Method,
     Prop,
     State,
+    Watch,
 } from '@stencil/core';
 import { comNavDidLoadWithResizeObserver, registerCloseHandlerForFocusOutEventOn } from "./com-nav-utils";
 import { inheritAriaAttributes, inheritAttributes, isEscapeKey } from "../../utils/helpers";
@@ -61,6 +62,11 @@ export class ComNav implements ComponentInterface, MutableAriaAttribute {
 
     /** Name of the application to be displayed in the menu bar */
     @Prop() appName: string;
+    /**
+     * Breakpoint at which the component switches from desktop to mobile mode.
+     * If not set, the breakpoint is set to default value of 575px.
+     */
+    @Prop() breakpoint?: number;
 
     @State() private mobileMenuOpen: boolean = false;
     @State() public currentActiveSizing: ComNavSize;
@@ -80,12 +86,35 @@ export class ComNav implements ComponentInterface, MutableAriaAttribute {
             ...inheritAttributes(this.el, COM_NAV_INHERITED_ATTRS)
         };
 
-        const slottedNavigableItems = this.el.querySelectorAll(':scope > wcs-com-nav-submenu:not([slot]), :scope > a:not([slot])');
-        registerCloseHandlerForFocusOutEventOn<HTMLWcsComNavSubmenuElement>(slottedNavigableItems, WCS_COM_NAV_SUBMENU_TAG_NAME);
+        registerCloseHandlerForFocusOutEventOn<HTMLWcsComNavSubmenuElement>(this.getWcsComNavSubmenuElements(), WCS_COM_NAV_SUBMENU_TAG_NAME);
+    }
+
+    private getWcsComNavSubmenuElements() {
+        return this.el.querySelectorAll(':scope > wcs-com-nav-submenu:not([slot]), :scope > a:not([slot])');
     }
 
     componentDidLoad(): void {
-        if(!this.resizeObserver) {
+        this.setupSizingMode();
+    }
+    
+    @Watch('breakpoint')
+    breakpointChanged() {
+        this.setupSizingMode();
+    }
+
+    private setupSizingMode(): void {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+        
+        if (this.breakpoint !== undefined) {            
+            this.resizeObserver = comNavDidLoadWithResizeObserver(this, this.breakpoint);
+            this.resizeObserver.observe(document.body);
+            this.getWcsComNavSubmenuElements().forEach(item => {
+                (item as HTMLWcsComNavSubmenuElement).setCustomBreakpoint(this.breakpoint);
+            });
+        } else {            
             this.resizeObserver = comNavDidLoadWithResizeObserver(this);
             this.resizeObserver.observe(document.body);
         }
@@ -117,8 +146,10 @@ export class ComNav implements ComponentInterface, MutableAriaAttribute {
     render() {
         const menuAriaLabel = this.inheritedAttributes['aria-label'] || undefined;
         
+        const hasCustomBreakpoint = this.breakpoint ? 'has-custom-breakpoint' : '';
+
         return (
-            <Host>
+            <Host class={`${hasCustomBreakpoint} ${this.breakpoint ? this.currentActiveSizing : ''}`} >
                 <div class="container">
                     <div class="container-left">
                         <div class="app-name">{this.appName}
-- 
GitLab