feat(components): update main navigation (#4210)

swisspost · Dec 12, 2024 · e4e2997 · e4e2997
1 parent 2b3010e
commit e4e2997
Show file tree

Hide file tree

Showing 9 changed files with 121 additions and 56 deletions.
diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
@@ -175,6 +175,10 @@ export namespace Components {
         "update": () => Promise<void>;
     }
     interface PostHeader {
+        /**
+          * Toggles the mobile navigation.
+         */
+        "toggleMobileMenu": () => Promise<void>;
     }
     /**
      * @class PostIcon - representing a stencil component

diff --git a/packages/components/src/components/post-header/post-header.scss b/packages/components/src/components/post-header/post-header.scss
@@ -25,19 +25,13 @@
   justify-content: space-between;
 }
 
-// ensures the global-header and title-header are above the main-navigation
-.global-header,
-.title-header {
-  position: relative;
-  z-index: 1;
-}
-
 .global-header {
   background-color: #ffcc00;
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: sticky;
+  z-index: 2;
   padding-inline-start: 4px;
   padding-inline-end: 12px;
 
@@ -88,6 +82,8 @@ slot[name='post-logo'] {
 }
 
 .title-header {
+  position: relative;
+  z-index: 1;
   display: flex;
   align-items: center;
   padding-inline: 12px;

diff --git a/packages/components/src/components/post-header/post-header.tsx b/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';
 import { SwitchVariant } from '@/components';
@@ -27,9 +27,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() {
@@ -97,10 +102,6 @@ export class PostHeader {
     this.host.querySelector('post-language-switch')?.setAttribute('variant', variant);
   }
 
-  private handleMobileMenuToggle() {
-    this.mobileMenuExtended = !this.mobileMenuExtended;
-  }
-
   render() {
     const navigationClasses = ['navigation'];
     if (this.mobileMenuExtended) {
@@ -119,7 +120,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>

diff --git a/packages/components/src/components/post-header/readme.md b/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/)*
diff --git a/packages/components/src/components/post-icon/readme.md b/packages/components/src/components/post-icon/readme.md
@@ -25,7 +25,6 @@ some content
  - [post-accordion-item](../post-accordion-item)
  - [post-back-to-top](../post-back-to-top)
  - [post-banner](../post-banner)
- - [post-breadcrumb-item](../post-breadcrumb-item)
  - [post-card-control](../post-card-control)
  - [post-closebutton](../post-closebutton)
  - [post-language-switch](../post-language-switch)
@@ -38,7 +37,6 @@ graph TD;
   post-accordion-item --> post-icon
   post-back-to-top --> post-icon
   post-banner --> post-icon
-  post-breadcrumb-item --> post-icon
   post-card-control --> post-icon
   post-closebutton --> post-icon
   post-language-switch --> post-icon

diff --git a/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss b/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 {
@@ -21,28 +24,58 @@ post-mainnavigation {
 
     a,
     button {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
       &:hover {
         color: tokens.get('post-link-hover-fg', elements.$post-link);
       }
+
+      &:focus-visible {
+        border-radius: var(--post-core-dimension-4);
+        z-index: 1;
+      }
     }
   }
 
   // desktop styles
   @include media.min(lg) {
-    post-list > [role="list"] {
-      flex-direction: row;
+    nav {
+      position: relative;
+      max-width: 100vw;
+      max-height: $nav-height;
+      user-select: none;
+    }
+
+    post-list {
+      margin-inline: var(--post-core-dimension-4);
+
+      > [role="list"] {
+        flex-direction: row;
+        max-width: 100vw;
+        transition: transform animation.$transition-base-timing;
+      }
     }
 
     post-list-item {
       a,
       button {
         padding-inline: var(--post-core-dimension-12);
-        height: var(--post-core-dimension-56);
-        border-block: var(--post-core-dimension-4) solid transparent;
-        display: flex;
-        align-items: center;
+        height: $nav-height;
         gap: var(--post-core-dimension-4);
         font-size: var(--post-core-font-size-16);
+        border-block: 0 solid transparent;
+        border-block-end-color: currentColor;
+
+        &:hover {
+          border-block-width: var(--post-core-dimension-2);
+        }
+
+        &.selected {
+          border-block-width: var(--post-core-dimension-4);
+          font-weight: var(--post-core-font-weight-700);
+        }
       }
 
       // styles specific to for the mega-dropdown buttons
@@ -58,29 +91,46 @@ post-mainnavigation {
           transition: transform animation.$transition-base-timing;
         }
 
-        &.selected {
-          border-block-end-color: currentColor;
-          font-weight: var(--post-core-font-weight-700);
-
-          &::after {
-            transform: rotate(180deg);
-          }
+        &.selected::after {
+          transform: rotate(180deg);
         }
       }
     }
+
+    [slot="back-button"] {
+      display: none;
+    }
   }
 
   // tablet/mobile styles
   @include media.max(lg) {
+    post-list > [role="list"] {
+      transform: none !important;
+    }
+
     post-list-item {
       a,
       button {
-        display: block;
         width: 100%;
-        padding-block: var(--post-core-dimension-12);
-        padding-inline-end: var(--post-core-dimension-12);
-        border-bottom: var(--post-core-dimension-1) solid currentColor;
+        height: var(--post-core-dimension-48);
+        padding-inline-end: var(--post-core-dimension-6);
+        gap: var(--post-core-dimension-16);
+        border-block: var(--post-core-dimension-1) solid transparent;
+        border-block-end-color: currentColor;
         font-weight: var(--post-core-font-weight-700);
+
+        &:hover,
+        &.selected {
+          border-block-width: var(--post-core-dimension-3);
+        }
+
+        &:hover::after {
+          content: '';
+          display: block;
+          @include icons.icon(3020);
+          width: var(--post-core-dimension-24);
+          height: var(--post-core-dimension-24);
+        }
       }
     }
   }

diff --git a/packages/components/src/components/post-mainnavigation/post-mainnavigation.tsx b/packages/components/src/components/post-mainnavigation/post-mainnavigation.tsx
@@ -1,33 +1,36 @@
-import { Component, Event, EventEmitter, Host, Listen, h } from '@stencil/core';
+import { Component, Event, EventEmitter, Host, h, Element } from '@stencil/core';
 
 @Component({
   tag: 'post-mainnavigation',
   shadow: false,
   styleUrl: './post-mainnavigation.scss',
 })
 export class PostMainnavigation {
+  private header: HTMLPostHeaderElement | null;
+
+  @Element() host: HTMLPostMainnavigationElement;
+
   /**
    * Gets emitted when a user closes the main navigation on mobile
    */
   @Event() postToggle: EventEmitter;
 
-  @Listen('postToggle')
-  handleMegadropdownToggled(event) {
-    // Find next element sibling
-    let megalodon;
-    let target = event.target;
-    while (target !== null) {
-      if (target.tagName === 'POST-MEGADROPDOWN') {
-        megalodon = target;
-        break;
-      }
-      target = target.nextElementSibling;
-    }
-    if (megalodon) megalodon.toggle(event.target);
+  /**
+   * Retrieves a reference to the closest 'post-header' element when the main navigation is added to the DOM.
+   */
+  connectedCallback() {
+    this.header = this.host.closest('post-header');
+  }
+
+  /**
+   * Cleans up references and disconnects the MutationObserver when the main navigation is removed from the DOM.
+   */
+  disconnectedCallback() {
+    this.header = null;
   }
 
   private handleBackButtonClick() {
-    this.postToggle.emit();
+    if (this.header) this.header.toggleMobileMenu();
   }
 
   render() {

diff --git a/packages/components/src/index.html b/packages/components/src/index.html
@@ -53,7 +53,7 @@ <h1 slot="title">Application title</h1>
 
       <!-- Main navigation -->
       <post-mainnavigation caption="Hauptnavigation">
-        <button slot="back-button" class="btn btn-sm btn-tertiary p-0">
+        <button type="button" slot="back-button" class="btn btn-sm btn-tertiary p-0">
           <post-icon aria-hidden="true" name="3024"></post-icon> Back
         </button>
 
@@ -68,7 +68,7 @@ <h2>Main Navigation</h2>
           <post-list-item>
             <post-megadropdown-trigger> Briefe </post-megadropdown-trigger>
             <post-megadropdown>
-              <button slot="back-button"><- Zurück</button>
+              <button type="button" slot="back-button"><- Zurück</button>
               <h2><a href="">Briefe title</a></h2>
               <post-list>
                 <h3>Briefe senden</h3>
@@ -90,7 +90,7 @@ <h3><a href="/schritt-für-schritt">Schritt für Schritt</a></h3>
           <post-list-item>
             <post-megadropdown-trigger> Pakete </post-megadropdown-trigger>
             <post-megadropdown>
-              <button slot="back-button"><- Zurück</button>
+              <button type="button" slot="back-button"><- Zurück</button>
               <h2><a href="">Pakete title</a></h2>
               <post-list>
                 <h3>Pakete senden</h3>

diff --git a/packages/documentation/src/stories/components/header/components/header.markup.ts b/packages/documentation/src/stories/components/header/components/header.markup.ts
@@ -38,7 +38,7 @@ export default html`<post-header>
 
   <!-- Main navigation -->
   <post-mainnavigation caption="Hauptnavigation">
-    <button slot="back-button" class="btn btn-sm btn-tertiary p-0">
+    <button type="button" slot="back-button" class="btn btn-sm btn-tertiary p-0">
       <post-icon aria-hidden="true" name="3024"></post-icon> Back
     </button>
     <post-list title-hidden="">
@@ -51,7 +51,7 @@ export default html`<post-header>
       <post-list-item>
         <post-megadropdown-trigger> Briefe </post-megadropdown-trigger>
         <post-megadropdown>
-          <button slot="back-button"><- Zurück</button>
+          <button type="button" slot="back-button"><- Zurück</button>
           <h2><a href="">Briefe title</a></h2>
           <post-list>
             <h3>Briefe senden</h3>
@@ -73,7 +73,7 @@ export default html`<post-header>
       <post-list-item>
         <post-megadropdown-trigger> Pakete </post-megadropdown-trigger>
         <post-megadropdown>
-          <button slot="back-button"><- Zurück</button>
+          <button type="button" slot="back-button"><- Zurück</button>
           <h2><a href="">Pakete title</a></h2>
           <post-list>
             <h3>Pakete senden</h3>