mirror of
https://github.com/binwiederhier/ntfy.git
synced 2024-08-24 20:13:51 +02:00
122 lines
4.3 KiB
JavaScript
122 lines
4.3 KiB
JavaScript
![]() |
import Drawer from "@mui/material/Drawer";
|
||
|
import * as React 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 {useState} from "react";
|
||
|
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";
|
||
|
|
||
|
const navWidth = 240;
|
||
|
|
||
|
const Navigation = (props) => {
|
||
|
const navigationList =
|
||
|
<NavList
|
||
|
subscriptions={props.subscriptions}
|
||
|
selectedSubscription={props.selectedSubscription}
|
||
|
onSubscriptionClick={props.onSubscriptionClick}
|
||
|
onSubscribeSubmit={props.onSubscribeSubmit}
|
||
|
/>;
|
||
|
return (
|
||
|
<>
|
||
|
{/* Mobile drawer; only shown if menu icon clicked (mobile open) and display is small */}
|
||
|
<Drawer
|
||
|
variant="temporary"
|
||
|
open={props.mobileDrawerOpen}
|
||
|
onClose={props.onMobileDrawerToggle}
|
||
|
ModalProps={{ keepMounted: true }} // Better open performance on mobile.
|
||
|
sx={{
|
||
|
display: { xs: 'block', sm: 'none' },
|
||
|
'& .MuiDrawer-paper': { boxSizing: 'border-box', width: navWidth },
|
||
|
}}
|
||
|
>
|
||
|
{navigationList}
|
||
|
</Drawer>
|
||
|
{/* Big screen drawer; persistent, shown if screen is big */}
|
||
|
<Drawer
|
||
|
open
|
||
|
variant="permanent"
|
||
|
sx={{
|
||
|
display: { xs: 'none', sm: 'block' },
|
||
|
'& .MuiDrawer-paper': { boxSizing: 'border-box', width: navWidth },
|
||
|
}}
|
||
|
>
|
||
|
{navigationList}
|
||
|
</Drawer>
|
||
|
</>
|
||
|
);
|
||
|
};
|
||
|
Navigation.width = navWidth;
|
||
|
|
||
|
const NavList = (props) => {
|
||
|
const [subscribeDialogOpen, setSubscribeDialogOpen] = useState(false);
|
||
|
const handleSubscribeSubmit = (subscription) => {
|
||
|
setSubscribeDialogOpen(false);
|
||
|
props.onSubscribeSubmit(subscription);
|
||
|
}
|
||
|
return (
|
||
|
<>
|
||
|
<Toolbar />
|
||
|
{props.subscriptions.size() > 0 &&
|
||
|
<Divider />}
|
||
|
<List component="nav">
|
||
|
<NavSubscriptionList
|
||
|
subscriptions={props.subscriptions}
|
||
|
selectedSubscription={props.selectedSubscription}
|
||
|
onSubscriptionClick={props.onSubscriptionClick}
|
||
|
/>
|
||
|
<Divider sx={{ my: 1 }} />
|
||
|
<ListItemButton>
|
||
|
<ListItemIcon>
|
||
|
<SettingsIcon />
|
||
|
</ListItemIcon>
|
||
|
<ListItemText primary="Settings" />
|
||
|
</ListItemButton>
|
||
|
<ListItemButton onClick={() => setSubscribeDialogOpen(true)}>
|
||
|
<ListItemIcon>
|
||
|
<AddIcon />
|
||
|
</ListItemIcon>
|
||
|
<ListItemText primary="Add subscription" />
|
||
|
</ListItemButton>
|
||
|
</List>
|
||
|
<SubscribeDialog
|
||
|
open={subscribeDialogOpen}
|
||
|
onCancel={() => setSubscribeDialogOpen(false)}
|
||
|
onSubmit={handleSubscribeSubmit}
|
||
|
/>
|
||
|
</>
|
||
|
);
|
||
|
};
|
||
|
const NavSubscriptionList = (props) => {
|
||
|
const subscriptions = props.subscriptions;
|
||
|
return (
|
||
|
<>
|
||
|
{subscriptions.map((id, subscription) =>
|
||
|
<NavSubscriptionItem
|
||
|
key={id}
|
||
|
subscription={subscription}
|
||
|
selected={props.selectedSubscription && props.selectedSubscription.id === id}
|
||
|
onClick={() => props.onSubscriptionClick(id)}
|
||
|
/>)
|
||
|
}
|
||
|
</>
|
||
|
);
|
||
|
}
|
||
|
|
||
|
const NavSubscriptionItem = (props) => {
|
||
|
const subscription = props.subscription;
|
||
|
return (
|
||
|
<ListItemButton onClick={props.onClick} selected={props.selected}>
|
||
|
<ListItemIcon><ChatBubbleOutlineIcon /></ListItemIcon>
|
||
|
<ListItemText primary={subscription.shortUrl()}/>
|
||
|
</ListItemButton>
|
||
|
);
|
||
|
}
|
||
|
|
||
|
export default Navigation;
|