Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-27 22:49:56 -05:00
Code Issues Activity

Added interactivity to menu component in AdminX

Browse source 
refs. https://github.com/TryGhost/Team/issues/3351
This commit is contained in:
Peter Zimon 2023-06-01 17:04:20 +02:00
parent 661a85c748
commit 022fadee01
1 changed files with 19 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
ghost/admin-x-settings/src/admin-x-ds/global/Menu.tsx
View file

@ -1,5 +1,5 @@
import Icon from './Icon'; import Icon from './Icon';
import React from 'react'; import React, {useState} from 'react';
export type MenuItem = { export type MenuItem = {
id: string, id: string,
@ -16,7 +16,19 @@ interface MenuProps {
} }
const Menu: React.FC<MenuProps> = ({items, position, className}) => { 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) { switch (position) {
case 'left': case 'left':
@ -31,12 +43,14 @@ const Menu: React.FC<MenuProps> = ({items, position, className}) => {
break; break;
} }
menuListStyles += menuOpen ? 'block' : 'hidden';
return ( return (
/* Menu */
<div className={`relative inline-block ${className}`}> <div className={`relative inline-block ${className}`}>
<div className={`fixed inset-0 z-40 ${menuOpen ? 'block' : 'hidden'}`} onClick={handleBackdropClick}></div>
{/* Menu Trigger */} {/* Menu Trigger */}
<div> <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"> <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> <span className="sr-only">Open menu</span>
<Icon color="grey-900" name="menu-horizontal" /> <Icon color="grey-900" name="menu-horizontal" />
</button> </button>
@ -44,7 +58,6 @@ const Menu: React.FC<MenuProps> = ({items, position, className}) => {
{/* Menu List */} {/* Menu List */}
<div aria-labelledby="menu-button" aria-orientation="vertical" className={menuListStyles} role="menu"> <div aria-labelledby="menu-button" aria-orientation="vertical" className={menuListStyles} role="menu">
<div className="py-1" role="none"> <div className="py-1" role="none">
{/* Menu Item */}
{items.map(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> <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>
))} ))}