Merge pull request #44 from a8cteam51/fix/mega-menu-styles

Updates to the mega menu block

mega-menu/CHANGELOG.md

@@ -0,0 +1,3 @@
+0.2.0
+- Update styles so the full width menu works when center or right aligned, as well as left aligned in the header
+- Update view.js so that if a user clicks outside the mega menu it closes.

mega-menu/mega-menu.php

@@ -2,7 +2,7 @@
 /**
  * Plugin Name:       Mega Menu
  * Description:       Add a menu item that opens a template part area to display as a mega menu.
- * Version:           0.1.0
+ * Version:           0.2.0
  * Requires at least: 6.6
  * Requires PHP:      7.2
  * Author:            The WordPress Contributors

mega-menu/src/render.php

@@ -56,6 +56,7 @@
 		aria-controls="<?php echo esc_attr( $mega_menu_blocks_unique_id ); ?>"
 		data-wp-class--active="state.isOpen"
 		class="<?php echo esc_attr( implode( ' ', $mega_menu_button_classes ) ); ?>"
+		data-wp-on-async-document--click="callbacks.handleModalOutsideClick"
 	>
 		<?php echo esc_html( $mega_menu_blocks_label ); ?>
 	</button>

mega-menu/src/style.scss

@@ -31,17 +31,20 @@
 					--wp--style--root--padding-left
 				)
 		);
-		right: 0;
+		right: 50%;
 		overflow: hidden;
 		opacity: 0;
 		position: absolute;
 		transition: opacity 0.1s linear;
+		transform: translateX(50%);
 		width: var(--wp--style--global--wide-size);
 		visibility: hidden;
 		z-index: 2;
 
 		@media screen and (max-width: 599px) {
 			position: relative;
+			right: unset;
+			transform: unset;
 		}
 	}
 
@@ -51,3 +54,14 @@
 		visibility: visible;
 	}
 }
+
+@media screen and (min-width: 600px) {
+	body.mega-menu-open {
+		.wp-block-navigation,
+		.wp-block-navigation__container,
+		.wp-block-navigation__responsive-container,
+		.wp-block-navigation__responsive-dialog {
+			position: unset !important;
+		}
+	}
+}

mega-menu/src/view.js

@@ -67,6 +67,26 @@ const { state, actions, helpers } = store( 'a8csp/mega-menu', {
 			}
 		},
 	},
+	callbacks: {
+		handleModalOutsideClick( event ) {
+			const { id } = getContext();
+
+			if ( state.selected !== id ) {
+				return;
+			}
+
+			if ( id === event.target.getAttribute('aria-controls') ) {
+				return;
+			}
+
+			const modal = helpers.getDivs( id );
+			const modalInner = modal.megaMenuContainer;
+
+			if ( ! modalInner.contains( event.target ) ) {
+				actions.closeMenu();
+			}
+		},
+	},
 	helpers: {
 		getButton: ( id ) => {
 			return document.getElementById( id );