RESPONSIVE FIX Close subemnus when closing mobile menu

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

@@ -7,7 +7,7 @@
 	h-fit
 	py-0
 	lg:py-3
-	px-8
+	px-6
 	2xl:px-20
  	my-0
   !pb-5;
@@ -124,23 +124,18 @@
       }
     }
     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 {
-          display: block;
-        } */
       }
     }
     /* submenus */
     li .sub-menu {
       @apply bg-carhop-green-700 
 			p-6
-      px-6
+      px-0 md:px-6
+
 			mx-auto
 			lg:mx-0
 			static
@@ -199,7 +194,7 @@
         }
 
         &.menu-item.has-page-icon a {
-          @apply flex gap-6 items-center justify-start flex-row p-6 py-8;
+          @apply flex gap-6 items-center justify-start flex-row px-2 md:px-6 p-6 py-4 md:py-8;
           .page_icon {
             @apply w-12 h-12;
           }
@@ -265,12 +260,15 @@
         /* min-height: 96vh; */
         padding-top: 2vh;
       }
+      > ul > li.menu-item {
+        @apply py-4 md:py-8;
+      }
       li.menu-item {
         @apply mt-0
 				lg:text-center
 				text-white
 				font-medium
-				py-8
+			
 				text-lg
         pb-2
 				lg:pb-0;
@@ -317,25 +315,27 @@
 }
 
 body:has(.primary-menu-container .sub-menu-open) {
-  main {
+  @screen md {
-    @apply relative;
+    main {
+      @apply relative;
 
-    &:after {
+      &:after {
-      @apply absolute inset-0 bg-black/50 z-10;
+        @apply absolute inset-0 bg-black/50 z-10;
-      backdrop-filter: blur(4px);
+        backdrop-filter: blur(4px);
-      content: '';
+        content: '';
-      display: block;
+        display: block;
-      width: 100%;
+        width: 100%;
-      height: 100%;
+        height: 100%;
-      position: absolute;
+        position: absolute;
-      top: 0;
+        top: 0;
-      left: 0;
+        left: 0;
-      z-index: 10;
+        z-index: 10;
 
-      transition: all 0.3s ease-out;
+        transition: all 0.3s ease-out;
-      @starting-style {
+        @starting-style {
-        backdrop-filter: blur(0px);
+          backdrop-filter: blur(0px);
-        background-color: transparent;
+          background-color: transparent;
+        }
       }
     }
   }

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

@@ -70,7 +70,7 @@
     li {
       @apply border-b border-white;
       a {
-        @apply py-6 px-4 block w-full;
+        @apply py-6 px-2 md:px-4 block w-full;
         .page_subtitle {
           @apply opacity-80 font-light  mt-3 inline-block;
           /* line-height: 1; */

resources/js/header.js

@@ -65,7 +65,7 @@ class HeaderMenu {
 
   closeMenu() {
     if (!this.header || !this.mobileMenuToggle || !this.isMenuOpen()) return;
-
+    this.closeAllSubmenus();
     this.header.classList.remove('nav-open');
     this.mobileMenuToggle.removeAttribute('aria-expanded');
     this.mobileMenuToggle.textContent = 'Menu';