Added header navbar

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 (
+        <Menu open={isMenuOpen} handler={setIsMenuOpen} placement="bottom-end">
+            <MenuHandler>
+                <Button
+                    variant="text"
+                    className="flex items-center gap-1 rounded-full py-0.5 pr-2 pl-0.5 lg:ml-auto"
+                >
+                    <Avatar
+                        name={state.user?.name}
+                        abbr={state.user?.name?.substring(0, 2)}
+                    />
+                    <FontAwesomeIcon
+                        icon={isMenuOpen ? faChevronUp : faChevronDown}
+                        className="h-2 w-2"
+                    />
+                </Button>
+            </MenuHandler>
+            <MenuList className="p-1">
+                {profileMenuItems.map(({label, icon, onClick, showIf, color}) => {
+                    return (
+                        (showIf === undefined || showIf === true) ?
+                            <MenuItem
+                                key={label}
+                                onClick={onClick}
+                                className={`flex items-center gap-2 rounded ${
+                                    color ? `hover:${color}/10 focus:${color}/10 active:${color}/10` : ""
+                                }`}
+                            >
+                                <FontAwesomeIcon icon={icon} color={color ? color : ""} className="h-4 w-4"/>
+                                <p color={color ? color : ""}>{label}</p>
+                            </MenuItem> : null
+                    );
+                })}
+            </MenuList>
+        </Menu>
+    );
+}

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 (
-        <AppLayout primarySection="drawer">
-            <div slot="drawer" className="flex flex-col justify-between h-full p-m">
-                <header className="flex flex-col gap-m">
-                    <h1 className="text-l m-0">My App</h1>
-                    <nav>
-                    </nav>
-                </header>
-                <footer className="flex flex-col gap-s">
-                    {state.user ? (
-                        <>
-                            <div className="flex items-center gap-s">
-                                <Avatar theme="xsmall" name={state.user.name}/>
-                                {state.user.name}
-                            </div>
-                            <Button onClick={async () => logout()}>Sign out</Button>
-                        </>
-                    ) : (
-                        <a href="/login">Sign in</a>
-                    )}
-                </footer>
-            </div>
 
-            <DrawerToggle slot="navbar" aria-label="Menu toggle"></DrawerToggle>
+    return (
-            <h2 slot="navbar" className="text-l m-0">
+        <>
-                {currentTitle}
+            <Navbar className="sticky top-0 z-10 h-max max-w-full rounded-none px-4 py-2">
-            </h2>
+                <div className="flex items-center justify-end text-blue-gray-900">
+                    <img
+                        className="absolute w-full content-center h-8"
+                        src="/images/Logo.svg"
+                        alt="Gameyfin"
+                    />
+                    <ProfileMenu/>
+                </div>
+            </Navbar>
 
             <Outlet/>
-        </AppLayout>
+        </>
     );
 }
+
+/*<footer
+    className="flex flex-row w-full items-center justify-between px-10 py-4">
+    <Typography color="blue-gray">
+        Gameyfin v{packageJson.version}
+    </Typography>
+    <Typography color="blue-gray">
+        &copy; {(new Date()).getFullYear()} <a
+        href="https://github.com/gameyfin/gameyfin/graphs/contributors" target="_blank">Gameyfin
+        contributors</a>
+    </Typography>
+</footer>*/

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "no-name",
+  "name": "Gameyfin",
-  "license": "UNLICENSED",
+  "version": "2.0.0-ALPHA",
   "type": "module",
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.5.1",

src/main/resources/application.yml

@@ -19,7 +19,6 @@ spring:
     name: Gameyfin
 
 vaadin:
-  launch-browser: true
   # To improve the performance during development.
   # For more information https://vaadin.com/docs/flow/spring/tutorial-spring-configuration.html#special-configuration-parameters
   whitelisted-packages: