From 63e880ef8545c3b6af039e2a04a203000251028b Mon Sep 17 00:00:00 2001
From: Antoine M <antoine.martinon@deligraph.com>
Date: Wed, 10 Jan 2024 16:51:12 +0100
Subject: [PATCH] few menu adaptations

---
 resources/css/layout/menu-renovateur.css | 90 +++++++++++++++++++-----
 1 file changed, 72 insertions(+), 18 deletions(-)

diff --git a/resources/css/layout/menu-renovateur.css b/resources/css/layout/menu-renovateur.css
index 9f2513b..266c867 100644
--- a/resources/css/layout/menu-renovateur.css
+++ b/resources/css/layout/menu-renovateur.css
@@ -1,5 +1,5 @@
 .menu-renovateur {
-  @apply py-8 
+  @apply py-4 
   px-4
   sm:px-8
   md:px-16
@@ -40,37 +40,61 @@
   &__navlist {
     @apply lg:flex 
     justify-center
-    relative;
+    /* relative */;
 
     > .menu-item {
       &:hover > a,
       &:hover > button,
       > a:focus,
       > button:focus {
-        @apply text-secondary bg-gray;
+        @apply bg-gray;
       }
 
       @apply text-black
      
-      lg:relative
+      /* lg:relative */
       font-bold;
     }
     /* Generic Submenu Item */
     .sub-menu {
       @apply fixed
-    bg-white
+
       z-50
       top-0
+      left-0
       min-h-screen
       w-full 
-      p-8
+      py-8
       lg:absolute
       lg:min-h-0
-      lg:w-screen
-      lg:max-w-3xl;
+      bottom-0
+
+      /* lg:w-screen
+      lg:max-w-3xl */
+      /* -bottom-2 */;
+      /* background: white; */
+      /* box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; */
+      /* left: 0; */
+      /* width: 100%; */
+      /* margin: 0 calc(50% - 50vw); */
+      isolation: isolate;
+
+      &:after {
+        content: '';
+        transform: translateX(-50%);
+        @apply bg-white w-screen h-full shadowed-bottom absolute top-0 left-1/2 -z-10;
+      }
+      .sub-menu__navlist {
+        /* max-width: 1401px; */
+        @apply -translate-x-4;
+        align-self: center;
+        margin: 0 auto;
+        &__item a {
+          @apply px-4 py-3 rounded-xl hover:bg-gray;
+        }
+      }
 
       @screen lg {
-        bottom: -31px;
         transform: translateY(100%);
         top: unset;
       }
@@ -83,16 +107,17 @@
       }
     }
 
-    /* Conseils — Thamtiques Submenu Item */
+    /* Conseils — Thematiques Submenu Item */
     li#menu-item-168 {
       .sub-menu__navlist {
-        @apply grid md:grid-cols-2 gap-4;
+        @apply grid md:grid-cols-2;
+
         &__item a {
-          @apply flex gap-4;
+          @apply flex gap-4 py-2;
         }
 
         &__thematique-icon {
-          max-width: 80px;
+          max-width: 60px;
         }
         &__description {
           @apply text-sm font-normal;
@@ -107,7 +132,23 @@
       }
 
       .sub-menu__navlist {
-        @apply flex gap-5;
+        @apply grid md:grid-cols-2 gap-5;
+        li {
+          @apply !no-underline;
+          /* text-decoration: none !important;
+          text-decoration-line: none !important; */
+        }
+        a {
+          @apply block w-full !no-underline;
+
+          .title {
+            @apply font-bold text-lg pb-1;
+          }
+          .excerpt {
+            @apply text-base font-normal;
+            line-height: 1.3;
+          }
+        }
         li {
           @apply underline underline-offset-4;
         }
@@ -120,20 +161,33 @@
     }
 
     &__submenu-title {
-      @apply pb-4 mb-4 border-b border-gray-dark;
+      @apply pb-4 mb-4 border-b border-neutral-300;
     }
     &__submenu-toggle,
     > a {
-      @apply p-6  rounded-3xl
+      @apply p-6 rounded-3xl
       flex
-      /* justify-center */
       items-center;
     }
     &__submenu-toggle {
       @apply text-left;
     }
+    &__submenu-toggle:after {
+      transition: transform 0.3s ease-in-out;
+      content: '';
+      @apply ml-4   inline-block;
+      background-image: url('../resources/img/graphic-assets/chevron_down_red.svg');
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: contain;
+      width: 13px;
+      height: 13px;
+    }
+    &__submenu-toggle[aria-expanded='true']:after {
+      transform: rotate(180deg);
+    }
     &__submenu-close {
-      @apply absolute text-right top-8 right-8 w-fit h-auto rounded-full outline-offset-4;
+      @apply absolute text-right top-8 right-0 w-fit h-auto rounded-full outline-offset-4;
       width: fit-content;
       padding: 0;
     }