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, ListSubheader} from "@mui/material"; import Button from "@mui/material/Button"; import Typography from "@mui/material/Typography"; 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 [subscribeDialogKey, setSubscribeDialogKey] = useState(0); const [subscribeDialogOpen, setSubscribeDialogOpen] = useState(false); const handleSubscribeReset = () => { setSubscribeDialogOpen(false); setSubscribeDialogKey(prev => prev+1); } const handleSubscribeSubmit = (subscription, user) => { handleSubscribeReset(); props.onSubscribeSubmit(subscription, user); } const showSubscriptionsList = props.subscriptions.size() > 0; const showGrantPermissionsBox = props.subscriptions.size() > 0 && !props.notificationsGranted; return ( <> {showGrantPermissionsBox && <> Notifications are disabled Grant your browser permission to display desktop notifications. } {showSubscriptionsList && <> Subscribed topics } setSubscribeDialogOpen(true)}> ); }; const SubscriptionList = (props) => { return ( <> {props.subscriptions.map((id, subscription) => props.onSubscriptionClick(id)} selected={props.selectedSubscription && props.selectedSubscription.id === id} > )} ); } export default Navigation;