React

frontend/src/components/SiteHeader.tsx

@@ -0,0 +1,119 @@
+import { IconLock, IconLogout, IconUser } from "@tabler/icons-react";
+import { useState } from "react";
+import { LocalePicker, ThemeSwitcher } from "src/components";
+import { useAuthState } from "src/context";
+import { useUser } from "src/hooks";
+import { intl } from "src/locale";
+import { ChangePasswordModal, UserModal } from "src/modals";
+import styles from "./SiteHeader.module.css";
+
+export function SiteHeader() {
+	const { data: currentUser } = useUser("me");
+	const isAdmin = currentUser?.roles.includes("admin");
+	const { logout } = useAuthState();
+	const [showProfileEdit, setShowProfileEdit] = useState(false);
+	const [showChangePassword, setShowChangePassword] = useState(false);
+
+	return (
+		<header className="navbar navbar-expand-md d-print-none">
+			<div className="container-xl">
+				<button
+					className="navbar-toggler"
+					type="button"
+					data-bs-toggle="collapse"
+					data-bs-target="#navbar-menu"
+					aria-controls="navbar-menu"
+					aria-expanded="false"
+					aria-label="Toggle navigation"
+				>
+					<span className="navbar-toggler-icon" />
+				</button>
+				<div className="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
+					<span className={styles.logo}>
+						<img
+							src="/images/logo-no-text.svg"
+							width={40}
+							height={40}
+							className="navbar-brand-image"
+							alt="Logo"
+						/>
+						Nginx Proxy Manager
+					</span>
+				</div>
+				<div className="navbar-nav flex-row order-md-last">
+					<div className="d-none d-md-flex">
+						<div className="nav-item">
+							<LocalePicker />
+						</div>
+						<div className="nav-item">
+							<ThemeSwitcher />
+						</div>
+					</div>
+					<div className="nav-item d-none d-md-flex me-3">
+						<div className="nav-item dropdown">
+							<a
+								href="/"
+								className="nav-link d-flex lh-1 p-0 px-2"
+								data-bs-toggle="dropdown"
+								aria-label="Open user menu"
+							>
+								<span
+									className="avatar avatar-sm"
+									style={{
+										backgroundImage: `url(${currentUser?.avatar || "/images/default-avatar.jpg"})`,
+									}}
+								/>
+								<div className="d-none d-xl-block ps-2">
+									<div>{currentUser?.nickname}</div>
+									<div className="mt-1 small text-secondary">
+										{intl.formatMessage({ id: isAdmin ? "administrator" : "standard-user" })}
+									</div>
+								</div>
+							</a>
+							<div className="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
+								<a
+									href="?"
+									className="dropdown-item"
+									onClick={(e) => {
+										e.preventDefault();
+										setShowProfileEdit(true);
+									}}
+								>
+									<IconUser width={18} />
+									{intl.formatMessage({ id: "user.edit-profile" })}
+								</a>
+								<a
+									href="?"
+									className="dropdown-item"
+									onClick={(e) => {
+										e.preventDefault();
+										setShowChangePassword(true);
+									}}
+								>
+									<IconLock width={18} />
+									{intl.formatMessage({ id: "user.change-password" })}
+								</a>
+								<div className="dropdown-divider" />
+								<a
+									href="?"
+									className="dropdown-item"
+									onClick={(e) => {
+										e.preventDefault();
+										logout();
+									}}
+								>
+									<IconLogout width={18} />
+									{intl.formatMessage({ id: "user.logout" })}
+								</a>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			{showProfileEdit ? <UserModal userId="me" onClose={() => setShowProfileEdit(false)} /> : null}
+			{showChangePassword ? (
+				<ChangePasswordModal userId="me" onClose={() => setShowChangePassword(false)} />
+			) : null}
+		</header>
+	);
+}