diff --git a/frontend/components/ProfileMenu.tsx b/frontend/components/ProfileMenu.tsx new file mode 100644 index 0000000..37542d0 --- /dev/null +++ b/frontend/components/ProfileMenu.tsx @@ -0,0 +1,82 @@ +import {useState} from "react"; +import {Button, Menu, MenuHandler, MenuItem, MenuList} from "@material-tailwind/react"; +import { + faChevronDown, + faChevronUp, + faCog, + faQuestionCircle, + faSignOut, + faUser +} from "@fortawesome/free-solid-svg-icons"; +import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; +import {useAuth} from "Frontend/util/auth"; +import {Avatar} from "@hilla/react-components/Avatar"; +import {useNavigate} from "react-router-dom"; + +export default function ProfileMenu() { + const [isMenuOpen, setIsMenuOpen] = useState(false); + const {state, logout} = useAuth(); + const navigate = useNavigate(); + + const profileMenuItems = [ + { + label: "My Profile", + icon: faUser, + onClick: () => alert("Profile") + }, + { + label: "Administration", + icon: faCog, + onClick: () => alert("Administration"), + showIf: state.user?.authorities?.some(a => a?.includes("ADMIN")) + }, + { + label: "Help", + icon: faQuestionCircle, + onClick: () => window.open("https://github.com/gameyfin/gameyfin/tree/v2", "_blank") + }, + { + label: "Sign Out", + icon: faSignOut, + onClick: () => logout(), + color: "red-500" + }, + ]; + + return ( +
+ ); +} \ No newline at end of file diff --git a/frontend/views/MainLayout.tsx b/frontend/views/MainLayout.tsx index 00315bf..8a9c710 100644 --- a/frontend/views/MainLayout.tsx +++ b/frontend/views/MainLayout.tsx @@ -1,11 +1,9 @@ -import {AppLayout} from '@hilla/react-components/AppLayout.js'; -import {Avatar} from '@hilla/react-components/Avatar.js'; -import {Button} from '@hilla/react-components/Button.js'; -import {DrawerToggle} from '@hilla/react-components/DrawerToggle.js'; import {useAuth} from 'Frontend/util/auth.js'; import {useRouteMetadata} from 'Frontend/util/routing.js'; import {useEffect} from 'react'; -import {Outlet} from 'react-router-dom'; +import {Navbar} from "@material-tailwind/react"; +import ProfileMenu from "Frontend/components/ProfileMenu"; +import {Outlet} from "react-router-dom"; const navLinkClasses = ({isActive}: any) => { return `block rounded-m p-s ${isActive ? 'bg-primary-10 text-primary' : 'text-body'}`; @@ -18,35 +16,33 @@ export default function MainLayout() { }, [currentTitle]); const {state, logout} = useAuth(); - return ( -