From e29afe95c2a7110eecc218abe01fe59034b97ee3 Mon Sep 17 00:00:00 2001
From: Belinda <belinda@verytwisty.com>
Date: Wed, 26 Feb 2025 16:42:36 +0000
Subject: [PATCH 1/3] add styles for centre aligned menus, add close on click
 outside

---
 mega-menu/src/render.php |  1 +
 mega-menu/src/style.scss | 16 +++++++++++++++-
 mega-menu/src/view.js    | 20 ++++++++++++++++++++
 3 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/mega-menu/src/render.php b/mega-menu/src/render.php
index 6ab31b7..bb611d8 100644
--- a/mega-menu/src/render.php
+++ b/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>
diff --git a/mega-menu/src/style.scss b/mega-menu/src/style.scss
index b4ef144..b9ac181 100644
--- a/mega-menu/src/style.scss
+++ b/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;
+		}
+	}
+}
diff --git a/mega-menu/src/view.js b/mega-menu/src/view.js
index b6205d6..643db1e 100644
--- a/mega-menu/src/view.js
+++ b/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 );

From 446ff902d4b3a59d489e572c8b9c46e04babe723 Mon Sep 17 00:00:00 2001
From: Belinda <belinda@verytwisty.com>
Date: Thu, 27 Feb 2025 09:54:26 +0000
Subject: [PATCH 2/3] Update version number

---
 mega-menu/mega-menu.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/mega-menu/mega-menu.php b/mega-menu/mega-menu.php
index ab4b656..8ed8e04 100644
--- a/mega-menu/mega-menu.php
+++ b/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

From 657dd633c81685c9ebefa91a30e82c3e63fada64 Mon Sep 17 00:00:00 2001
From: Belinda <belinda@verytwisty.com>
Date: Thu, 27 Feb 2025 10:10:00 +0000
Subject: [PATCH 3/3] Add changelog

---
 mega-menu/CHANGELOG.md | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 mega-menu/CHANGELOG.md

diff --git a/mega-menu/CHANGELOG.md b/mega-menu/CHANGELOG.md
new file mode 100644
index 0000000..76d00ce
--- /dev/null
+++ b/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.
\ No newline at end of file