Refining Mobile menu starter with submenus

css/app.css

@@ -982,25 +982,101 @@ article>*:not(.entry-content),
   padding-right: 2rem;
 }
 
-.close_btn {
+/* li.current-page-parent,
-  display: none;
+	li.current-page-ancestor */
+
+.primary-menu-container li.current-page-parent > a, 
+	.primary-menu-container li.current_page_item > a {
+  font-weight: 700;
+  --tw-text-opacity: 1;
+  color: rgb(20 184 166 / var(--tw-text-opacity));
 }
 
-.menu-navlink {
+@media (min-width: 960px) {
+  .primary-menu-container li.current-page-parent > a, 
+	.primary-menu-container li.current_page_item > a {
+    --tw-text-opacity: 1;
+    color: rgb(14 165 233 / var(--tw-text-opacity));
+  }
+}
+
+/* Highlight using list element */
+
+.primary-menu-container li.menu-item {
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 500;
   text-transform: uppercase;
 }
 
+.primary-menu-container li.menu-item:hover > a {
+  cursor: pointer;
+  --tw-text-opacity: 1;
+  color: rgb(20 184 166 / var(--tw-text-opacity));
+}
+
+@media (min-width: 960px) {
+  .primary-menu-container li.menu-item:hover > a {
+    --tw-text-opacity: 1;
+    color: rgb(14 165 233 / var(--tw-text-opacity));
+  }
+}
+
+/* submenus */
+
+.primary-menu-container li:has(.sub-menu) .sub-menu {
+  position: absolute;
+  display: none;
+}
+
+.primary-menu-container li:has(.sub-menu) > a::after {
+  transform: translateY(-2px) rotate(-90deg);
+  content: "";
+  display: inline-block;
+  height: 10px;
+  width: 10px;
+  margin-left: 20px;
+  background-image: url("../resources/img/arrow_down_white.svg");
+  background-repeat: no-repeat;
+  background-size: contain;
+  transition: all 0.3s ease-out;
+}
+
+.primary-menu-container li:has(.sub-menu):hover > a::after, .primary-menu-container li:has(.sub-menu):focus > a::after {
+  transform: translateY(-2px) rotate(0deg);
+}
+
+.primary-menu-container li:has(.sub-menu):hover .sub-menu, .primary-menu-container li:has(.sub-menu):focus .sub-menu {
+  display: block;
+}
+
+.close_btn {
+  display: none;
+}
+
+/* RESPONSIVE */
+
 @media (max-width: 960px) {
+  .primary-menu-container {
+    margin-top: 0px;
+    margin-bottom: 0px;
+    max-height: 100vh;
+  }
+
+  .primary-menu-container li:has(.sub-menu) .sub-menu {
+    margin-left: auto;
+    margin-right: auto;
+    /* position: static !important; */
+    position: static;
+  }
+
   #primary-menu {
     position: absolute;
     left: 0px;
     margin-top: 0px;
     --tw-bg-opacity: 1;
     background-color: rgb(14 165 233 / var(--tw-bg-opacity));
-    transition: all 0.3s ease-in-out;
+    transition: all 0.3s ease-out;
     transform: translateY(-110vh);
     z-index: 800;
     height: -webkit-fit-content;
@@ -1036,6 +1112,7 @@ article>*:not(.entry-content),
   /* BURGER MENU */
 
   #primary-menu body:has(header.burger_menu_active) {
+    max-height: 100vh;
     overflow: hidden;
   }
 
@@ -1062,6 +1139,31 @@ article>*:not(.entry-content),
   }
 }
 
+@media (max-width: 960px) and (hover: none) {
+  body {
+    background-color: red !important;
+  }
+
+  /* ul {
+		@apply w-max mx-auto;
+	} */
+
+  .primary-menu-container li.menu-item {
+    margin-left: auto;
+    margin-right: auto;
+    text-align: left !important;
+  }
+
+  .primary-menu-container li:has(.sub-menu) > a::after {
+    display: none;
+  }
+
+  .primary-menu-container li:has(.sub-menu) .sub-menu {
+    padding-left: 3rem;
+    display: block;
+  }
+}
+
 /* ########### BLOCKS ############ */
 
 /* Home */

header.php

@@ -19,9 +19,9 @@
 		<?php do_action('tailpress_header'); ?>
 
 		<header id="primary-header">
-
+			<!-- <span>&#x9660;</span> -->
 			<div class="primary-menu-container">
-				<div class="lg:flex lg:justify-between lg:items-center border-b py-6">
+				<div class="lg:flex lg:justify-between lg:items-center py-6">
 					<div class="flex justify-between items-center">
 						<div>
 							<?php if (has_custom_logo()) { ?>

resources/css/components/header.css

@@ -1,22 +1,75 @@
 .primary-menu-container {
 	@apply mx-auto max-w-screen-xl px-8;
+	/* Highlight using list element */
+	/* li.current-page-parent,
+	li.current-page-ancestor */
+	li.current-page-parent > a,
+	li.current_page_item > a {
+		@apply font-bold
+	text-secondary
+	lg:text-primary;
+	}
+
+	li.menu-item {
+		@apply font-medium text-sm uppercase;
+		&:hover > a {
+			@apply cursor-pointer
+			text-secondary 
+			lg:text-primary;
+		}
+	}
+	/* submenus */
+	li:has(.sub-menu) {
+		.sub-menu {
+			position: absolute;
+			display: none;
+		}
+		> a::after {
+			transform: translateY(-2px) rotate(-90deg);
+			content: "";
+			display: inline-block;
+			height: 10px;
+			width: 10px;
+			margin-left: 20px;
+			background-image: url("../resources/img/arrow_down_white.svg");
+			background-repeat: no-repeat;
+			background-size: contain;
+			transition: all 0.3s ease-out;
+		}
+	}
+	li:has(.sub-menu):hover,
+	li:has(.sub-menu):focus {
+		> a::after {
+			transform: translateY(-2px) rotate(0deg);
+		}
+		.sub-menu {
+			display: block;
+		}
+	}
 }
 .close_btn {
 	display: none;
 }
-.menu-navlink {
-	@apply font-medium
-	text-sm
-	uppercase;
-}
 
+/* RESPONSIVE */
 @media (max-width: 960px) {
+	.primary-menu-container {
+		@apply my-0 max-h-screen;
+		li:has(.sub-menu) {
+			.sub-menu {
+				@apply mx-auto;
+				/* position: static !important; */
+				position: static;
+			}
+		}
+	}
+
 	#primary-menu {
 		@apply bg-primary
 		mt-0
 		left-0
 		absolute;
-		transition: all 0.3s ease-in-out;
+		transition: all 0.3s ease-out;
 		transform: translateY(-110vh);
 		z-index: 800;
 		height: fit-content;
@@ -42,6 +95,7 @@
 		}
 		/* BURGER MENU */
 		body:has(header.burger_menu_active) {
+			@apply max-h-screen;
 			overflow: hidden;
 		}
 
@@ -68,3 +122,25 @@
 		}
 	}
 }
+@media (max-width: 960px) and (hover: none) {
+	body {
+		background-color: red !important;
+	}
+	/* ul {
+		@apply w-max mx-auto;
+	} */
+	.primary-menu-container {
+		li.menu-item {
+			@apply mx-auto !text-left;
+		}
+		li:has(.sub-menu) {
+			> a::after {
+				display: none;
+			}
+			.sub-menu {
+				@apply block pl-12;
+				display: block;
+			}
+		}
+	}
+}

resources/img/arrow_down_white.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="60.566" height="60.012" viewBox="0 0 60.566 60.012">
+  <path id="Tracé_766" data-name="Tracé 766" d="M0,0,30.42,60.012,60.566,0Z" transform="translate(0 0)" fill="#fff"/>
+</svg>

resources/img/arrow_right_white.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14.52" height="27.04" viewBox="0 0 14.52 27.04">
+  <path id="Tracé_139" data-name="Tracé 139" d="M24.565.354,12.459,12.46.354.354" transform="translate(1.061 25.979) rotate(-90)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+</svg>