import Drawer from "@mui/material/Drawer"; import * as React from "react"; import {useState} from "react"; import ListItemButton from "@mui/material/ListItemButton"; import ListItemIcon from "@mui/material/ListItemIcon"; import ChatBubbleOutlineIcon from "@mui/icons-material/ChatBubbleOutline"; import ListItemText from "@mui/material/ListItemText"; import Toolbar from "@mui/material/Toolbar"; import Divider from "@mui/material/Divider"; import List from "@mui/material/List"; import SettingsIcon from "@mui/icons-material/Settings"; import AddIcon from "@mui/icons-material/Add"; import SubscribeDialog from "./SubscribeDialog"; import {Alert, AlertTitle, CircularProgress, ListSubheader} from "@mui/material"; import Button from "@mui/material/Button"; import Typography from "@mui/material/Typography"; import {subscriptionRoute, topicShortUrl, topicUrl} from "../app/utils"; import {ConnectionState} from "../app/Connection"; import {useLocation, useNavigate} from "react-router-dom"; const navWidth = 240; const Navigation = (props) => { const navigationList = ; return ( <> {/* Mobile drawer; only shown if menu icon clicked (mobile open) and display is small */} {navigationList} {/* Big screen drawer; persistent, shown if screen is big */} {navigationList} ); }; Navigation.width = navWidth; const NavList = (props) => { const navigate = useNavigate(); const location = useLocation(); const [subscribeDialogKey, setSubscribeDialogKey] = useState(0); const [subscribeDialogOpen, setSubscribeDialogOpen] = useState(false); const handleSubscribeReset = () => { setSubscribeDialogOpen(false); setSubscribeDialogKey(prev => prev+1); } const handleSubscribeSubmit = (subscription) => { handleSubscribeReset(); props.onSubscribeSubmit(subscription); } const showSubscriptionsList = props.subscriptions?.length > 0; const showGrantPermissionsBox = props.subscriptions?.length > 0 && !props.notificationsGranted; return ( <> {showGrantPermissionsBox && } {showSubscriptionsList && <> Subscribed topics } navigate("/settings")} selected={location.pathname === "/settings"}> setSubscribeDialogOpen(true)}> ); }; const SubscriptionList = (props) => { const sortedSubscriptions = props.subscriptions.sort( (a, b) => { return (topicUrl(a.baseUrl, a.topic) < topicUrl(b.baseUrl, b.topic)) ? -1 : 1; }); return ( <> {sortedSubscriptions.map(subscription => )} ); } const SubscriptionItem = (props) => { const navigate = useNavigate(); const subscription = props.subscription; const icon = (subscription.state === ConnectionState.Connecting) ? : ; const label = (subscription.baseUrl === window.location.origin) ? subscription.topic : topicShortUrl(subscription.baseUrl, subscription.topic); return ( navigate(subscriptionRoute(subscription))} selected={props.selected}> {icon} ); }; const PermissionAlert = (props) => { return ( <> Notifications are disabled Grant your browser permission to display desktop notifications. ); }; export default Navigation;