52 lines
1.1 KiB
TypeScript
52 lines
1.1 KiB
TypeScript
import React from "react"
|
|
import { useState } from "react"
|
|
import { MdMoreVert } from "react-icons/md"
|
|
import { useOutsideClickRef } from "rooks"
|
|
import MoreMenuEntry from "./MoreMenuEntry"
|
|
|
|
const MoreMenu: React.FC = () => {
|
|
const [showMenu,setShowMenu] = useState(false)
|
|
|
|
const [outsideRef] = useOutsideClickRef(()=>{
|
|
setShowMenu(false)
|
|
})
|
|
|
|
return <>
|
|
<button
|
|
onClick={()=>{
|
|
setShowMenu(!showMenu)
|
|
}}
|
|
>
|
|
<MdMoreVert size="40"/>
|
|
</button>
|
|
<div className="" ref={outsideRef} >
|
|
{
|
|
showMenu && (
|
|
<div className="absolute -ml-32 bg-white dark:bg-gray-800 p-2 border-2 dark:border-gray-900">
|
|
{/* TODO: there has got to be a better way than "w-36" */}
|
|
<div className="w-36">
|
|
<ul>
|
|
<MoreMenuEntry>
|
|
Menu 1
|
|
</MoreMenuEntry>
|
|
<MoreMenuEntry>
|
|
Menu 2
|
|
</MoreMenuEntry>
|
|
<MoreMenuEntry
|
|
onclick={()=>{
|
|
setShowMenu(false)
|
|
}}
|
|
>
|
|
Logout
|
|
</MoreMenuEntry>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
</div>
|
|
</>
|
|
}
|
|
|
|
export default MoreMenu
|