feat(component): add main navigation styles (#4148)

This PR is only about styling the main navigation according to the design. The behavior will come with another PR. --------- Co-authored-by: Philipp Gfeller <[email protected]>
swisspost · Dec 10, 2024 · c24101c · c24101c
1 parent 041d6fe
commit c24101c
Show file tree

Hide file tree

Showing 6 changed files with 142 additions and 82 deletions.
diff --git a/packages/components/src/components/post-header/post-header.scss b/packages/components/src/components/post-header/post-header.scss
@@ -1,4 +1,5 @@
 @use '@swisspost/design-system-styles/mixins/media';
+@use '@swisspost/design-system-styles/variables/animation';
 
 *,
 ::before,
@@ -24,6 +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;
@@ -79,18 +87,12 @@ slot[name='post-logo'] {
   gap: 1rem;
 }
 
-.title-header,
-.main-navigation {
+.title-header {
   display: flex;
   align-items: center;
   padding-inline: 12px;
   background: white;
-}
-
-.title-header {
   height: var(--main-header-height);
-  display: flex;
-  align-items: center;
 
   @include media.max(lg) {
     border-bottom: 1px solid black;
@@ -105,32 +107,54 @@ slot[name='post-logo'] {
   font-size: 28px !important;
 }
 
-.main-navigation {
-  position: sticky;
-  top: 24px;
-  height: var(--main-header-height);
-
+.mobile-toggle {
   @include media.min(lg) {
-    border-bottom: 1px solid black;
+    display: none;
   }
+}
 
-  @include media.max(lg) {
-    display: none;
+.navigation {
+  background: var(--post-core-color-brand-white);
+  box-shadow: var(--post-core-elevation-3);
+}
+
+// only for tablet and mobile
+@include media.max(lg) {
+  .navigation {
     position: absolute;
-    top: var(--header-height);
-    bottom: 0;
-    width: 100%;
-    background-color: white;
-    height: auto;
+    inset-inline: 0;
+    inset-block-end: calc(100vh - var(--header-height));
+    transition: transform animation.$transition-time-area-medium animation.$transition-easing-accelerate;
 
     &.extended {
-      display: block;
+      transform: translateY(100%);
+      transition-timing-function: animation.$transition-easing-decelerate;
     }
   }
-}
 
-.mobile-toggle {
-  @include media.min(lg) {
-    display: none;
+  ::slotted(post-mainnavigation),
+  .navigation-footer {
+    display: flex;
+    flex-direction: column;
+    padding-block: var(--post-core-dimension-16) var(--post-core-dimension-24);
+    padding-inline: var(--post-core-dimension-32);
+    opacity: 0;
+    transition-property: opacity;
+    transition-delay: animation.$transition-time-area-medium;
+
+    .navigation.extended & {
+      opacity: 1;
+      transition-delay: 0s;
+    }
+  }
+
+  ::slotted(post-mainnavigation) {
+    background-color: var(--post-core-color-sandgrey-002);
+    gap: var(--post-core-dimension-32);
+  }
+
+  .navigation-footer {
+    background-color: var(--post-core-color-sandgrey-006);
+    gap: var(--post-core-dimension-24);
   }
 }
diff --git a/packages/components/src/components/post-header/post-header.tsx b/packages/components/src/components/post-header/post-header.tsx
@@ -83,9 +83,9 @@ export class PostHeader {
   }
 
   render() {
-    const mainNavClasses = ['main-navigation'];
+    const navigationClasses = ['navigation'];
     if (this.mobileMenuExtended) {
-      mainNavClasses.push('extended');
+      navigationClasses.push('extended');
     }
 
     return (
@@ -114,13 +114,14 @@ export class PostHeader {
           </div>
         </div>
 
-        <div class={mainNavClasses.join(' ')}>
+        <div aria-hidden={`${!this.mobileMenuExtended}`} class={navigationClasses.join(' ')}>
           <slot name="post-mainnavigation"></slot>
+
           {(this.device === 'mobile' || this.device === 'tablet') && (
-            <slot name="meta-navigation"></slot>
-          )}
-          {(this.device === 'mobile' || this.device === 'tablet') && (
-            <slot name="post-language-switch"></slot>
+            <div class="navigation-footer">
+              <slot name="meta-navigation"></slot>
+              <slot name="post-language-switch"></slot>
+            </div>
           )}
         </div>
       </Host>

diff --git a/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss b/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss
@@ -1,60 +1,87 @@
+@use '@swisspost/design-system-styles/mixins/button';
+@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/tokens';
+@use '@swisspost/design-system-styles/tokens/elements';
+@use '@swisspost/design-system-styles/variables/animation';
 
-*,
-::before,
-::after {
-  box-sizing: border-box;
-}
+post-mainnavigation {
+  // reset links and buttons
+  post-list-item {
+    a {
+      text-decoration: none;
+      border-radius: 0;
+    }
 
-slot[name='back-button'],
-[slot='back-button'] {
-  @include media.min(lg) {
-    display: none;
-  }
-}
+    button {
+      @include button.reset-button;
+      text-align: start;
+    }
 
-h2 {
-  @include media.min(lg) {
-    @include utilities.visuallyhidden();
+    a,
+    button {
+      &:hover {
+        color: tokens.get('post-link-hover-fg', elements.$post-link);
+      }
+    }
   }
-}
 
-post-mainnavigation {
-  height: 100%;
-}
+  // desktop styles
+  @include media.min(lg) {
+    post-list > [role="list"] {
+      flex-direction: row;
+    }
 
-:host {
-  height: 100%;
-  display: block;
-}
+    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;
+        gap: var(--post-core-dimension-4);
+        font-size: var(--post-core-font-size-16);
+      }
 
-.main-navigation {
-  margin-block: 0;
-  list-style: none;
-  display: flex;
-  padding-left: 0;
-  gap: 1rem;
+      // styles specific to for the mega-dropdown buttons
+      button {
+        padding-inline-end: var(--post-core-dimension-12);
+        transition: border-block-end-color animation.$transition-base-timing;
 
-  @include media.max(lg) {
-    flex-direction: column;
-  }
+        &::after {
+          content: '';
+          @include icons.icon(2113);
+          height: var(--post-core-dimension-24);
+          width: var(--post-core-dimension-24);
+          transition: transform animation.$transition-base-timing;
+        }
 
-  > post-list {
-    display: flex;
-    align-items: stretch;
-    gap: 1rem;
-    height: 100%;
+        &.selected {
+          border-block-end-color: currentColor;
+          font-weight: var(--post-core-font-weight-700);
 
-    @include media.max(lg) {
-      flex-direction: column;
+          &::after {
+            transform: rotate(180deg);
+          }
+        }
+      }
     }
   }
 
-  a,
-  post-megadropdown-toggle {
-    height: 100%;
-    display: flex;
-    align-items: center;
+  // tablet/mobile styles
+  @include media.max(lg) {
+    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;
+        font-weight: var(--post-core-font-weight-700);
+      }
+    }
   }
 }
diff --git a/packages/components/src/components/post-mainnavigation/post-mainnavigation.tsx b/packages/components/src/components/post-mainnavigation/post-mainnavigation.tsx
@@ -36,7 +36,7 @@ export class PostMainnavigation {
         <div onClick={() => this.handleBackButtonClick()} class="back-button">
           <slot name="back-button"></slot>
         </div>
-        <nav class="main-navigation">
+        <nav>
           <slot></slot>
         </nav>
       </Host>

diff --git a/packages/components/src/index.html b/packages/components/src/index.html
@@ -52,11 +52,16 @@ <h1 slot="title">Application title</h1>
       </ul>
 
       <post-mainnavigation caption="Hauptnavigation">
-        <button slot="back-button"><- Back</button>
-        <post-list>
-          <h2><a href="/privatkunden">Privatkunden</a></h2>
+        <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="">
+          <h2>Main Navigation</h2>
+
           <!-- Link only level 1 -->
           <post-list-item><a href="/briefe">Briefe</a></post-list-item>
+          <post-list-item><a href="/pakete">Pakete</a></post-list-item>
 
           <!-- Level 1 with megadropdown -->
           <post-list-item>

diff --git a/packages/documentation/src/stories/components/header/components/header.markup.ts b/packages/documentation/src/stories/components/header/components/header.markup.ts
@@ -40,11 +40,14 @@ export default html`<post-header>
 
   <!-- Main navigation -->
   <post-mainnavigation caption="Hauptnavigation">
-    <button slot="back-button"><- Back</button>
-    <post-list>
-      <h2><a href="/privatkunden">Privatkunden</a></h2>
+    <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="">
+      <h2>Main Navigation</h2>
       <!-- Link only level 1 -->
       <post-list-item><a href="/briefe">Briefe</a></post-list-item>
+      <post-list-item><a href="/pakete">Pakete</a></post-list-item>
 
       <!-- Level 1 with megadropdown -->
       <post-list-item>