From 7535fc73fc7c1558b0e8605ed165ac42be802197 Mon Sep 17 00:00:00 2001
From: Peter Zimon <peter.zimon@gmail.com>
Date: Fri, 2 Jun 2023 12:21:30 +0200
Subject: [PATCH] Added click to menu items in AdminX

rers. https://github.com/TryGhost/Team/issues/3318
---
 ghost/admin-x-settings/src/admin-x-ds/global/Menu.stories.tsx | 4 +++-
 ghost/admin-x-settings/src/admin-x-ds/global/Menu.tsx         | 3 ++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/Menu.stories.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/Menu.stories.tsx
index 187dfb9f48..2c1b1ca10f 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/global/Menu.stories.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/Menu.stories.tsx
@@ -16,7 +16,9 @@ type Story = StoryObj<typeof Menu>;
 const items = [
     {id: 'item-1', label: 'Item 1'},
     {id: 'item-2', label: 'Item 2'},
-    {id: 'item-3', label: 'Item 3'}
+    {id: 'item-3', label: 'Click me', onClick: () => {
+        alert('Clicked!');
+    }}
 ];
 
 const longItems = [
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 3cd63d9115..db0f6754b2 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
@@ -3,6 +3,7 @@ import React, {useState} from 'react';
 export type MenuItem = {
     id: string,
     label: string;
+    onClick?: () => void
 }
 
 type MenuPosition = 'left' | 'right';
@@ -55,7 +56,7 @@ const Menu: React.FC<MenuProps> = ({trigger, items, position, className}) => {
             <div aria-labelledby="menu-button" aria-orientation="vertical" className={menuListStyles} role="menu">
                 <div className="py-1" role="none">
                     {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>
+                        <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" onClick={item.onClick}>{item.label}</button>
                     ))}
                 </div>
             </div>