From 2c9e7836ad36992366667a1e859084b61fa5f9f5 Mon Sep 17 00:00:00 2001
From: HeleenSG <magned@gmail.com>
Date: Mon, 20 Feb 2023 15:06:41 +0100
Subject: [PATCH] Fix: Moving header nav styling to header nav styling file
 instead of navigation. (#108)

Fix: Moving header nav styling to header nav styling file instead of navigation.
BREAKING CHANGE: From now on use header-navigation to style the header-navigation instead of navigation.
---
 docs/scss/manon.scss                          |  16 ++-
 docs/scss/themes/soft/header-navigation.scss  |   7 ++
 docs/scss/themes/soft/navigation.scss         |   6 -
 docs/scss/themes/soft/variables.scss          |   2 +-
 manon/button-base-variables.scss              |   1 -
 manon/header-navigation-base-variables.scss   |  24 ----
 manon/header-navigation-base.scss             |  35 ------
 ...-navigation-content-wrapper-variables.scss |  14 +++
 manon/header-navigation-content-wrapper.scss  |  25 ++++
 manon/header-navigation-variables.scss        |  76 ++++++++++++
 manon/header-navigation.scss                  | 114 ++++++++++++++++++
 manon/navigation-base.scss                    |  70 -----------
 manon/navigation-collapsible-menu.scss        |  34 ------
 manon/navigation-content-wrapper.scss         |   2 +-
 .../navigation-documentation-integration.scss |   2 +-
 manon/navigation-variables.scss               |  37 ------
 manon/navigation.scss                         |  67 +---------
 manon/test-cases.scss                         |   4 +-
 18 files changed, 253 insertions(+), 283 deletions(-)
 create mode 100644 docs/scss/themes/soft/header-navigation.scss
 delete mode 100644 docs/scss/themes/soft/navigation.scss
 delete mode 100644 manon/header-navigation-base-variables.scss
 delete mode 100644 manon/header-navigation-base.scss
 create mode 100644 manon/header-navigation-content-wrapper-variables.scss
 create mode 100644 manon/header-navigation-content-wrapper.scss
 create mode 100644 manon/header-navigation-variables.scss
 create mode 100644 manon/header-navigation.scss
 delete mode 100644 manon/navigation-base.scss

diff --git a/docs/scss/manon.scss b/docs/scss/manon.scss
index b0bc5831..6be50caa 100644
--- a/docs/scss/manon.scss
+++ b/docs/scss/manon.scss
@@ -71,9 +71,19 @@
 @use "@minvws/manon/layout-column-4";
 @use "@minvws/manon/layout-centered";
 
+/* Button */
+@use "@minvws/manon/button-base";
+@use "@minvws/manon/button-ghost";
+@use "@minvws/manon/button-cta";
+@use "@minvws/manon/button-icon";
+
 /* Header */
 @use "@minvws/manon/header";
 
+/* Header navigation */
+@use "@minvws/manon/header-navigation";
+@use "@minvws/manon/header-navigation-content-wrapper";
+
 /* Navigation */
 @use "@minvws/manon/navigation";
 @use "@minvws/manon/navigation-content-wrapper";
@@ -109,12 +119,6 @@
 @use "@minvws/manon/accordion";
 @use "@minvws/manon/filter";
 
-/* Button */
-@use "@minvws/manon/button-base";
-@use "@minvws/manon/button-ghost";
-@use "@minvws/manon/button-cta";
-@use "@minvws/manon/button-icon";
-
 @use "@minvws/manon/list-base";
 @use "@minvws/manon/skip-to-content-base";
 @use "@minvws/manon/background-color-offset";
diff --git a/docs/scss/themes/soft/header-navigation.scss b/docs/scss/themes/soft/header-navigation.scss
new file mode 100644
index 00000000..eb57af33
--- /dev/null
+++ b/docs/scss/themes/soft/header-navigation.scss
@@ -0,0 +1,7 @@
+/* Header navigation */
+
+:root {
+    --header-navigation-background-color: transparent;
+    --header-navigation-text-color: var(--text-set-text-color);
+    --header-navigation-justify-content: flex-end;
+}
diff --git a/docs/scss/themes/soft/navigation.scss b/docs/scss/themes/soft/navigation.scss
deleted file mode 100644
index 302b9072..00000000
--- a/docs/scss/themes/soft/navigation.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-/* Navigation */
-
-:root {
- --navigation-background-color: transparent;
- --navigation-text-color: var(--text-set-text-color);
-}
\ No newline at end of file
diff --git a/docs/scss/themes/soft/variables.scss b/docs/scss/themes/soft/variables.scss
index 90c151c3..bb300f2f 100644
--- a/docs/scss/themes/soft/variables.scss
+++ b/docs/scss/themes/soft/variables.scss
@@ -15,4 +15,4 @@
 /* Components */
 @use "breadcrumb-bar";
 @use "tile";
-@use "navigation";
+@use "header-navigation";
diff --git a/manon/button-base-variables.scss b/manon/button-base-variables.scss
index 6f212716..5a27d023 100644
--- a/manon/button-base-variables.scss
+++ b/manon/button-base-variables.scss
@@ -25,7 +25,6 @@
 
   /* Reset ios button styling */
   /* --button-base-webkit-appearance: none; */
-
   --button-base-align-self: flex-end;
 
   /* Hover */
diff --git a/manon/header-navigation-base-variables.scss b/manon/header-navigation-base-variables.scss
deleted file mode 100644
index 6bf7cb39..00000000
--- a/manon/header-navigation-base-variables.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-/*------------------------------------------------------------------------*/
-/*----------- components/header-navigation-base-variables.scss -----------*/
-/*------------------------------------------------------------------------*/
-:root {
-  --header-navigation-base-align-items: var(--layout-base-align-items);
-  --header-navigation-base-padding-top: var(--layout-base-padding-top);
-  --header-navigation-base-padding-right: var(--layout-base-padding-right);
-  --header-navigation-base-padding-bottom: var(--layout-base-padding-bottom);
-  --header-navigation-base-paddin-leftg: var(--layout-base-padding-left);
-  --header-navigation-base-max-width: var(--layout-base-max-width);
-  --header-navigation-base-gap: var(--layout-base-gap);
-  /* --header-navigation-base-background-color: ; */
-  /* --header-navigation-base-text-color: ; */
-
-  /* After breakpoint 1 */
-  --header-navigation-base-breakpoint-1-padding: var(
-    --header-navigation-base-padding
-  );
-
-  /* After breakpoint 2 */
-  --header-navigation-base-breakpoint-2-padding: var(
-    --header-navigation-base-breakpoint-1-padding
-  );
-}
diff --git a/manon/header-navigation-base.scss b/manon/header-navigation-base.scss
deleted file mode 100644
index ffee68c7..00000000
--- a/manon/header-navigation-base.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-/*---------------------------------------------------------------*/
-/*---------- components/header-navigation-base.scss -------------*/
-/*---------------------------------------------------------------*/
-@use "header-navigation-base-variables";
-
-$breakpoint-1: 24rem;
-$breakpoint-2: 42rem;
-
-header nav {
-  background-color: var(--header-navigation-base-background-color);
-  color: var(--header-navigation-base-text-color);
-
-  > div {
-    display: flex;
-    flex-direction: column;
-    align-items: var(--header-navigation-base-align-items);
-    flex-grow: 1;
-    padding-top: var(--header-navigation-base-padding-top);
-    padding-right: var(--header-navigation-base-padding-right);
-    padding-bottom: var(--header-navigation-base-padding-bottom);
-    padding-left: var(--header-navigation-base-padding-left);
-    box-sizing: border-box;
-    max-width: var(--header-navigation-base-max-width);
-    margin: 0 auto;
-    gap: var(--header-navigation-base-gap);
-  }
-
-  @media (min-width: $breakpoint-1) {
-    padding: var(--header-navigation-base-breakpoint-1-padding);
-  }
-
-  @media (min-width: $breakpoint-2) {
-    padding: var(--header-navigation-base-breakpoint-2-padding);
-  }
-}
diff --git a/manon/header-navigation-content-wrapper-variables.scss b/manon/header-navigation-content-wrapper-variables.scss
new file mode 100644
index 00000000..259618d1
--- /dev/null
+++ b/manon/header-navigation-content-wrapper-variables.scss
@@ -0,0 +1,14 @@
+/*---------------------------------------------------------------*/
+/*------ header-navigation-content-wrapper-variables.scss -------*/
+/*---------------------------------------------------------------*/
+:root {
+  --header-navigation-content-wrapper-flex-direction: var(--content-flex-direction);
+  --header-navigation-content-wrapper-justify-content: center;
+  --header-navigation-content-wrapper-align-items: var(--content-align-items);
+  --header-navigation-content-wrapper-gap: var(--content-gap);
+  --header-navigation-content-wrapper-padding-top: 0;
+  --header-navigation-content-wrapper-padding-right: var(--content-padding-right);
+  --header-navigation-content-wrapper-padding-bottom: 0;
+  --header-navigation-content-wrapper-padding-left: var(--content-padding-left);
+  --header-navigation-content-wrapper-max-width: 100%;
+}
diff --git a/manon/header-navigation-content-wrapper.scss b/manon/header-navigation-content-wrapper.scss
new file mode 100644
index 00000000..1f4ebef3
--- /dev/null
+++ b/manon/header-navigation-content-wrapper.scss
@@ -0,0 +1,25 @@
+/*---------------------------------------------------------------*/
+/*------------- header-navigation-content-wrapper.scss ----------*/
+/*---------------------------------------------------------------*/
+@use "header-navigation-content-wrapper-variables";
+
+body > header,
+%header-navigation-content-wrapper-style {
+  nav {
+    > div {
+      display: flex;
+      flex-direction: var(--header-navigation-content-wrapper-flex-direction);
+      justify-content: var(--header-navigation-content-wrapper-justify-content);
+      align-items: var(--header-navigation-content-wrapper-align-items);
+      gap: var(--header-navigation-content-wrapper-gap);
+      width: 100%;
+      margin: 0 auto;
+      box-sizing: border-box;
+      padding-top: var(--header-navigation-content-wrapper-padding-top);
+      padding-right: var(--header-navigation-content-wrapper-padding-right);
+      padding-bottom: var(--header-navigation-content-wrapper-padding-bottom);
+      padding-left: var(--header-navigation-content-wrapper-padding-left);
+      max-width: var(--header-navigation-content-wrapper-max-width);
+    }
+  }
+}
diff --git a/manon/header-navigation-variables.scss b/manon/header-navigation-variables.scss
new file mode 100644
index 00000000..a4f65889
--- /dev/null
+++ b/manon/header-navigation-variables.scss
@@ -0,0 +1,76 @@
+/*---------------------------------------------------------------*/
+/*-------------- header-navigation-variables.scss ---------------*/
+/*---------------------------------------------------------------*/
+:root {
+  /* header-Navigation layout */
+  --header-navigation-gap: 2rem;
+  --header-navigation-justify-content: flex-start;
+  --header-navigation-align-items: center;
+  --header-navigation-min-height: 4rem;
+  --header-navigation-width: 100%;
+  --header-navigation-padding-top: 0;
+  --header-navigation-padding-right: 0;
+  --header-navigation-padding-bottom: 0;
+  --header-navigation-padding-left: 0;
+  --header-navigation-margin: 0;
+  --header-navigation-background-color: var(--application-base-accent-color);
+  --header-navigation-text-color: var(--application-base-accent-color-text-color);
+  --header-navigation-max-width: 100%;
+  
+  /* Content wrapper - Usualy a div to match main content alignment */
+  --header-navigation-content-wrapper-padding-top: 0;
+  --header-navigation-content-wrapper-padding-right: 0;
+  --header-navigation-content-wrapper-padding-bottom: 0;
+  --header-navigation-content-wrapper-padding-left: 0;
+  --header-navigation-content-wrapper-max-width: var(
+    --content-max-width
+  );
+
+  /* List */
+  --header-navigation-list-gap: 1rem;
+  --header-navigation-list-justify-content: var(--header-navigation-justify-content);
+  --header-navigation-list-align-items: var(--header-navigation-align-items);
+  --header-navigation-list-text-color: var(--header-navigation-text-color, var(--application-base-accent-color-text-color));
+
+  /* List item */
+  --header-navigation-list-item-text-color: var(--header-navigation-list-text-color, var(--application-base-accent-color-text-color));
+  --header-navigation-list-item-justify-content: var(--header-navigation-justify-content);
+  --header-navigation-list-item-align-items: var(--header-navigation-align-items);
+  
+  /* Link */
+  --header-navigation-link-text-decoration: none;
+  --header-navigation-link-justify-content: center;
+  --header-navigation-link-align-items: center;
+  --header-navigation-link-padding-top: 0;
+  --header-navigation-link-padding-right: 0;
+  --header-navigation-link-padding-bottom: 0;
+  --header-navigation-link-padding-left: 0;
+  --header-navigation-link-text-color: var(--header-navigation-text-color, black);
+
+  /* Link visited */
+  --header-navigation-link-visited-text-color: var(--header-navigation-link-text-color);
+
+  /* Link hover */
+  --header-navigation-link-hover-text-decoration: underline;
+  --header-navigation-link-hover-background-color: transparent;
+  --header-navigation-link-hover-text-color: var(--header-navigation-text-color);
+
+  /* Button */
+  --header-navigation-button-justify-content: var(--button-base-justify-content, center);
+  --header-navigation-button-align-self: center;
+  --header-navigation-button-min-width: var(--button-base-min-width, 0);
+  --header-navigation-button-min-height: var(--button-base-min-height, 2.75rem);
+  --header-navigation-button-background-color: var(--button-base-background-color, transparent);
+  --header-navigation-button-text-color: var(--button-base-text-color, black);
+  --header-navigation-button-border-width: var(--button-base-border-width, 0);
+  --header-navigation-button-border-style: var(--button-base-border-style, solid);
+  --header-navigation-button-border-color: var(--button-base-border-color, black);
+  --header-navigation-button-padding-top: 0;
+  --header-navigation-button-padding-right: 0;
+  --header-navigation-button-padding-bottom: 0;
+  --header-navigation-button-padding-left: 0;
+  --header-navigation-button-font-size: var(--button-base-font-size, var(--application-base-font-size));
+  --header-navigation-button-line-height: var(--button-base-line-height, var(--application-base-line-height));
+  --header-navigation-button-font-weight: var(--button-base-font-weight, var(--application-base-font-weight));
+  --header-navigation-button-border-radius: var(--button-base-border-radius, 0);
+}
diff --git a/manon/header-navigation.scss b/manon/header-navigation.scss
new file mode 100644
index 00000000..70890358
--- /dev/null
+++ b/manon/header-navigation.scss
@@ -0,0 +1,114 @@
+/*---------------------------------------------------------------*/
+/*----------------- header-navigation.scss ----------------------*/
+/*---------------------------------------------------------------*/
+@use "header-navigation-variables";
+
+body > header,
+%header-navigation-style {
+  width: 100%;
+  box-sizing: border-box;
+
+  nav {
+    display: flex;
+    gap: var(--header-navigation-gap);
+    flex-direction: row;
+    justify-content: var(--header-navigation-justify-content);
+    align-items: var(--header-navigation-align-items);
+    width: var(--header-navigation-width);
+    margin: var(--header-navigation-margin);
+    min-height: var(--header-navigation-min-height);
+    box-sizing: border-box;
+    background-color: var(--header-navigation-background-color);
+    padding-top: var(--header-navigation-padding-top);
+    padding-right: var(--header-navigation-padding-right);
+    padding-bottom: var(--header-navigation-padding-bottom);
+    padding-left: var(--header-navigation-padding-left);
+    max-width: var(--header-navigation-max-width);
+
+    > button,
+    > a.button,
+    > input[type="button"],
+    > input[type="submit"],
+    > input[type="reset"]  {
+
+      justify-content: var(--header-navigation-button-justify-content);
+      align-self: var(--header-navigation-button-align-self);
+      min-width: var(--header-navigation-button-min-width);
+      min-height: var(--header-navigation-button-min-height);
+
+      background-color: var(--header-navigation-button-background-color);
+      color: var(--header-navigation-button-text-color);
+
+      font-size: var(--header-navigation-button-font-size);
+      font-weight: var(--header-navigation-button-font-weight);
+      line-height: var(--header-navigation-button-line-height);
+
+      border-width: var(--header-navigation-button-border-width);
+      border-style: var(--header-navigation-button-border-style);
+      border-color: var(--header-navigation-button-border-color);
+      border-radius: var(--header-navigation-button-border-radius);
+
+      padding-top: var(--header-navigation-button-padding-top);
+      padding-right: var(--header-navigation-button-padding-right);
+      padding-bottom: var(--header-navigation-button-padding-bottom);
+      padding-left: var(--header-navigation-button-padding-left);
+
+      &:visited {
+        color: var(--header-navigation-button-text-color);
+      }
+
+      &:hover {
+        text-decoration: var(--header-navigation-link-hover-text-decoration);
+        color: inherit;
+        background-color: var(--header-navigation-link-hover-background-color);
+        color: var(--header-navigation-link-hover-text-color);
+      }
+    }
+
+    ul,
+    ol {
+      display: flex;
+      gap: var(--header-navigation-list-gap);
+      justify-content: var(--header-navigation-list-justify-content);
+      align-items: var(--header-navigation-list-align-items);
+      flex-direction: row;
+      flex-wrap: wrap;
+      padding: 0;
+      color: var(--header-navigation-list-text-color);
+      width: 100%;
+      margin: 0;
+
+      li {
+        display: flex;
+        justify-content: var(--header-navigation-list-item-justify-content);
+        align-items: var(--header-navigation-list-item-align-items);
+        color: var(--header-navigation-list-item-text-color);
+        list-style: none;
+
+        a,
+        a.button {
+          color: var(--header-navigation-link-text-color);
+          text-decoration: var(--header-navigation-link-text-decoration);
+          display: flex;
+          justify-content: var(--header-navigation-link-justify-content);
+          align-items: var(--header-navigation-link-align-items);
+          padding-top: var(--header-navigation-link-padding-top);
+          padding-right: var(--header-navigation-link-padding-right);
+          padding-bottom: var(--header-navigation-link-padding-bottom);
+          padding-left: var(--header-navigation-link-padding-left);
+
+          &:visited {
+            color: var(--header-navigation-link-visited-text-color);
+          }
+
+          &:hover {
+            text-decoration: var(--header-navigation-link-hover-text-decoration);
+            color: inherit;
+            background-color: var(--header-navigation-link-hover-background-color);
+            color: var(--header-navigation-link-hover-text-color);
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/manon/navigation-base.scss b/manon/navigation-base.scss
deleted file mode 100644
index 304c6e99..00000000
--- a/manon/navigation-base.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-/*---------------------------------------------------------------*/
-/*------------ components/navigation-base.scss ------------------*/
-/*---------------------------------------------------------------*/
-@use "navigation-base-variables";
-
-body > header,
-%main-header-nav-style {
-  width: 100%;
-  box-sizing: border-box;
-
-  nav {
-    display: flex;
-    flex-direction: row;
-    align-items: stretch;
-    justify-content: var(--navigation-base-align-content);
-    width: 100%;
-    max-width: var(--navigation-base-max-width);
-    margin: 0 auto;
-    min-height: var(--navigation-base-min-height);
-    gap: var(--navigation-base-gap);
-    box-sizing: border-box;
-    background-color: var(--navigation-base-background-color);
-    padding-top: var(--navigation-base-padding-top);
-    padding-right: var(--navigation-base-padding-right);
-    padding-bottom: var(--navigation-base-padding-bottom);
-    padding-left: var(--navigation-base-padding-left);
-
-    @media (min-width: 42rem) {
-      box-sizing: border-box;
-    }
-
-    > div {
-      align-items: var(--navigation-base-align-content);
-      max-width: var(--navigation-base-content-block-max-width);
-      padding-top: var(--navigation-base-content-block-padding-top);
-      padding-right: var(--navigation-base-content-block-padding-right);
-      padding-bottom: var(--navigation-base-content-block-padding-bottom);
-      padding-left: var(--navigation-base-content-block-padding-left);
-    }
-
-    ul,
-    ol {
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-      padding: 0;
-      gap: var(--navigation-base-list-gap, 0.5rem);
-      color: var(--navigation-base-text-color);
-      justify-content: var(--navigation-base-list-justify-content);
-
-      li {
-        display: flex;
-        color: inherit;
-        list-style: none;
-        justify-content: var(--navigation-base-list-item-justify-content);
-
-        a,
-        a:visited {
-          color: inherit;
-          text-decoration: var(--navigation-base-link-text-decoration);
-
-          &:hover {
-            text-decoration: var(--navigation-base-link-hover-text-decoration);
-            color: inherit;
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/manon/navigation-collapsible-menu.scss b/manon/navigation-collapsible-menu.scss
index 655530a3..5a85c47d 100644
--- a/manon/navigation-collapsible-menu.scss
+++ b/manon/navigation-collapsible-menu.scss
@@ -142,40 +142,6 @@ body > header nav {
     display: flex;
   }
 
-  ul {
-    background-color: transparent;
-    flex-direction: row;
-    align-items: flex-start;
-
-    li {
-      display: flex;
-      justify-content: center;
-      height: auto;
-      box-sizing: border-box;
-      background-color: var(
-        --navigation-collapsible-menu-list-item-background-color
-      );
-      color: var(--navigation-collapsible-menu-list-item-text-color);
-      border: 0;
-
-      &:hover {
-        background-color: var(
-          --navigation-collapsible-menu-list-item-background-color-hover
-        );
-        color: var(--navigation-collapsible-menu-list-item-hover-text-color);
-        border-color: var(--application-base-accent-color-tint-1);
-      }
-
-      a {
-        padding: var(--navigation-collapsible-menu-list-item-link-padding);
-      }
-
-      &:last-child {
-        border: inherit;
-      }
-    }
-  }
-
   button.menu_toggle {
     display: none;
 
diff --git a/manon/navigation-content-wrapper.scss b/manon/navigation-content-wrapper.scss
index bba8c529..0c0649cb 100644
--- a/manon/navigation-content-wrapper.scss
+++ b/manon/navigation-content-wrapper.scss
@@ -4,7 +4,7 @@
 @use "navigation-content-wrapper-variables";
 
 body > header,
-%main-header-nav-style {
+%navigation-content-wrapper-style {
   nav {
     > div {
       display: flex;
diff --git a/manon/navigation-documentation-integration.scss b/manon/navigation-documentation-integration.scss
index 4ef58f0e..9454e7a7 100644
--- a/manon/navigation-documentation-integration.scss
+++ b/manon/navigation-documentation-integration.scss
@@ -7,7 +7,7 @@
 .documentation {
   main {
     header {
-      @extend %main-header-nav-style;
+    /* Needs implementation and testing */
     }
   }
 }
diff --git a/manon/navigation-variables.scss b/manon/navigation-variables.scss
index 221e566d..1c243ba5 100644
--- a/manon/navigation-variables.scss
+++ b/manon/navigation-variables.scss
@@ -2,42 +2,5 @@
 /*-------------------- navigation-variables.scss ----------------*/
 /*---------------------------------------------------------------*/
 :root {
-  /* Navigation layout */
-  --navigation-gap: 0, 5rem;
-  --navigation-justify-content: flex-end;
-  --navigation-align-items: center;
-  --navigation-min-height: 4rem;
-  --navigation-width: 100%;
-  --navigation-padding-top: 0;
-  --navigation-padding-right: 0;
-  --navigation-padding-bottom: 0;
-  --navigation-padding-left: 0;
-  --navigation-margin: 0;
-  --navigation-background-color: var(--application-base-accent-color);
-  --navigation-text-color: var(--application-base-accent-color-text-color);
-  --navigation-max-width: 100%;
   
-  /* Content wrapper - Usualy a div to match main content alignment */
-  --navigation-content-wrapper-padding-top: 0;
-  --navigation-content-wrapper-padding-right: 0;
-  --navigation-content-wrapper-padding-bottom: 0;
-  --navigation-content-wrapper-padding-left: 0;
-  --navigation-content-wrapper-max-width: var(
-    --content-max-width
-  );
-
-  /* List */
-  --navigation-list-gap: 1rem;
-  --navigation-list-justify-content: var(--navigation-justify-content);
-  --navigation-list-align-items: var(--navigation-align-items);
-  --navigation-list-text-color: var(--navigation-text-color, var(--application-base-accent-color-text-color));
-
-  /* List item */
-  --navigation-list-item-text-color: var(--navigation-list-text-color, var(--application-base-accent-color-text-color));
-
-  /* Link */
-  --navigation-link-text-decoration: none;
-
-  /* Link hover */
-  --navigation-link-hover-text-decoration: underline;
 }
diff --git a/manon/navigation.scss b/manon/navigation.scss
index 9cd8b3c8..7ff35fe4 100644
--- a/manon/navigation.scss
+++ b/manon/navigation.scss
@@ -3,69 +3,6 @@
 /*---------------------------------------------------------------*/
 @use "navigation-variables";
 
-body > header,
-%main-header-nav-style {
-  width: 100%;
-  box-sizing: border-box;
-
-  nav {
-    display: flex;
-    gap: var(--navigation-gap);
-    flex-direction: row;
-    align-items: var(--navigation-align-items);
-    justify-content: var(--navigation-justify-content);
-    width: var(--navigation-width);
-    margin: var(--navigation-margin);
-    min-height: var(--navigation-min-height);
-    box-sizing: border-box;
-    background-color: var(--navigation-background-color);
-    padding-top: var(--navigation-padding-top);
-    padding-right: var(--navigation-padding-right);
-    padding-bottom: var(--navigation-padding-bottom);
-    padding-left: var(--navigation-padding-left);
-    max-width: var(--navigation-max-width);
-
-    > div {
-      gap: var(--navigation-gap);
-      justify-content: var(--navigation-justify-content);
-      align-items: var(--navigation-align-items);
-      max-width: var(--navigation-content-block-max-width);
-      padding-top: var(--navigation-content-block-padding-top);
-      padding-right: var(--navigation-content-block-padding-right);
-      padding-bottom: var(--navigation-content-block-padding-bottom);
-      padding-left: var(--navigation-content-block-padding-left);
-    }
-
-    ul,
-    ol {
-      display: flex;
-      gap: var(--navigation-list-gap);
-      justify-content: var(--navigation-list-justify-content);
-      align-items: var(--navigation-list-align-items);
-      flex-direction: row;
-      flex-wrap: wrap;
-      padding: 0;
-      color: var(--navigation-list-text-color);
-      width: 100%;
-      margin: 0;
-
-      li {
-        display: flex;
-        color: var(--navigation-list-item-text-color);
-        list-style: none;
-        justify-content: var(--navigation-list-item-justify-content);
-
-        a,
-        a:visited {
-          color: inherit;
-          text-decoration: var(--navigation-link-text-decoration);
-
-          &:hover {
-            text-decoration: var(--navigation-link-hover-text-decoration);
-            color: inherit;
-          }
-        }
-      }
-    }
-  }
+nav {
+  
 }
diff --git a/manon/test-cases.scss b/manon/test-cases.scss
index 00b2b8ba..88c52bfc 100644
--- a/manon/test-cases.scss
+++ b/manon/test-cases.scss
@@ -4,8 +4,8 @@
 .test-cases article {
   /* Header */
   > header {
-    @extend %main-header-style;
-    @extend %main-header-nav-style;
+    @extend %header-navigation-style;
+    @extend %header-navigation-content-wrapper-style;
     @extend %main-app-color-focus-style;
 
     /* Test case specific styling */