added 3dot menu

src/components/FileBrowser.tsx

@@ -16,6 +16,7 @@ import FileUploadButton from "./FileUploadButton"
 import { ReactComponent as Spinner } from "./../assets/spinner.svg"
 import FileBrowserList from "./FileBrowserList"
 import pathRename from "../functions/pathRename"
+import MoreMenu from "./MoreMenu"
 
 function uriToPath(pathname:string) {
 	// strip the "/f" from e.g. "/f/dir1/dir2"
@@ -139,6 +140,9 @@ const FileBrowser: React.FC<RouteComponentProps> = (props) => {
 							onUpload={(files)=>handleDrop(files)}
 						/>
 					</div>
+					<div>
+						<MoreMenu />
+					</div>
 
 				</div>
 				<div>

src/components/MoreMenu.tsx

@@ -0,0 +1,51 @@
+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

src/components/MoreMenuEntry.tsx

@@ -0,0 +1,18 @@
+import React from "react"
+
+interface Props {
+	onclick?: ()=>void
+}
+
+const MoreMenuEntry: React.FC<Props> = (props) => {
+	return (
+		<li 
+			className="py-2 px-2 hover:bg-gray-100 dark:hover:bg-gray-900 cursor-pointer text-xl"
+			onClick={props.onclick}
+		>
+			{props.children}
+		</li>
+	)
+}
+
+export default MoreMenuEntry