FEATURE Handling secondary submenus

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

@@ -9,7 +9,7 @@
   .secondary-menu-nav {
     @apply max-w-screen-2xl w-full mx-auto flex justify-between items-center;
 
-    ul {
+    > ul {
       @apply flex flex-col lg:flex-row justify-between gap-4;
     }
     a {
@@ -38,6 +38,71 @@
       }
     }
   }
+
+  /* #### PARENT WITH CHILDREN */
+  li.menu-item-has-children {
+    @apply relative;
+
+    .sub-menu {
+      @apply hidden;
+    }
+    &:has(button.menu-item__submenu-toggle[aria-expanded='true']) {
+      .sub-menu {
+        @apply block;
+      }
+    }
+  }
+
+  /* #### SUBMENU */
+
+  button.menu-item__submenu-toggle {
+    @apply text-white;
+    &:hover,
+    &[aria-expanded='true'] {
+      @apply underline underline-offset-8 decoration-1;
+    }
+  }
+  .sub-menu {
+    @apply flex flex-col border border-white bg-primary  absolute top-10 left-0 z-30;
+    width: 330px;
+
+    li {
+      @apply border-b border-white;
+      a {
+        @apply py-6 px-4 block w-full;
+
+        &:hover {
+          backdrop-filter: brightness(0.9);
+        }
+      }
+      &:last-child {
+        @apply border-b-0;
+      }
+    }
+
+    li.has-page-icon {
+      .menu-item__content {
+        @apply flex items-center gap-4;
+      }
+    }
+
+    a.menu-item__content {
+      .menu-item__title {
+        @apply font-medium;
+      }
+      .menu-item__excerpt {
+        @apply opacity-80;
+      }
+
+      &:hover {
+        text-decoration: none !important;
+
+        .menu-item__title {
+          text-decoration: underline !important;
+        }
+      }
+    }
+  }
 }
 
 .secondary-menu-container {