From a8ee4cdb4ad6ec5204ff93b19ba731f9d382854d Mon Sep 17 00:00:00 2001
From: Stavros Tomas <55188371+stavros-tomas@users.noreply.github.com>
Date: Fri, 14 Jun 2024 07:23:21 +0100
Subject: [PATCH] [CHUX-467] ec-navigation mobile view (#1976)

* chux-467:feat:mobile-view

* chux-467:chore:mobile-view more updates

* chux-467:chore:mobile-view more updates

* CHUX-467:test:unit

* CHUX-467:test: more unit tests

* CHUX-467:chore:export letter icon

* CHUX-467:chore: adjust width of images and make menu close on navigation link clicked

* CHUX-467:chore:update snapshots

* CHUX-467:chore:update styles
---
 .../__snapshots__/ec-menu.spec.ts.snap        |  47 ++
 src/components/ec-menu/ec-menu.spec.ts        |  17 +
 src/components/ec-menu/ec-menu.vue            |   5 +
 .../ec-mobile-header.spec.ts.snap             |   3 +-
 .../ec-mobile-header/ec-mobile-header.spec.ts |   9 +
 .../ec-mobile-header/ec-mobile-header.vue     |  25 +-
 .../ec-navigation-link/ec-navigation-link.vue |   5 +
 .../__snapshots__/ec-navigation.spec.ts.snap  | 505 ++++++++++++++----
 .../ec-navigation/ec-navigation.spec.ts       |  56 +-
 .../ec-navigation/ec-navigation.vue           | 105 +++-
 src/main.ts                                   |   2 +
 11 files changed, 648 insertions(+), 131 deletions(-)

diff --git a/src/components/ec-menu/__snapshots__/ec-menu.spec.ts.snap b/src/components/ec-menu/__snapshots__/ec-menu.spec.ts.snap
index 065f8888c..a2bdc76f4 100644
--- a/src/components/ec-menu/__snapshots__/ec-menu.spec.ts.snap
+++ b/src/components/ec-menu/__snapshots__/ec-menu.spec.ts.snap
@@ -1,5 +1,52 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`EcMenu > @events > should propagate the event from the navigation link 1`] = `
+<ul
+  class="ec-menu"
+  data-test="ec-menu"
+>
+  
+  <li
+    class="ec-menu__item"
+    data-test="ec-menu__item"
+  >
+    <ec-stub
+      active-class="ec-navigation-link--is-active"
+      class="ec-menu__link ec-navigation-link"
+      data-test="ec-menu__link test-router-link ec-navigation-link ec-stub router-link-stub"
+      to="/bat"
+    >
+      
+      <svg
+        class="ec-icon ec-navigation-link__icon"
+        data-test="ec-navigation-link__icon"
+        height="24"
+        width="24"
+      >
+        <use
+          xlink:href="#ec-simple-trade"
+        />
+      </svg>
+      <transition-stub
+        appear="false"
+        css="true"
+        name="ec-navigation-link__text-fade"
+        persisted="true"
+      >
+        <span
+          class="ec-navigation-link__text"
+          data-test="ec-navigation-link__text"
+        >
+          Bat
+        </span>
+      </transition-stub>
+      
+    </ec-stub>
+  </li>
+  
+</ul>
+`;
+
 exports[`EcMenu > should attach custom listeners passed in the link definition 1`] = `
 <ul
   class="ec-menu"
diff --git a/src/components/ec-menu/ec-menu.spec.ts b/src/components/ec-menu/ec-menu.spec.ts
index ccc4df889..ab5c831db 100644
--- a/src/components/ec-menu/ec-menu.spec.ts
+++ b/src/components/ec-menu/ec-menu.spec.ts
@@ -30,6 +30,14 @@ const links: MenuLink[] = [
   },
 ];
 
+const routerLink: MenuLink[] = [{
+  url: '/bat',
+  iconName: IconName.SIMPLE_TRADE,
+  text: 'Bat',
+  isRouterLink: true,
+  dataTest: 'test-router-link',
+}];
+
 describe('EcMenu', () => {
   function mountEcMenu(props?: Partial<MenuProps>, mountOpts?: ComponentMountingOptions<typeof EcMenu>) {
     return mount(EcMenu, {
@@ -112,4 +120,13 @@ describe('EcMenu', () => {
     await wrapper.findByDataTest('ec-menu__link').trigger('test');
     expect(testSpy).toHaveBeenCalledTimes(1);
   });
+
+  describe('@events', () => {
+    it('should propagate the event from the navigation link', async () => {
+      const wrapper = mountEcMenu({ links: routerLink });
+      expect(wrapper.element).toMatchSnapshot();
+      await wrapper.findByDataTest('test-router-link').trigger('click');
+      expect(wrapper.emitted('navigation-link-clicked')?.length).toBe(1);
+    });
+  });
 });
diff --git a/src/components/ec-menu/ec-menu.vue b/src/components/ec-menu/ec-menu.vue
index b82171f3d..558f52a40 100644
--- a/src/components/ec-menu/ec-menu.vue
+++ b/src/components/ec-menu/ec-menu.vue
@@ -26,6 +26,7 @@
         :is-collapsed="isCollapsed"
         :is-compact="horizontal"
         v-on="link.on || {}"
+        @navigation-link-clicked="emit('navigation-link-clicked')"
       />
     </li>
   </ul>
@@ -37,6 +38,10 @@ import { computed } from 'vue';
 import EcNavigationLink from '../ec-navigation-link';
 import type { MenuLink, MenuProps } from './types';
 
+const emit = defineEmits<{
+  'navigation-link-clicked': [],
+}>();
+
 const props = withDefaults(defineProps<MenuProps>(), {
   links: () => [],
 });
diff --git a/src/components/ec-mobile-header/__snapshots__/ec-mobile-header.spec.ts.snap b/src/components/ec-mobile-header/__snapshots__/ec-mobile-header.spec.ts.snap
index 832e84d10..264d42444 100644
--- a/src/components/ec-mobile-header/__snapshots__/ec-mobile-header.spec.ts.snap
+++ b/src/components/ec-mobile-header/__snapshots__/ec-mobile-header.spec.ts.snap
@@ -6,7 +6,7 @@ exports[`EcMobileHeader > should render properly 1`] = `
   data-test="ec-mobile-header"
 >
   <div
-    class="ec-mobile-header__logo"
+    class="tw-leading-reset"
   >
     
     <img
@@ -16,6 +16,7 @@ exports[`EcMobileHeader > should render properly 1`] = `
   </div>
   <button
     class="ec-mobile-header__menu"
+    data-test="ec-mobile-header__menu"
     type="button"
   >
     <svg
diff --git a/src/components/ec-mobile-header/ec-mobile-header.spec.ts b/src/components/ec-mobile-header/ec-mobile-header.spec.ts
index f4fda027e..c2d705ddb 100644
--- a/src/components/ec-mobile-header/ec-mobile-header.spec.ts
+++ b/src/components/ec-mobile-header/ec-mobile-header.spec.ts
@@ -19,4 +19,13 @@ describe('EcMobileHeader', () => {
     });
     expect(wrapper.element).toMatchSnapshot();
   });
+
+  describe('@events', () => {
+    it('should emit an event when the mobile menu button is clicked', async () => {
+      const wrapper = mountMobileHeader();
+
+      await wrapper.findByDataTest('ec-mobile-header__menu').trigger('click');
+      expect(wrapper.emitted('open-mobile-menu')?.length).toBe(1);
+    });
+  });
 });
diff --git a/src/components/ec-mobile-header/ec-mobile-header.vue b/src/components/ec-mobile-header/ec-mobile-header.vue
index 8e516f66b..5cf13b8b8 100644
--- a/src/components/ec-mobile-header/ec-mobile-header.vue
+++ b/src/components/ec-mobile-header/ec-mobile-header.vue
@@ -3,10 +3,15 @@
     class="ec-mobile-header"
     data-test="ec-mobile-header"
   >
-    <div class="ec-mobile-header__logo">
+    <div class="tw-leading-reset">
       <slot name="logo" />
     </div>
-    <button type="button" class="ec-mobile-header__menu">
+    <button
+      type="button"
+      class="ec-mobile-header__menu"
+      data-test="ec-mobile-header__menu"
+      @click="emit('open-mobile-menu')"
+    >
       <ec-icon
         class="ec-mobile-header__menu__icon"
         :name="IconName.SIMPLE_MENU"
@@ -19,6 +24,10 @@
 <script setup lang="ts">
 import EcIcon from '../ec-icon';
 import { IconName } from '../ec-icon/types';
+
+const emit = defineEmits<{
+  'open-mobile-menu': [],
+}>();
 </script>
 
 <style>
@@ -28,17 +37,19 @@ import { IconName } from '../ec-icon/types';
   @apply tw-py-16 tw-px-24;
   @apply tw-bg-gray-7;
 
-  &__logo {
-    @apply tw-h-32;
-  }
-
   &__menu {
     @apply tw-flex tw-items-center;
-    @apply tw-border-0 tw-p-0 tw-bg-transparent;
+    @apply tw-border-0 tw-p-0;
+    @apply tw-bg-transparent;
 
     &__icon {
       @apply tw-fill-key-4;
     }
+
+    &:hover {
+      @apply tw-cursor-pointer;
+      @apply tw-fill-key-3;
+    }
   }
 }
 </style>
diff --git a/src/components/ec-navigation-link/ec-navigation-link.vue b/src/components/ec-navigation-link/ec-navigation-link.vue
index d15d49d77..075b498dc 100644
--- a/src/components/ec-navigation-link/ec-navigation-link.vue
+++ b/src/components/ec-navigation-link/ec-navigation-link.vue
@@ -15,6 +15,7 @@
       'ec-navigation-link--light-mode': isInLightMode,
     }"
     :to="url"
+    @click="emit('navigation-link-clicked')"
   >
     <ec-icon
       class="ec-navigation-link__icon"
@@ -69,6 +70,10 @@
 import EcIcon from '../ec-icon/ec-icon.vue';
 import type { NavigationLinkProps } from './types';
 
+const emit = defineEmits<{
+  'navigation-link-clicked': [],
+}>();
+
 defineOptions({
   inheritAttrs: false,
 });
diff --git a/src/components/ec-navigation/__snapshots__/ec-navigation.spec.ts.snap b/src/components/ec-navigation/__snapshots__/ec-navigation.spec.ts.snap
index 3c51dd697..8feff7ae3 100644
--- a/src/components/ec-navigation/__snapshots__/ec-navigation.spec.ts.snap
+++ b/src/components/ec-navigation/__snapshots__/ec-navigation.spec.ts.snap
@@ -1,20 +1,318 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`EcNavigation > should apply light mode CSS classes if "isInLightMode" prop is true 1`] = `
+exports[`EcNavigation > mobile navigation > should close the mobile navigation when the close menu button is clicked > after 1`] = `
+<header
+  class="ec-mobile-header"
+  data-test="ec-mobile-header"
+>
+  <div
+    class="tw-leading-reset"
+  >
+    
+    <img
+      alt="Test Brand"
+      class="ec-navigation__mobile-header__logo"
+      data-test="ec-navigation__mobile-header__logo"
+      src="/img/my-brand.png"
+    />
+    
+  </div>
+  <button
+    class="ec-mobile-header__menu"
+    data-test="ec-mobile-header__menu"
+    type="button"
+  >
+    <svg
+      class="ec-icon ec-mobile-header__menu__icon"
+      height="24"
+      width="24"
+    >
+      <use
+        xlink:href="#ec-simple-menu"
+      />
+    </svg>
+  </button>
+</header>
+`;
+
+exports[`EcNavigation > mobile navigation > should close the mobile navigation when the close menu button is clicked > before 1`] = `
 <div
-  class="ec-navigation ec-navigation--light-mode"
+  class="ec-navigation ec-navigation--mobile-mode"
+  data-test="ec-navigation"
+>
+  <div
+    class="ec-navigation__header"
+  >
+    <div
+      class="ec-navigation__branding--mobile-menu-open ec-navigation__branding"
+      data-test="ec-navigation__branding"
+    >
+      <img
+        alt="Test Brand"
+        class="ec-navigation__branding-logo ec-navigation__branding-logo--responsive"
+        data-test="ec-navigation__branding-logo"
+        src="/img/my-brand.png"
+      />
+    </div>
+    <button
+      class="ec-navigation__mobile-menu-close-button"
+      type="button"
+    >
+      <svg
+        class="ec-icon ec-navigation__mobile-menu-close-button"
+        data-test="ec-navigation__mobile-menu-close-button"
+        height="24"
+        width="24"
+      >
+        <use
+          xlink:href="#ec-simple-close"
+        />
+      </svg>
+    </button>
+  </div>
+  <!--v-if-->
+  <!--v-if-->
+  <!--v-if-->
+  <div
+    class="ec-navigation__block ec-navigation__menu"
+    data-test="ec-navigation__block ec-navigation__menu"
+  >
+    
+    
+  </div>
+  <!--v-if-->
+  <!--v-if-->
+</div>
+`;
+
+exports[`EcNavigation > mobile navigation > should close the mobile navigation when the slot \`onNavigationLinkClicked\` binding is triggered > after 1`] = `
+<header
+  class="ec-mobile-header"
+  data-test="ec-mobile-header"
+>
+  <div
+    class="tw-leading-reset"
+  >
+    
+    <img
+      alt="Test Brand"
+      class="ec-navigation__mobile-header__logo"
+      data-test="ec-navigation__mobile-header__logo"
+      src="/img/my-brand.png"
+    />
+    
+  </div>
+  <button
+    class="ec-mobile-header__menu"
+    data-test="ec-mobile-header__menu"
+    type="button"
+  >
+    <svg
+      class="ec-icon ec-mobile-header__menu__icon"
+      height="24"
+      width="24"
+    >
+      <use
+        xlink:href="#ec-simple-menu"
+      />
+    </svg>
+  </button>
+</header>
+`;
+
+exports[`EcNavigation > mobile navigation > should close the mobile navigation when the slot \`onNavigationLinkClicked\` binding is triggered > before 1`] = `
+<div
+  class="ec-navigation ec-navigation--mobile-mode"
+  data-test="ec-navigation"
+>
+  <div
+    class="ec-navigation__header"
+  >
+    <div
+      class="ec-navigation__branding--mobile-menu-open ec-navigation__branding"
+      data-test="ec-navigation__branding"
+    >
+      <img
+        alt="Test Brand"
+        class="ec-navigation__branding-logo ec-navigation__branding-logo--responsive"
+        data-test="ec-navigation__branding-logo"
+        src="/img/my-brand.png"
+      />
+    </div>
+    <button
+      class="ec-navigation__mobile-menu-close-button"
+      type="button"
+    >
+      <svg
+        class="ec-icon ec-navigation__mobile-menu-close-button"
+        data-test="ec-navigation__mobile-menu-close-button"
+        height="24"
+        width="24"
+      >
+        <use
+          xlink:href="#ec-simple-close"
+        />
+      </svg>
+    </button>
+  </div>
+  <!--v-if-->
+  <!--v-if-->
+  <!--v-if-->
+  <div
+    class="ec-navigation__block ec-navigation__menu"
+    data-test="ec-navigation__block ec-navigation__menu"
+  >
+    
+    <a
+      data-test="my-custom-link"
+    />
+    
+  </div>
+  <!--v-if-->
+  <!--v-if-->
+</div>
+`;
+
+exports[`EcNavigation > mobile navigation > should render mobile header if "isResponsive" prop is true 1`] = `
+<header
+  class="ec-mobile-header"
+  data-test="ec-mobile-header"
+>
+  <div
+    class="tw-leading-reset"
+  >
+    
+    <img
+      alt="Test Brand"
+      class="ec-navigation__mobile-header__logo"
+      data-test="ec-navigation__mobile-header__logo"
+      src="/img/my-brand.png"
+    />
+    
+  </div>
+  <button
+    class="ec-mobile-header__menu"
+    data-test="ec-mobile-header__menu"
+    type="button"
+  >
+    <svg
+      class="ec-icon ec-mobile-header__menu__icon"
+      height="24"
+      width="24"
+    >
+      <use
+        xlink:href="#ec-simple-menu"
+      />
+    </svg>
+  </button>
+</header>
+`;
+
+exports[`EcNavigation > mobile navigation > should show render the mobile navigation when the mobile header menu button is clicked > after 1`] = `
+<div
+  class="ec-navigation ec-navigation--mobile-mode"
   data-test="ec-navigation"
 >
   <div
-    class="ec-navigation__branding"
-    data-test="ec-navigation__branding"
+    class="ec-navigation__header"
   >
+    <div
+      class="ec-navigation__branding--mobile-menu-open ec-navigation__branding"
+      data-test="ec-navigation__branding"
+    >
+      <img
+        alt="Test Brand"
+        class="ec-navigation__branding-logo ec-navigation__branding-logo--responsive"
+        data-test="ec-navigation__branding-logo"
+        src="/img/my-brand.png"
+      />
+    </div>
+    <button
+      class="ec-navigation__mobile-menu-close-button"
+      type="button"
+    >
+      <svg
+        class="ec-icon ec-navigation__mobile-menu-close-button"
+        data-test="ec-navigation__mobile-menu-close-button"
+        height="24"
+        width="24"
+      >
+        <use
+          xlink:href="#ec-simple-close"
+        />
+      </svg>
+    </button>
+  </div>
+  <!--v-if-->
+  <!--v-if-->
+  <!--v-if-->
+  <div
+    class="ec-navigation__block ec-navigation__menu"
+    data-test="ec-navigation__block ec-navigation__menu"
+  >
+    
+    
+  </div>
+  <!--v-if-->
+  <!--v-if-->
+</div>
+`;
+
+exports[`EcNavigation > mobile navigation > should show render the mobile navigation when the mobile header menu button is clicked > before 1`] = `
+<header
+  class="ec-mobile-header"
+  data-test="ec-mobile-header"
+>
+  <div
+    class="tw-leading-reset"
+  >
+    
     <img
       alt="Test Brand"
-      class="ec-navigation__branding-logo"
-      data-test="ec-navigation__branding-logo"
+      class="ec-navigation__mobile-header__logo"
+      data-test="ec-navigation__mobile-header__logo"
       src="/img/my-brand.png"
     />
+    
+  </div>
+  <button
+    class="ec-mobile-header__menu"
+    data-test="ec-mobile-header__menu"
+    type="button"
+  >
+    <svg
+      class="ec-icon ec-mobile-header__menu__icon"
+      height="24"
+      width="24"
+    >
+      <use
+        xlink:href="#ec-simple-menu"
+      />
+    </svg>
+  </button>
+</header>
+`;
+
+exports[`EcNavigation > should apply light mode CSS classes if "isInLightMode" prop is true 1`] = `
+<div
+  class="ec-navigation ec-navigation--light-mode"
+  data-test="ec-navigation"
+>
+  <div
+    class=""
+  >
+    <div
+      class="ec-navigation__branding"
+      data-test="ec-navigation__branding"
+    >
+      <img
+        alt="Test Brand"
+        class="ec-navigation__branding-logo"
+        data-test="ec-navigation__branding-logo"
+        src="/img/my-brand.png"
+      />
+    </div>
+    <!--v-if-->
   </div>
   <!--v-if-->
   <hr
@@ -39,15 +337,20 @@ exports[`EcNavigation > should be collapsable when isCollapsable is set 1`] = `
   data-test="ec-navigation"
 >
   <div
-    class="ec-navigation__branding"
-    data-test="ec-navigation__branding"
+    class=""
   >
-    <img
-      alt="Test Brand"
-      class="ec-navigation__branding-logo"
-      data-test="ec-navigation__branding-logo"
-      src="/img/my-brand.png"
-    />
+    <div
+      class="ec-navigation__branding"
+      data-test="ec-navigation__branding"
+    >
+      <img
+        alt="Test Brand"
+        class="ec-navigation__branding-logo"
+        data-test="ec-navigation__branding-logo"
+        src="/img/my-brand.png"
+      />
+    </div>
+    <!--v-if-->
   </div>
   <!--v-if-->
   <!--v-if-->
@@ -70,15 +373,20 @@ exports[`EcNavigation > should be collapsed when isCollapsed is set to true 1`]
   data-test="ec-navigation"
 >
   <div
-    class="ec-navigation__branding"
-    data-test="ec-navigation__branding"
+    class=""
   >
-    <img
-      alt="Test Brand"
-      class="ec-navigation__branding-logo"
-      data-test="ec-navigation__branding-logo"
-      src="/img/my-brand.png"
-    />
+    <div
+      class="ec-navigation__branding"
+      data-test="ec-navigation__branding"
+    >
+      <img
+        alt="Test Brand"
+        class="ec-navigation__branding-logo"
+        data-test="ec-navigation__branding-logo"
+        src="/img/my-brand.png"
+      />
+    </div>
+    <!--v-if-->
   </div>
   <!--v-if-->
   <!--v-if-->
@@ -101,15 +409,20 @@ exports[`EcNavigation > should be expanded when isCollapsed is set to false 1`]
   data-test="ec-navigation"
 >
   <div
-    class="ec-navigation__branding"
-    data-test="ec-navigation__branding"
+    class=""
   >
-    <img
-      alt="Test Brand"
-      class="ec-navigation__branding-logo"
-      data-test="ec-navigation__branding-logo"
-      src="/img/my-brand.png"
-    />
+    <div
+      class="ec-navigation__branding"
+      data-test="ec-navigation__branding"
+    >
+      <img
+        alt="Test Brand"
+        class="ec-navigation__branding-logo"
+        data-test="ec-navigation__branding-logo"
+        src="/img/my-brand.png"
+      />
+    </div>
+    <!--v-if-->
   </div>
   <!--v-if-->
   <!--v-if-->
@@ -131,7 +444,12 @@ exports[`EcNavigation > should not render branding if logo is given in branding
   class="ec-navigation"
   data-test="ec-navigation"
 >
-  <!--v-if-->
+  <div
+    class=""
+  >
+    <!--v-if-->
+    <!--v-if-->
+  </div>
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -152,7 +470,12 @@ exports[`EcNavigation > should not render branding if no logo is given in brandi
   class="ec-navigation"
   data-test="ec-navigation"
 >
-  <!--v-if-->
+  <div
+    class=""
+  >
+    <!--v-if-->
+    <!--v-if-->
+  </div>
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -174,15 +497,20 @@ exports[`EcNavigation > should only render mandatory slot if no other slots were
   data-test="ec-navigation"
 >
   <div
-    class="ec-navigation__branding"
-    data-test="ec-navigation__branding"
+    class=""
   >
-    <img
-      alt="Test Brand"
-      class="ec-navigation__branding-logo"
-      data-test="ec-navigation__branding-logo"
-      src="/img/my-brand.png"
-    />
+    <div
+      class="ec-navigation__branding"
+      data-test="ec-navigation__branding"
+    >
+      <img
+        alt="Test Brand"
+        class="ec-navigation__branding-logo"
+        data-test="ec-navigation__branding-logo"
+        src="/img/my-brand.png"
+      />
+    </div>
+    <!--v-if-->
   </div>
   <!--v-if-->
   <!--v-if-->
@@ -205,15 +533,20 @@ exports[`EcNavigation > should render all given slots 1`] = `
   data-test="ec-navigation"
 >
   <div
-    class="ec-navigation__branding"
-    data-test="ec-navigation__branding"
+    class=""
   >
-    <img
-      alt="Test Brand"
-      class="ec-navigation__branding-logo"
-      data-test="ec-navigation__branding-logo"
-      src="/img/my-brand.png"
-    />
+    <div
+      class="ec-navigation__branding"
+      data-test="ec-navigation__branding"
+    >
+      <img
+        alt="Test Brand"
+        class="ec-navigation__branding-logo"
+        data-test="ec-navigation__branding-logo"
+        src="/img/my-brand.png"
+      />
+    </div>
+    <!--v-if-->
   </div>
   <div
     class="ec-navigation__block ec-navigation__user-info"
@@ -289,15 +622,20 @@ exports[`EcNavigation > should render branding logo and name when given 1`] = `
   data-test="ec-navigation"
 >
   <div
-    class="ec-navigation__branding"
-    data-test="ec-navigation__branding"
+    class=""
   >
-    <img
-      alt="My Branding"
-      class="ec-navigation__branding-logo"
-      data-test="ec-navigation__branding-logo"
-      src="/img/my.png"
-    />
+    <div
+      class="ec-navigation__branding"
+      data-test="ec-navigation__branding"
+    >
+      <img
+        alt="My Branding"
+        class="ec-navigation__branding-logo"
+        data-test="ec-navigation__branding-logo"
+        src="/img/my.png"
+      />
+    </div>
+    <!--v-if-->
   </div>
   <!--v-if-->
   <!--v-if-->
@@ -314,40 +652,6 @@ exports[`EcNavigation > should render branding logo and name when given 1`] = `
 </div>
 `;
 
-exports[`EcNavigation > should render mobile header if "isResponsive" prop is true 1`] = `
-<header
-  class="ec-mobile-header"
-  data-test="ec-mobile-header"
->
-  <div
-    class="ec-mobile-header__logo"
-  >
-    
-    <img
-      alt="Test Brand"
-      class="ec-navigation__mobile-header__logo"
-      data-test="ec-navigation__mobile-header__logo"
-      src="/img/my-brand.png"
-    />
-    
-  </div>
-  <button
-    class="ec-mobile-header__menu"
-    type="button"
-  >
-    <svg
-      class="ec-icon ec-mobile-header__menu__icon"
-      height="24"
-      width="24"
-    >
-      <use
-        xlink:href="#ec-simple-menu"
-      />
-    </svg>
-  </button>
-</header>
-`;
-
 exports[`EcNavigation > should render with custom attributes 1`] = `
 <div
   class="ec-navigation my-class"
@@ -355,15 +659,20 @@ exports[`EcNavigation > should render with custom attributes 1`] = `
   id="test-id"
 >
   <div
-    class="ec-navigation__branding"
-    data-test="ec-navigation__branding"
+    class=""
   >
-    <img
-      alt="Test Brand"
-      class="ec-navigation__branding-logo"
-      data-test="ec-navigation__branding-logo"
-      src="/img/my-brand.png"
-    />
+    <div
+      class="ec-navigation__branding"
+      data-test="ec-navigation__branding"
+    >
+      <img
+        alt="Test Brand"
+        class="ec-navigation__branding-logo"
+        data-test="ec-navigation__branding-logo"
+        src="/img/my-brand.png"
+      />
+    </div>
+    <!--v-if-->
   </div>
   <!--v-if-->
   <!--v-if-->
diff --git a/src/components/ec-navigation/ec-navigation.spec.ts b/src/components/ec-navigation/ec-navigation.spec.ts
index f7a406d65..ea64687c3 100644
--- a/src/components/ec-navigation/ec-navigation.spec.ts
+++ b/src/components/ec-navigation/ec-navigation.spec.ts
@@ -93,19 +93,63 @@ describe('EcNavigation', () => {
     expect(wrapper.findAllByDataTest('ec-navigation__block').length).toBe(5);
   });
 
-  it('should render mobile header if "isResponsive" prop is true', () => {
+  it('should apply light mode CSS classes if "isInLightMode" prop is true', () => {
     const wrapper = mountNavigation({
-      isResponsive: true,
+      isInLightMode: true,
     });
 
     expect(wrapper.element).toMatchSnapshot();
   });
 
-  it('should apply light mode CSS classes if "isInLightMode" prop is true', () => {
-    const wrapper = mountNavigation({
-      isInLightMode: true,
+  describe('mobile navigation', () => {
+    it('should render mobile header if "isResponsive" prop is true', () => {
+      const wrapper = mountNavigation({
+        isResponsive: true,
+      });
+
+      expect(wrapper.element).toMatchSnapshot();
     });
 
-    expect(wrapper.element).toMatchSnapshot();
+    it('should show render the mobile navigation when the mobile header menu button is clicked', async () => {
+      const wrapper = mountNavigation({
+        isResponsive: true,
+      });
+
+      expect(wrapper.element).toMatchSnapshot('before');
+      await wrapper.findByDataTest('ec-mobile-header__menu').trigger('click');
+      expect(wrapper.element).toMatchSnapshot('after');
+    });
+
+    it('should close the mobile navigation when the close menu button is clicked', async () => {
+      const wrapper = mountNavigation({
+        isResponsive: true,
+      });
+
+      await wrapper.findByDataTest('ec-mobile-header__menu').trigger('click');
+      expect(wrapper.element).toMatchSnapshot('before');
+
+      await wrapper.findByDataTest('ec-navigation__mobile-menu-close-button').trigger('click');
+      expect(wrapper.element).toMatchSnapshot('after');
+    });
+
+    it('should close the mobile navigation when the slot `onNavigationLinkClicked` binding is triggered', async () => {
+      const wrapper = mountNavigation({
+        isResponsive: true,
+      }, {
+        slots: {
+          menu: `<template #menu="{onNavigationLinkClicked}">
+              <a @click=onNavigationLinkClicked data-test="my-custom-link"></a>
+            </template>`,
+        },
+      });
+
+      // Open mobile menu first
+      await wrapper.findByDataTest('ec-mobile-header__menu').trigger('click');
+      expect(wrapper.element).toMatchSnapshot('before');
+
+      // Close navigation when a menu item is clicked
+      await wrapper.findByDataTest('my-custom-link').trigger('click');
+      expect(wrapper.element).toMatchSnapshot('after');
+    });
   });
 });
diff --git a/src/components/ec-navigation/ec-navigation.vue b/src/components/ec-navigation/ec-navigation.vue
index 6e7511bbe..e1e51937e 100644
--- a/src/components/ec-navigation/ec-navigation.vue
+++ b/src/components/ec-navigation/ec-navigation.vue
@@ -1,5 +1,8 @@
 <template>
-  <ec-mobile-header v-if="isResponsive">
+  <ec-mobile-header
+    v-if="isResponsive && !isMobileMenuOpen"
+    @open-mobile-menu="isMobileMenuOpen = true"
+  >
     <template #logo>
       <img
         class="ec-navigation__mobile-header__logo"
@@ -16,69 +19,102 @@
       'ec-navigation--is-collapsable': isCollapsable,
       'ec-navigation--is-collapsed': isCollapsed,
       'ec-navigation--light-mode': isInLightMode,
+      'ec-navigation--mobile-mode': isMobileMenuOpen,
     }"
     v-bind="{
       ...$attrs,
       'data-test': $attrs['data-test'] ? `${$attrs['data-test']} ec-navigation` : 'ec-navigation',
     }"
   >
-    <div
-      v-if="showBrandingLogo && branding.logo"
-      class="ec-navigation__branding"
-      data-test="ec-navigation__branding"
-    >
-      <img
-        class="ec-navigation__branding-logo"
-        :src="branding.logo"
-        :alt="branding.name"
-        data-test="ec-navigation__branding-logo"
+    <div :class="{ 'ec-navigation__header': isMobileMenuOpen }">
+      <div
+        v-if="showBrandingLogo && branding.logo"
+        :class="{
+          'ec-navigation__branding--mobile-menu-open': isMobileMenuOpen,
+        }"
+        class="ec-navigation__branding"
+        data-test="ec-navigation__branding"
+      >
+        <img
+          class="ec-navigation__branding-logo"
+          :class="{ 'ec-navigation__branding-logo--responsive': isResponsive }"
+          :src="branding.logo"
+          :alt="branding.name"
+          data-test="ec-navigation__branding-logo"
+        >
+      </div>
+
+      <button
+        v-if="isMobileMenuOpen"
+        type="button"
+        class="ec-navigation__mobile-menu-close-button"
+        @click="isMobileMenuOpen = false"
       >
+        <ec-icon
+          class="ec-navigation__mobile-menu-close-button"
+          data-test="ec-navigation__mobile-menu-close-button"
+          :name="IconName.SIMPLE_CLOSE"
+          :size="24"
+        />
+      </button>
     </div>
+
     <div
       v-if="$slots['user-info']"
       class="ec-navigation__block ec-navigation__user-info"
       data-test="ec-navigation__block ec-navigation__user-info"
     >
-      <slot name="user-info" />
+      <slot name="user-info" v-bind="{ onNavigationLinkClicked }" />
     </div>
+
     <hr
       v-if="isInLightMode"
       class="ec-navigation__separator"
     />
+
     <div
       v-if="$slots['call-to-action']"
       class="ec-navigation__block ec-navigation__call-to-action"
       data-test="ec-navigation__block ec-navigation__call-to-action"
     >
-      <slot name="call-to-action" />
+      <slot name="call-to-action" v-bind="{ onNavigationLinkClicked }" />
     </div>
+
     <div
       class="ec-navigation__block ec-navigation__menu"
       data-test="ec-navigation__block ec-navigation__menu"
     >
-      <slot name="menu" />
+      <slot name="menu" v-bind="{ onNavigationLinkClicked }" />
     </div>
+
     <div
       v-if="$slots['footer-menu']"
       class="ec-navigation__block ec-navigation__footer-menu"
       data-test="ec-navigation__block ec-navigation__footer-menu"
     >
-      <slot name="footer-menu" />
+      <slot name="footer-menu" v-bind="{ onNavigationLinkClicked }" />
     </div>
+
     <div
       v-if="$slots.copyright"
       class="ec-navigation__block ec-navigation__copyright"
       data-test="ec-navigation__block ec-navigation__copyright"
     >
-      <slot name="copyright" />
+      <slot name="copyright" v-bind="{ onNavigationLinkClicked }" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue';
+
+import EcIcon from '../ec-icon';
+import { IconName } from '../ec-icon/types';
 import EcMobileHeader from '../ec-mobile-header/ec-mobile-header.vue';
 import type { NavigationProps } from './types';
 
+const isMobileMenuOpen = ref(false);
+
 defineOptions({
   inheritAttrs: false,
 });
@@ -86,6 +122,12 @@ defineOptions({
 withDefaults(defineProps<NavigationProps>(), {
   showBrandingLogo: true,
 });
+
+function onNavigationLinkClicked() {
+  if (isMobileMenuOpen.value) {
+    isMobileMenuOpen.value = false;
+  }
+}
 </script>
 
 <style>
@@ -107,13 +149,17 @@ withDefaults(defineProps<NavigationProps>(), {
   @apply tw-flex tw-flex-col;
   @apply tw-overflow-y-auto tw-overflow-x-hidden;
 
+  &__header {
+    @apply tw-flex tw-justify-between tw-items-center;
+  }
+
   &--light-mode {
     @apply tw-bg-gray-7;
     @apply tw-text-gray-3;
-    @apply tw-py-32 tw-px-24;
+    @apply tw-py-16 tw-px-24;
 
     .ec-navigation__branding {
-      @apply tw-m-0 tw-mb-16 tw-p-0;
+      @apply tw-m-0 tw-p-0;
       @apply tw-text-left;
     }
   }
@@ -129,9 +175,26 @@ withDefaults(defineProps<NavigationProps>(), {
     width: var(--ec-navigation-is-collapsed-width);
   }
 
+  &--mobile-mode {
+    @apply tw-w-screen;
+  }
+
+  &__mobile-menu-close-button {
+    @apply tw-fill-key-4;
+    @apply tw-border-0;
+    @apply tw-p-0;
+    @apply tw-bg-transparent;
+    @apply tw-flex tw-items-center;
+
+    &:hover {
+      @apply tw-fill-key-3;
+      @apply tw-cursor-pointer;
+    }
+  }
+
   &__mobile-header {
     &__logo {
-      @apply tw-h-32;
+      @apply tw-w-88;
     }
   }
 
@@ -143,6 +206,10 @@ withDefaults(defineProps<NavigationProps>(), {
 
   &__branding-logo {
     @apply tw-align-top;
+
+    &--responsive {
+      @apply tw-w-88;
+    }
   }
 
   &__block {
diff --git a/src/main.ts b/src/main.ts
index a9b8f18e9..e1050ad33 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -49,6 +49,8 @@ export { default as EcInlineInputField } from './components/ec-inline-input-fiel
 export * from './components/ec-inline-input-field/types';
 export { default as EcInputField } from './components/ec-input-field';
 export * from './components/ec-input-field/types';
+export { default as EcLetterIcon } from './components/ec-letter-icon';
+export * from './components/ec-letter-icon/types';
 export { default as EcLoading } from './components/ec-loading';
 export * from './components/ec-loading/types';
 export { default as EcLoadingIcon } from './components/ec-loading-icon';