From e271221abe3bbfdb19c3c81271f9ae638a80d239 Mon Sep 17 00:00:00 2001
From: stavros <hello@stavrostomas.eu>
Date: Mon, 10 Jun 2024 16:15:17 +0100
Subject: [PATCH 1/9] chux-467:feat:mobile-view

---
 .../ec-mobile-header/ec-mobile-header.vue     | 10 ++++-
 .../ec-navigation/ec-navigation.vue           | 41 ++++++++++++++++++-
 2 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/src/components/ec-mobile-header/ec-mobile-header.vue b/src/components/ec-mobile-header/ec-mobile-header.vue
index 8e516f66b..f746cb9e5 100644
--- a/src/components/ec-mobile-header/ec-mobile-header.vue
+++ b/src/components/ec-mobile-header/ec-mobile-header.vue
@@ -6,7 +6,11 @@
     <div class="ec-mobile-header__logo">
       <slot name="logo" />
     </div>
-    <button type="button" class="ec-mobile-header__menu">
+    <button
+      type="button"
+      class="ec-mobile-header__menu"
+      @click="emit('open-mobile-menu')"
+    >
       <ec-icon
         class="ec-mobile-header__menu__icon"
         :name="IconName.SIMPLE_MENU"
@@ -19,6 +23,10 @@
 <script setup lang="ts">
 import EcIcon from '../ec-icon';
 import { IconName } from '../ec-icon/types';
+
+const emit = defineEmits<{
+  'open-mobile-menu': [],
+}>();
 </script>
 
 <style>
diff --git a/src/components/ec-navigation/ec-navigation.vue b/src/components/ec-navigation/ec-navigation.vue
index 6e7511bbe..1e82945f0 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,12 +19,25 @@
       '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',
     }"
   >
+    <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"
+        :name="IconName.SIMPLE_CLOSE"
+        :size="24"
+      />
+    </button>
     <div
       v-if="showBrandingLogo && branding.logo"
       class="ec-navigation__branding"
@@ -76,9 +92,15 @@
 </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(true);
+
 defineOptions({
   inheritAttrs: false,
 });
@@ -129,6 +151,23 @@ 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-none;
+    @apply tw-fixed tw-top-16 tw-right-24;
+
+    &:hover {
+      @apply tw-fill-key-3;
+      @apply tw-cursor-pointer;
+    }
+  }
+
   &__mobile-header {
     &__logo {
       @apply tw-h-32;

From a28266b5b3a10e6ea80aaea92907eb8bb57f5288 Mon Sep 17 00:00:00 2001
From: stavros <hello@stavrostomas.eu>
Date: Mon, 10 Jun 2024 16:29:11 +0100
Subject: [PATCH 2/9] chux-467:chore:mobile-view more updates

---
 src/components/ec-mobile-header/ec-mobile-header.vue | 10 +++++++++-
 src/components/ec-navigation/ec-navigation.vue       |  7 ++++---
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/ec-mobile-header/ec-mobile-header.vue b/src/components/ec-mobile-header/ec-mobile-header.vue
index f746cb9e5..65cc133aa 100644
--- a/src/components/ec-mobile-header/ec-mobile-header.vue
+++ b/src/components/ec-mobile-header/ec-mobile-header.vue
@@ -41,12 +41,20 @@ const emit = defineEmits<{
   }
 
   &__menu {
+    @apply tw-fixed;
+    @apply tw-top-16 tw-right-24;
     @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/ec-navigation.vue b/src/components/ec-navigation/ec-navigation.vue
index 1e82945f0..4cf9ad2bf 100644
--- a/src/components/ec-navigation/ec-navigation.vue
+++ b/src/components/ec-navigation/ec-navigation.vue
@@ -99,7 +99,7 @@ import { IconName } from '../ec-icon/types';
 import EcMobileHeader from '../ec-mobile-header/ec-mobile-header.vue';
 import type { NavigationProps } from './types';
 
-const isMobileMenuOpen = ref(true);
+const isMobileMenuOpen = ref(false);
 
 defineOptions({
   inheritAttrs: false,
@@ -156,11 +156,12 @@ withDefaults(defineProps<NavigationProps>(), {
   }
 
   &__mobile-menu-close-button {
+    @apply tw-fixed;
+    @apply tw-top-16 tw-right-24;
     @apply tw-fill-key-4;
     @apply tw-border-0;
     @apply tw-p-0;
-    @apply tw-bg-none;
-    @apply tw-fixed tw-top-16 tw-right-24;
+    @apply tw-bg-transparent;
 
     &:hover {
       @apply tw-fill-key-3;

From 6c5007a5d6906c2b2fb3e03a1e7265b95d4bcaae Mon Sep 17 00:00:00 2001
From: stavros <hello@stavrostomas.eu>
Date: Mon, 10 Jun 2024 17:41:59 +0100
Subject: [PATCH 3/9] chux-467:chore:mobile-view more updates

---
 src/components/ec-mobile-header/ec-mobile-header.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ec-mobile-header/ec-mobile-header.vue b/src/components/ec-mobile-header/ec-mobile-header.vue
index 65cc133aa..edc69ead0 100644
--- a/src/components/ec-mobile-header/ec-mobile-header.vue
+++ b/src/components/ec-mobile-header/ec-mobile-header.vue
@@ -41,7 +41,7 @@ const emit = defineEmits<{
   }
 
   &__menu {
-    @apply tw-fixed;
+    @apply tw-absolute;
     @apply tw-top-16 tw-right-24;
     @apply tw-flex tw-items-center;
     @apply tw-border-0 tw-p-0;

From 041ed988734ad06036c7527dd358d68a9021d854 Mon Sep 17 00:00:00 2001
From: stavros <hello@stavrostomas.eu>
Date: Tue, 11 Jun 2024 14:07:18 +0100
Subject: [PATCH 4/9] CHUX-467:test:unit

---
 .../__snapshots__/ec-mobile-header.spec.ts.snap       |  1 +
 .../ec-mobile-header/ec-mobile-header.spec.ts         |  9 +++++++++
 src/components/ec-mobile-header/ec-mobile-header.vue  |  1 +
 .../__snapshots__/ec-navigation.spec.ts.snap          | 11 +++++++++++
 4 files changed, 22 insertions(+)

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..5b481202b 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
@@ -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 edc69ead0..5f809f145 100644
--- a/src/components/ec-mobile-header/ec-mobile-header.vue
+++ b/src/components/ec-mobile-header/ec-mobile-header.vue
@@ -9,6 +9,7 @@
     <button
       type="button"
       class="ec-mobile-header__menu"
+      data-test="ec-mobile-header__menu"
       @click="emit('open-mobile-menu')"
     >
       <ec-icon
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..1bc2ab785 100644
--- a/src/components/ec-navigation/__snapshots__/ec-navigation.spec.ts.snap
+++ b/src/components/ec-navigation/__snapshots__/ec-navigation.spec.ts.snap
@@ -5,6 +5,7 @@ exports[`EcNavigation > should apply light mode CSS classes if "isInLightMode" p
   class="ec-navigation ec-navigation--light-mode"
   data-test="ec-navigation"
 >
+  <!--v-if-->
   <div
     class="ec-navigation__branding"
     data-test="ec-navigation__branding"
@@ -38,6 +39,7 @@ exports[`EcNavigation > should be collapsable when isCollapsable is set 1`] = `
   class="ec-navigation ec-navigation--is-collapsable"
   data-test="ec-navigation"
 >
+  <!--v-if-->
   <div
     class="ec-navigation__branding"
     data-test="ec-navigation__branding"
@@ -69,6 +71,7 @@ exports[`EcNavigation > should be collapsed when isCollapsed is set to true 1`]
   class="ec-navigation ec-navigation--is-collapsed"
   data-test="ec-navigation"
 >
+  <!--v-if-->
   <div
     class="ec-navigation__branding"
     data-test="ec-navigation__branding"
@@ -100,6 +103,7 @@ exports[`EcNavigation > should be expanded when isCollapsed is set to false 1`]
   class="ec-navigation"
   data-test="ec-navigation"
 >
+  <!--v-if-->
   <div
     class="ec-navigation__branding"
     data-test="ec-navigation__branding"
@@ -135,6 +139,7 @@ exports[`EcNavigation > should not render branding if logo is given in branding
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
   <div
     class="ec-navigation__block ec-navigation__menu"
     data-test="ec-navigation__block ec-navigation__menu"
@@ -156,6 +161,7 @@ exports[`EcNavigation > should not render branding if no logo is given in brandi
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
   <div
     class="ec-navigation__block ec-navigation__menu"
     data-test="ec-navigation__block ec-navigation__menu"
@@ -173,6 +179,7 @@ exports[`EcNavigation > should only render mandatory slot if no other slots were
   class="ec-navigation"
   data-test="ec-navigation"
 >
+  <!--v-if-->
   <div
     class="ec-navigation__branding"
     data-test="ec-navigation__branding"
@@ -204,6 +211,7 @@ exports[`EcNavigation > should render all given slots 1`] = `
   class="ec-navigation"
   data-test="ec-navigation"
 >
+  <!--v-if-->
   <div
     class="ec-navigation__branding"
     data-test="ec-navigation__branding"
@@ -288,6 +296,7 @@ exports[`EcNavigation > should render branding logo and name when given 1`] = `
   class="ec-navigation"
   data-test="ec-navigation"
 >
+  <!--v-if-->
   <div
     class="ec-navigation__branding"
     data-test="ec-navigation__branding"
@@ -333,6 +342,7 @@ exports[`EcNavigation > should render mobile header if "isResponsive" prop is tr
   </div>
   <button
     class="ec-mobile-header__menu"
+    data-test="ec-mobile-header__menu"
     type="button"
   >
     <svg
@@ -354,6 +364,7 @@ exports[`EcNavigation > should render with custom attributes 1`] = `
   data-test="my-data-test ec-navigation"
   id="test-id"
 >
+  <!--v-if-->
   <div
     class="ec-navigation__branding"
     data-test="ec-navigation__branding"

From b241d03c786e697cf2270948a07fad48f0a51952 Mon Sep 17 00:00:00 2001
From: stavros <hello@stavrostomas.eu>
Date: Tue, 11 Jun 2024 15:40:29 +0100
Subject: [PATCH 5/9] CHUX-467:test: more unit tests

---
 .../__snapshots__/ec-navigation.spec.ts.snap  | 232 +++++++++++++++---
 .../ec-navigation/ec-navigation.spec.ts       |  36 ++-
 .../ec-navigation/ec-navigation.vue           |   1 +
 3 files changed, 228 insertions(+), 41 deletions(-)

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 1bc2ab785..8734bbcb3 100644
--- a/src/components/ec-navigation/__snapshots__/ec-navigation.spec.ts.snap
+++ b/src/components/ec-navigation/__snapshots__/ec-navigation.spec.ts.snap
@@ -1,5 +1,202 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+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="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"
+    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--mobile-mode"
+  data-test="ec-navigation"
+>
+  <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
+    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-->
+  <!--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 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"
+    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"
+>
+  <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
+    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-->
+  <!--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="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"
+    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"
@@ -323,41 +520,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"
-    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 render with custom attributes 1`] = `
 <div
   class="ec-navigation my-class"
diff --git a/src/components/ec-navigation/ec-navigation.spec.ts b/src/components/ec-navigation/ec-navigation.spec.ts
index f7a406d65..8ceee7e37 100644
--- a/src/components/ec-navigation/ec-navigation.spec.ts
+++ b/src/components/ec-navigation/ec-navigation.spec.ts
@@ -93,19 +93,43 @@ 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');
+    });
   });
 });
diff --git a/src/components/ec-navigation/ec-navigation.vue b/src/components/ec-navigation/ec-navigation.vue
index 4cf9ad2bf..0077b757a 100644
--- a/src/components/ec-navigation/ec-navigation.vue
+++ b/src/components/ec-navigation/ec-navigation.vue
@@ -34,6 +34,7 @@
     >
       <ec-icon
         class="ec-navigation__mobile-menu-close-button"
+        data-test="ec-navigation__mobile-menu-close-button"
         :name="IconName.SIMPLE_CLOSE"
         :size="24"
       />

From 6ae24444a1a6eacc3b5c100d2a6074ac8fb61e09 Mon Sep 17 00:00:00 2001
From: stavros <hello@stavrostomas.eu>
Date: Wed, 12 Jun 2024 10:48:51 +0100
Subject: [PATCH 6/9] CHUX-467:chore:export letter icon

---
 src/main.ts | 2 ++
 1 file changed, 2 insertions(+)

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';

From 716a7eea3fb0344fad23e5c95467dcb8141f4746 Mon Sep 17 00:00:00 2001
From: stavros <hello@stavrostomas.eu>
Date: Wed, 12 Jun 2024 15:00:50 +0100
Subject: [PATCH 7/9] CHUX-467:chore: adjust width of images and make menu
 close on navigation link clicked

---
 src/components/ec-mobile-header/ec-mobile-header.vue |  2 +-
 .../ec-navigation-link/ec-navigation-link.vue        |  5 +++++
 src/components/ec-navigation/ec-navigation.vue       | 12 ++++++++++++
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/components/ec-mobile-header/ec-mobile-header.vue b/src/components/ec-mobile-header/ec-mobile-header.vue
index 5f809f145..bddbcc700 100644
--- a/src/components/ec-mobile-header/ec-mobile-header.vue
+++ b/src/components/ec-mobile-header/ec-mobile-header.vue
@@ -38,7 +38,7 @@ const emit = defineEmits<{
   @apply tw-bg-gray-7;
 
   &__logo {
-    @apply tw-h-32;
+    @apply tw-w-88;
   }
 
   &__menu {
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/ec-navigation.vue b/src/components/ec-navigation/ec-navigation.vue
index 0077b757a..0f2ff1ed8 100644
--- a/src/components/ec-navigation/ec-navigation.vue
+++ b/src/components/ec-navigation/ec-navigation.vue
@@ -25,6 +25,7 @@
       ...$attrs,
       'data-test': $attrs['data-test'] ? `${$attrs['data-test']} ec-navigation` : 'ec-navigation',
     }"
+    @navigation-link-clicked="onNavigationLinkClicked"
   >
     <button
       v-if="isMobileMenuOpen"
@@ -46,6 +47,7 @@
     >
       <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"
@@ -109,6 +111,12 @@ defineOptions({
 withDefaults(defineProps<NavigationProps>(), {
   showBrandingLogo: true,
 });
+
+function onNavigationLinkClicked() {
+  if (isMobileMenuOpen.value) {
+    isMobileMenuOpen.value = false;
+  }
+}
 </script>
 
 <style>
@@ -184,6 +192,10 @@ withDefaults(defineProps<NavigationProps>(), {
 
   &__branding-logo {
     @apply tw-align-top;
+
+    &--responsive {
+      @apply tw-w-88;
+    }
   }
 
   &__block {

From 0da8165f38ef3c31e695a7a06c717f5736369abf Mon Sep 17 00:00:00 2001
From: stavros <hello@stavrostomas.eu>
Date: Wed, 12 Jun 2024 15:20:21 +0100
Subject: [PATCH 8/9] CHUX-467:chore:update snapshots

---
 .../ec-navigation/__snapshots__/ec-navigation.spec.ts.snap    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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 8734bbcb3..bcf6149a7 100644
--- a/src/components/ec-navigation/__snapshots__/ec-navigation.spec.ts.snap
+++ b/src/components/ec-navigation/__snapshots__/ec-navigation.spec.ts.snap
@@ -61,7 +61,7 @@ exports[`EcNavigation > mobile navigation > should close the mobile navigation w
   >
     <img
       alt="Test Brand"
-      class="ec-navigation__branding-logo"
+      class="ec-navigation__branding-logo ec-navigation__branding-logo--responsive"
       data-test="ec-navigation__branding-logo"
       src="/img/my-brand.png"
     />
@@ -142,7 +142,7 @@ exports[`EcNavigation > mobile navigation > should show render the mobile naviga
   >
     <img
       alt="Test Brand"
-      class="ec-navigation__branding-logo"
+      class="ec-navigation__branding-logo ec-navigation__branding-logo--responsive"
       data-test="ec-navigation__branding-logo"
       src="/img/my-brand.png"
     />

From 03f2262c9fc19b4683165376146bb948ae488958 Mon Sep 17 00:00:00 2001
From: stavros <hello@stavrostomas.eu>
Date: Thu, 13 Jun 2024 16:38:29 +0100
Subject: [PATCH 9/9] 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             |   2 +-
 .../ec-mobile-header/ec-mobile-header.vue     |   8 +-
 .../__snapshots__/ec-navigation.spec.ts.snap  | 362 ++++++++++++------
 .../ec-navigation/ec-navigation.spec.ts       |  20 +
 .../ec-navigation/ec-navigation.vue           |  82 ++--
 8 files changed, 388 insertions(+), 155 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 5b481202b..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
diff --git a/src/components/ec-mobile-header/ec-mobile-header.vue b/src/components/ec-mobile-header/ec-mobile-header.vue
index bddbcc700..5cf13b8b8 100644
--- a/src/components/ec-mobile-header/ec-mobile-header.vue
+++ b/src/components/ec-mobile-header/ec-mobile-header.vue
@@ -3,7 +3,7 @@
     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
@@ -37,13 +37,7 @@ const emit = defineEmits<{
   @apply tw-py-16 tw-px-24;
   @apply tw-bg-gray-7;
 
-  &__logo {
-    @apply tw-w-88;
-  }
-
   &__menu {
-    @apply tw-absolute;
-    @apply tw-top-16 tw-right-24;
     @apply tw-flex tw-items-center;
     @apply tw-border-0 tw-p-0;
     @apply tw-bg-transparent;
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 bcf6149a7..8feff7ae3 100644
--- a/src/components/ec-navigation/__snapshots__/ec-navigation.spec.ts.snap
+++ b/src/components/ec-navigation/__snapshots__/ec-navigation.spec.ts.snap
@@ -6,7 +6,7 @@ exports[`EcNavigation > mobile navigation > should close the mobile navigation w
   data-test="ec-mobile-header"
 >
   <div
-    class="ec-mobile-header__logo"
+    class="tw-leading-reset"
   >
     
     <img
@@ -40,31 +40,120 @@ exports[`EcNavigation > mobile navigation > should close the mobile navigation w
   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-navigation__mobile-menu-close-button"
+    class="ec-mobile-header__menu"
+    data-test="ec-mobile-header__menu"
     type="button"
   >
     <svg
-      class="ec-icon ec-navigation__mobile-menu-close-button"
-      data-test="ec-navigation__mobile-menu-close-button"
+      class="ec-icon ec-mobile-header__menu__icon"
       height="24"
       width="24"
     >
       <use
-        xlink:href="#ec-simple-close"
+        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__branding"
-    data-test="ec-navigation__branding"
+    class="ec-navigation__header"
   >
-    <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
+      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-->
@@ -74,6 +163,9 @@ exports[`EcNavigation > mobile navigation > should close the mobile navigation w
     data-test="ec-navigation__block ec-navigation__menu"
   >
     
+    <a
+      data-test="my-custom-link"
+    />
     
   </div>
   <!--v-if-->
@@ -87,7 +179,7 @@ exports[`EcNavigation > mobile navigation > should render mobile header if "isRe
   data-test="ec-mobile-header"
 >
   <div
-    class="ec-mobile-header__logo"
+    class="tw-leading-reset"
   >
     
     <img
@@ -121,31 +213,35 @@ exports[`EcNavigation > mobile navigation > should show render the mobile naviga
   class="ec-navigation ec-navigation--mobile-mode"
   data-test="ec-navigation"
 >
-  <button
-    class="ec-navigation__mobile-menu-close-button"
-    type="button"
+  <div
+    class="ec-navigation__header"
   >
-    <svg
-      class="ec-icon ec-navigation__mobile-menu-close-button"
-      data-test="ec-navigation__mobile-menu-close-button"
-      height="24"
-      width="24"
+    <div
+      class="ec-navigation__branding--mobile-menu-open ec-navigation__branding"
+      data-test="ec-navigation__branding"
     >
-      <use
-        xlink:href="#ec-simple-close"
+      <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"
       />
-    </svg>
-  </button>
-  <div
-    class="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-->
@@ -168,7 +264,7 @@ exports[`EcNavigation > mobile navigation > should show render the mobile naviga
   data-test="ec-mobile-header"
 >
   <div
-    class="ec-mobile-header__logo"
+    class="tw-leading-reset"
   >
     
     <img
@@ -202,17 +298,21 @@ exports[`EcNavigation > should apply light mode CSS classes if "isInLightMode" p
   class="ec-navigation ec-navigation--light-mode"
   data-test="ec-navigation"
 >
-  <!--v-if-->
   <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-->
   <hr
@@ -236,17 +336,21 @@ exports[`EcNavigation > should be collapsable when isCollapsable is set 1`] = `
   class="ec-navigation ec-navigation--is-collapsable"
   data-test="ec-navigation"
 >
-  <!--v-if-->
   <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-->
@@ -268,17 +372,21 @@ exports[`EcNavigation > should be collapsed when isCollapsed is set to true 1`]
   class="ec-navigation ec-navigation--is-collapsed"
   data-test="ec-navigation"
 >
-  <!--v-if-->
   <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-->
@@ -300,17 +408,21 @@ exports[`EcNavigation > should be expanded when isCollapsed is set to false 1`]
   class="ec-navigation"
   data-test="ec-navigation"
 >
-  <!--v-if-->
   <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-->
@@ -332,8 +444,12 @@ exports[`EcNavigation > should not render branding if logo is given in branding
   class="ec-navigation"
   data-test="ec-navigation"
 >
-  <!--v-if-->
-  <!--v-if-->
+  <div
+    class=""
+  >
+    <!--v-if-->
+    <!--v-if-->
+  </div>
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -354,8 +470,12 @@ exports[`EcNavigation > should not render branding if no logo is given in brandi
   class="ec-navigation"
   data-test="ec-navigation"
 >
-  <!--v-if-->
-  <!--v-if-->
+  <div
+    class=""
+  >
+    <!--v-if-->
+    <!--v-if-->
+  </div>
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -376,17 +496,21 @@ exports[`EcNavigation > should only render mandatory slot if no other slots were
   class="ec-navigation"
   data-test="ec-navigation"
 >
-  <!--v-if-->
   <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-->
@@ -408,17 +532,21 @@ exports[`EcNavigation > should render all given slots 1`] = `
   class="ec-navigation"
   data-test="ec-navigation"
 >
-  <!--v-if-->
   <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"
@@ -493,17 +621,21 @@ exports[`EcNavigation > should render branding logo and name when given 1`] = `
   class="ec-navigation"
   data-test="ec-navigation"
 >
-  <!--v-if-->
   <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-->
@@ -526,17 +658,21 @@ exports[`EcNavigation > should render with custom attributes 1`] = `
   data-test="my-data-test ec-navigation"
   id="test-id"
 >
-  <!--v-if-->
   <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 8ceee7e37..ea64687c3 100644
--- a/src/components/ec-navigation/ec-navigation.spec.ts
+++ b/src/components/ec-navigation/ec-navigation.spec.ts
@@ -131,5 +131,25 @@ describe('EcNavigation', () => {
       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 0f2ff1ed8..e1e51937e 100644
--- a/src/components/ec-navigation/ec-navigation.vue
+++ b/src/components/ec-navigation/ec-navigation.vue
@@ -25,71 +25,82 @@
       ...$attrs,
       'data-test': $attrs['data-test'] ? `${$attrs['data-test']} ec-navigation` : 'ec-navigation',
     }"
-    @navigation-link-clicked="onNavigationLinkClicked"
   >
-    <button
-      v-if="isMobileMenuOpen"
-      type="button"
-      class="ec-navigation__mobile-menu-close-button"
-      @click="isMobileMenuOpen = false"
-    >
-      <ec-icon
+    <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"
-        data-test="ec-navigation__mobile-menu-close-button"
-        :name="IconName.SIMPLE_CLOSE"
-        :size="24"
-      />
-    </button>
-    <div
-      v-if="showBrandingLogo && branding.logo"
-      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"
+        @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>
@@ -138,13 +149,17 @@ function onNavigationLinkClicked() {
   @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;
     }
   }
@@ -165,12 +180,11 @@ function onNavigationLinkClicked() {
   }
 
   &__mobile-menu-close-button {
-    @apply tw-fixed;
-    @apply tw-top-16 tw-right-24;
     @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;
@@ -180,7 +194,7 @@ function onNavigationLinkClicked() {
 
   &__mobile-header {
     &__logo {
-      @apply tw-h-32;
+      @apply tw-w-88;
     }
   }