From 022fadee01919eeac0bc249c4ec6740479775284 Mon Sep 17 00:00:00 2001
From: Peter Zimon <peter.zimon@gmail.com>
Date: Thu, 1 Jun 2023 17:04:20 +0200
Subject: [PATCH] Added interactivity to menu component in AdminX

refs. https://github.com/TryGhost/Team/issues/3351
---
 .../src/admin-x-ds/global/Menu.tsx            | 25 ++++++++++++++-----
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/Menu.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/Menu.tsx
index 233467aa0e..423d7d97ee 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/global/Menu.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/Menu.tsx
@@ -1,5 +1,5 @@
 import Icon from './Icon';
-import React from 'react';
+import React, {useState} from 'react';
 
 export type MenuItem = {
     id: string,
@@ -16,7 +16,19 @@ interface MenuProps {
 }
 
 const Menu: React.FC<MenuProps> = ({items, position, className}) => {
-    let menuListStyles = 'absolute z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none';
+    const [menuOpen, setMenuOpen] = useState(false);
+
+    let menuListStyles = 'absolute z-40 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none';
+
+    const toggleMenu = () => {
+        setMenuOpen(!menuOpen);
+    };
+
+    const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {        
+        if (e.target === e.currentTarget) {
+            setMenuOpen(false);
+        }
+    };
 
     switch (position) {
     case 'left':
@@ -31,12 +43,14 @@ const Menu: React.FC<MenuProps> = ({items, position, className}) => {
         break;
     }
 
+    menuListStyles += menuOpen ? 'block' : 'hidden';
+
     return (
-        /* Menu */
         <div className={`relative inline-block ${className}`}>
+            <div className={`fixed inset-0 z-40 ${menuOpen ? 'block' : 'hidden'}`} onClick={handleBackdropClick}></div>
             {/* Menu Trigger */}
-            <div>
-                <button aria-expanded="true" aria-haspopup="true" className="flex items-center rounded-sm bg-grey-100 px-2 py-1 text-grey-400 hover:text-grey-600" id="menu-button" type="button">
+            <div className='relative z-50'>
+                <button aria-expanded="true" aria-haspopup="true" className="flex items-center rounded-sm bg-grey-100 px-2 py-1 text-grey-400 hover:text-grey-600" id="menu-button" type="button" onClick={toggleMenu}>
                     <span className="sr-only">Open menu</span>
                     <Icon color="grey-900" name="menu-horizontal" />
                 </button>
@@ -44,7 +58,6 @@ const Menu: React.FC<MenuProps> = ({items, position, className}) => {
             {/* Menu List */}
             <div aria-labelledby="menu-button" aria-orientation="vertical" className={menuListStyles} role="menu">
                 <div className="py-1" role="none">
-                    {/* Menu Item */}
                     {items.map(item => (
                         <button key={item.id} className="block w-full cursor-pointer px-4 py-2 text-left text-sm text-grey-900 hover:bg-grey-100" type="button">{item.label}</button>
                     ))}