Move things around

2022-02-25 12:46:22 -05:00 · 2022-02-25 12:46:22 -05:00 · 42016f48ff
commit 42016f48ff
parent f9e22dcaa9
4 changed files with 163 additions and 150 deletions
--- a/web/src/components/Navigation.js
+++ b/web/src/components/Navigation.js
@ -0,0 +1,121 @@
+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;