import AppBar from "@mui/material/AppBar"; import Navigation from "./Navigation"; import Toolbar from "@mui/material/Toolbar"; import IconButton from "@mui/material/IconButton"; import MenuIcon from "@mui/icons-material/Menu"; import Typography from "@mui/material/Typography"; import * as React from "react"; import {useState} from "react"; import Box from "@mui/material/Box"; import {topicDisplayName} from "../app/utils"; import db from "../app/db"; import {useLocation, useNavigate} from "react-router-dom"; import MenuItem from '@mui/material/MenuItem'; import MoreVertIcon from "@mui/icons-material/MoreVert"; import NotificationsIcon from '@mui/icons-material/Notifications'; import NotificationsOffIcon from '@mui/icons-material/NotificationsOff'; import routes from "./routes"; import subscriptionManager from "../app/SubscriptionManager"; import logo from "../img/ntfy.svg"; import {useTranslation} from "react-i18next"; import session from "../app/Session"; import AccountCircleIcon from '@mui/icons-material/AccountCircle'; import Button from "@mui/material/Button"; import Divider from "@mui/material/Divider"; import {Logout, Person, Settings} from "@mui/icons-material"; import ListItemIcon from "@mui/material/ListItemIcon"; import accountApi from "../app/AccountApi"; import PopupMenu from "./PopupMenu"; import { SubscriptionPopup } from "./SubscriptionPopup"; const ActionBar = (props) => { const { t } = useTranslation(); const location = useLocation(); let title = "ntfy"; if (props.selected) { title = topicDisplayName(props.selected); } else if (location.pathname === routes.settings) { title = t("action_bar_settings"); } else if (location.pathname === routes.account) { title = t("action_bar_account"); } return ( Navigation (1200), but < Dialog (1300) ml: { sm: `${Navigation.width}px` } }}> {title} {props.selected && } ); }; const SettingsIcons = (props) => { const { t } = useTranslation(); const [anchorEl, setAnchorEl] = useState(null); const subscription = props.subscription; const handleToggleMute = async () => { const mutedUntil = (subscription.mutedUntil) ? 0 : 1; // Make this a timestamp in the future await subscriptionManager.setMutedUntil(subscription.id, mutedUntil); } return ( <> {subscription.mutedUntil ? : } setAnchorEl(ev.currentTarget)} aria-label={t("action_bar_toggle_action_menu")}> setAnchorEl(null)} /> ); }; const ProfileIcon = () => { const { t } = useTranslation(); const [anchorEl, setAnchorEl] = useState(null); const open = Boolean(anchorEl); const navigate = useNavigate(); const handleClick = (event) => { setAnchorEl(event.currentTarget); }; const handleClose = () => { setAnchorEl(null); }; const handleLogout = async () => { try { await accountApi.logout(); await db.delete(); } finally { session.resetAndRedirect(routes.app); } }; return ( <> {session.exists() && } {!session.exists() && config.enable_login && } {!session.exists() && config.enable_signup && } navigate(routes.account)}> {session.username()} navigate(routes.settings)}> {t("action_bar_profile_settings")} {t("action_bar_profile_logout")} ); }; export default ActionBar;