feat(components): improve main navigation logic

packages/components/src/components.d.ts

@@ -167,6 +167,10 @@ export namespace Components {
         "update": () => Promise<void>;
     }
     interface PostHeader {
+        /**
+          * Toggles the mobile navigation.
+         */
+        "toggleMobileMenu": () => Promise<void>;
     }
     /**
      * @class PostIcon - representing a stencil component
@@ -457,10 +461,6 @@ export interface PostLanguageOptionCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPostLanguageOptionElement;
 }
-export interface PostMainnavigationCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLPostMainnavigationElement;
-}
 export interface PostMegadropdownTriggerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPostMegadropdownTriggerElement;
@@ -623,18 +623,7 @@ declare global {
         prototype: HTMLPostLogoElement;
         new (): HTMLPostLogoElement;
     };
-    interface HTMLPostMainnavigationElementEventMap {
-        "postToggle": any;
-    }
     interface HTMLPostMainnavigationElement extends Components.PostMainnavigation, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLPostMainnavigationElementEventMap>(type: K, listener: (this: HTMLPostMainnavigationElement, ev: PostMainnavigationCustomEvent<HTMLPostMainnavigationElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLPostMainnavigationElementEventMap>(type: K, listener: (this: HTMLPostMainnavigationElement, ev: PostMainnavigationCustomEvent<HTMLPostMainnavigationElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLPostMainnavigationElement: {
         prototype: HTMLPostMainnavigationElement;
@@ -1024,10 +1013,6 @@ declare namespace LocalJSX {
         "url"?: string | URL;
     }
     interface PostMainnavigation {
-        /**
-          * Gets emitted when a user closes the main navigation on mobile
-         */
-        "onPostToggle"?: (event: PostMainnavigationCustomEvent<any>) => void;
     }
     interface PostMegadropdown {
     }

packages/components/src/components/post-header/post-header.tsx

@@ -1,4 +1,4 @@
-import { Component, h, Host, State, Element, Listen } from '@stencil/core';
+import { Component, h, Host, State, Element, Method } from '@stencil/core';
 import { throttle } from 'throttle-debounce';
 import { version } from '@root/package.json';
 
@@ -24,9 +24,14 @@ export class PostHeader {
     this.handleScrollEvent();
   }
 
-  @Listen('postMainNavigationClosed')
-  handlePostMainNavigationClosed() {
-    this.mobileMenuExtended = false;
+  /**
+   * Toggles the mobile navigation.
+   */
+  @Method()
+  async toggleMobileMenu() {
+    if (this.device !== 'desktop') {
+      this.mobileMenuExtended = !this.mobileMenuExtended;
+    }
   }
 
   private handleScrollEvent() {
@@ -78,10 +83,6 @@ export class PostHeader {
     }
   }
 
-  private handleMobileMenuToggle() {
-    this.mobileMenuExtended = !this.mobileMenuExtended;
-  }
-
   render() {
     const navigationClasses = ['navigation'];
     if (this.mobileMenuExtended) {
@@ -100,7 +101,7 @@ export class PostHeader {
             {this.device === 'desktop' && <slot name="meta-navigation"></slot>}
             <slot name="global-controls"></slot>
             {this.device === 'desktop' && <slot name="post-language-switch"></slot>}
-            <div onClick={() => this.handleMobileMenuToggle()} class="mobile-toggle">
+            <div onClick={() => this.toggleMobileMenu()} class="mobile-toggle">
               <slot name="post-togglebutton"></slot>
             </div>
           </div>

packages/components/src/components/post-header/readme.md

@@ -5,6 +5,19 @@
 <!-- Auto Generated Below -->
 
 
+## Methods
+
+### `toggleMobileMenu() => Promise<void>`
+
+Toggles the mobile navigation.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

packages/components/src/components/post-icon/readme.md

@@ -27,6 +27,7 @@ some content
  - [post-breadcrumb-item](../post-breadcrumb-item)
  - [post-card-control](../post-card-control)
  - [post-closebutton](../post-closebutton)
+ - [post-mainnavigation](../post-mainnavigation)
  - [post-rating](../post-rating)
  - [post-tag](../post-tag)
 
@@ -38,6 +39,7 @@ graph TD;
   post-breadcrumb-item --> post-icon
   post-card-control --> post-icon
   post-closebutton --> post-icon
+  post-mainnavigation --> post-icon
   post-rating --> post-icon
   post-tag --> post-icon
   style post-icon fill:#f9f,stroke:#333,stroke-width:4px

packages/components/src/components/post-mainnavigation/post-mainnavigation.scss

@@ -2,10 +2,13 @@
 @use '@swisspost/design-system-styles/mixins/icons';
 @use '@swisspost/design-system-styles/mixins/media';
 @use '@swisspost/design-system-styles/mixins/utilities';
+@use '@swisspost/design-system-styles/functions/icons' as icon-fn;
 @use '@swisspost/design-system-styles/functions/tokens';
 @use '@swisspost/design-system-styles/tokens/elements';
 @use '@swisspost/design-system-styles/variables/animation';
 
+$nav-height: var(--post-core-dimension-56);
+
 post-mainnavigation {
   // reset links and buttons
   post-list-item {
@@ -29,15 +32,57 @@ post-mainnavigation {
 
   // desktop styles
   @include media.min(lg) {
+
+    nav {
+      position: relative;
+      max-width: 100vw;
+      max-height: $nav-height;
+      overflow: hidden;
+      user-select: none;
+
+      &.scroll-snap-align-start post-list-item {
+        scroll-snap-align: start;
+      }
+
+      &.scroll-snap-align-end post-list-item {
+        scroll-snap-align: end;
+      }
+    }
+
+    .scroll-left-button,
+    .scroll-right-button {
+      position: absolute;
+      inset-block: 0;
+      @include button.reset-button;
+      background: var(--post-core-color-brand-white);
+      padding-inline: var(--post-core-dimension-4);
+    }
+
+    .scroll-left-button {
+      inset-inline-start: 0;
+      padding-inline-end: var(--post-core-dimension-12);
+      background: linear-gradient(90deg, var(--post-core-color-brand-white) 70%, transparent);
+    }
+
+    .scroll-right-button {
+      inset-inline-end: 0;
+      padding-inline-start: var(--post-core-dimension-12);
+      background: linear-gradient(-90deg, var(--post-core-color-brand-white) 70%, transparent);
+    }
+
     post-list > [role="list"] {
       flex-direction: row;
+      max-width: 100vw;
+      overflow: auto hidden;
+      scroll-snap-type: x proximity;
+      scroll-behavior: smooth;
     }
 
     post-list-item {
       a,
       button {
         padding-inline: var(--post-core-dimension-12);
-        height: var(--post-core-dimension-56);
+        height: $nav-height;
         border-block: var(--post-core-dimension-4) solid transparent;
         display: flex;
         align-items: center;