FEATURE Handling menu primary submenus

resources/css/layout/nav/primary-menu.css

@@ -108,6 +108,7 @@
 
     li.menu-item.has-page-icon {
       @apply gap-4 font-normal tracking-wide;
+      button,
       a {
         @apply flex flex-row lg:flex-col items-center justify-start lg:justify-end gap-4 font-normal tracking-wide;
       }
@@ -120,32 +121,77 @@
       }
     }
     li.menu-item.menu-item-has-children:hover {
+      &:hover .page_icon {
+        transform: none;
+      }
       @screen lg {
         .menu-item-submenu-toggle:after {
           transform: rotate(180deg);
         }
-        .sub-menu {
+        /* .sub-menu {
           display: block;
-        }
+        } */
       }
     }
     /* submenus */
     li .sub-menu {
-      @apply bg-primary 
+      @apply bg-carhop-green-700 
 			p-6
+      px-6
+
 			mx-auto
 			lg:mx-0
 			static
+			w-full
+      grid-cols-2
       lg:absolute;
       z-index: 999;
       display: none;
+      left: 0;
+      top: 100%;
+      opacity: 0;
+      translate: 0 -30px;
+      transition:
+        translate 0.3s ease-out,
+        display 0.3s,
+        opacity 0.3s;
+      transition-behavior: allow-discrete;
 
       &.sub-menu-open {
-        display: block;
+        display: grid;
+        opacity: 1;
+        translate: 0 0;
+
+        @starting-style {
+          opacity: 0;
+          translate: 0 -30px;
+        }
       }
 
       li {
-        @apply py-2 lg:text-left;
+        @apply lg:text-left;
+        border-bottom: 1px solid #fff;
+        &:nth-last-child(-n + 2),
+        &:last-child {
+          border-bottom: none;
+        }
+        @apply max-w-3xl w-full;
+
+        &:nth-child(odd) {
+          @apply ml-auto;
+        }
+        &.menu-item.has-page-icon a {
+          @apply flex gap-4 items-center justify-start flex-row p-6 py-8;
+          .page_icon {
+            @apply w-12 h-12;
+          }
+        }
+        &:hover {
+          @apply bg-black/10;
+          a {
+            @apply gap-12;
+          }
+        }
       }
 
       > a::after {
@@ -231,3 +277,28 @@
     }
   }
 }
+
+body:has(.primary-menu-container .sub-menu-open) {
+  main {
+    @apply relative;
+
+    &:after {
+      @apply absolute inset-0 bg-black/50 z-10;
+      backdrop-filter: blur(4px);
+      content: '';
+      display: block;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 10;
+
+      transition: all 0.3s ease-out;
+      @starting-style {
+        backdrop-filter: blur(0px);
+        background-color: transparent;
+      }
+    }
+  }
+}