Nav Block Updates (#194)

* [N/A] Fix duplicate class attributes

* [N/A] Added classes/variants to check when menu open/closed

Author: bd-viget

wp-content/themes/wp-starter/blocks/navigation-container/render.php

@@ -45,7 +45,7 @@ class="hidden"
 			<?php if ( ! is_admin() ) : ?>
 				x-show="!menuIsOpen"
 			<?php endif; ?>
-			class="m-2" xmlns="http://www.w3.org/2000/svg" width="27" height="18" viewBox="0 0 27 18" fill="currentColor" class="menu-open">
+			class="m-2 menu-open" xmlns="http://www.w3.org/2000/svg" width="27" height="18" viewBox="0 0 27 18" fill="currentColor">
 			<title><?php esc_html_e( 'Open Menu', 'wp-starter' ); ?></title>
 			<path d="M26.8059 1H0.805908" stroke="currentColor" stroke-width="1.5"></path>
 			<path d="M26.8059 17H0.805908" stroke="currentColor" stroke-width="1.5"></path>
@@ -55,7 +55,7 @@ class="m-2" xmlns="http://www.w3.org/2000/svg" width="27" height="18" viewBox="0
 			<?php if ( ! is_admin() ) : ?>
 				x-show="menuIsOpen"
 			<?php endif; ?>
-			class="m-2" xmlns="http://www.w3.org/2000/svg" width="21" height="20" fill="currentColor" class="menu-close">
+			class="m-2 menu-close" xmlns="http://www.w3.org/2000/svg" width="21" height="20" fill="currentColor">
 			<title><?php esc_html_e( 'Close Menu', 'wp-starter' ); ?></title>
 			<path d="M19.192 19.192.808.808M1 19.192 19.385.808" stroke="currentColor" stroke-width="2"></path>
 		</svg>
@@ -64,6 +64,7 @@ class="m-2" xmlns="http://www.w3.org/2000/svg" width="21" height="20" fill="curr
 	<div
 		<?php if ( ! is_admin() ) : ?>
 			x-show="menuIsOpen"
+			:class="{ 'menu-hidden': !menuIsOpen }"
 			@click.away="menuIsOpen = false"
 		<?php endif; ?>
 		class="acf-block-inner__container"

wp-content/themes/wp-starter/blocks/navigation-container/render.twig

@@ -41,7 +41,7 @@
 			{% if function('is_admin') == false %}
 				x-show="!menuIsOpen"
 			{% endif %}
-			class="m-2" xmlns="http://www.w3.org/2000/svg" role="img" width="27" height="18" viewBox="0 0 27 18" fill="currentColor" class="menu-open">
+			class="m-2 menu-open" xmlns="http://www.w3.org/2000/svg" role="img" width="27" height="18" viewBox="0 0 27 18" fill="currentColor">
 			<title>Open Menu</title>
 			<path d="M26.8059 1H0.805908" stroke="currentColor" stroke-width="1.5"></path>
 			<path d="M26.8059 17H0.805908" stroke="currentColor" stroke-width="1.5"></path>
@@ -51,7 +51,7 @@
 			{% if function('is_admin') == false %}
 				x-show="menuIsOpen"
 			{% endif %}
-			class="m-2" xmlns="http://www.w3.org/2000/svg" role="img" width="21" height="20" fill="currentColor" class="menu-close">
+			class="m-2 menu-close" xmlns="http://www.w3.org/2000/svg" role="img" width="21" height="20" fill="currentColor">
 			<title>Close Menu</title>
 			<path d="M19.192 19.192.808.808M1 19.192 19.385.808" stroke="currentColor" stroke-width="2"></path>
 		</svg>
@@ -60,6 +60,7 @@
 	<div
 		{% if function('is_admin') == false %}
 			x-show="menuIsOpen"
+			:class="{ 'menu-hidden': !menuIsOpen }"
 			@click.away="menuIsOpen = false"
 		{% endif %}
 		class="acf-block-inner__container"

wp-content/themes/wp-starter/blocks/navigation-container/view.css

@@ -2,14 +2,18 @@
 	@apply mobile-menu:w-auto flex w-full flex-col items-end gap-5;
 
 	& > .acf-block-inner__container {
-		@apply mobile-menu:!flex;
+		@apply fixed z-40 top-0 right-0 w-full h-full bg-white;
+		@apply admin-bar-sticky:top-[var(--wp-admin--admin-bar--height,0)];
+		@apply mobile-menu:w-auto mobile-menu:relative mobile-menu:top-auto mobile-menu:right-auto mobile-menu:flex!;
 	}
 	&[x-data*='true'] > .acf-block-inner__container {
-		@apply max-mobile-menu:!flex;
+		@apply max-mobile-menu:flex!;
 	}
 
 	button.navigation-toggle[aria-rel='mobile-toggle'] {
-		@apply mobile-menu:hidden absolute inset-y-0 right-0 flex h-32 w-32 items-center justify-center text-black dark:text-white;
+		@apply absolute z-50 inset-y-0 right-0 flex h-32 w-32 items-center justify-center text-black dark:text-white;
+		@apply mobile-menu:hidden;
+		@apply mobile-menu-open:fixed;
 	}
 	.acf-block-inner__container {
 		@apply mobile-menu:pt-0 mobile-menu:w-auto w-full pt-24;
@@ -19,3 +23,13 @@
 		@apply flex flex-row gap-24;
 	}
 }
+
+html, body {
+	&:has(.menu-open[style]) {
+		@apply overflow-hidden
+	}
+}
+
+#wpadminbar {
+	@apply max-admin-bar-sticky:z-[30]!;
+}

wp-content/themes/wp-starter/src/styles/tailwind.css

@@ -6,6 +6,8 @@
 
 /* Dark theme to be driven by a CSS selector instead of the prefers-color-scheme media query */
 @custom-variant dark (&:where(.dark, .dark *));
+@custom-variant mobile-menu-closed (body:has(.menu-closed[style]) &);
+@custom-variant mobile-menu-open (body:has(.menu-open[style]) &);
 
 /*
 	Check the css files in the tailwind folder for more variables
@@ -15,7 +17,9 @@
 	/* Screens (breakpoints) */
 	--breakpoint-container: 1200px;
 	--breakpoint-content-wide: 900px;
+	--breakpoint-admin-bar-desktop: 782px;
 	--breakpoint-wp-cols: 781px;
+	--breakpoint-admin-bar-sticky: 601px;
 	--breakpoint-mobile-menu: 600px;
 	--breakpoint-xs: 480px;