Refactor to responsive drawer

web/src/app/utils.js

@@ -60,7 +60,6 @@ export async function* fetchLinesIterator(fileURL) {
 
     const re = /\n|\r|\r\n/gm;
     let startIndex = 0;
-    let result;
 
     for (;;) {
         let result = re.exec(chunk);

web/src/components/App.js

@@ -2,25 +2,24 @@ import * as React from 'react';
 import {useEffect, useState} from 'react';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
-import {styled, ThemeProvider} from '@mui/material/styles';
+import {ThemeProvider} from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
-import MuiDrawer from '@mui/material/Drawer';
-import MuiAppBar from '@mui/material/AppBar';
+import Drawer from '@mui/material/Drawer';
+import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
 import ChatBubbleOutlineIcon from '@mui/icons-material/ChatBubbleOutline';
 import List from '@mui/material/List';
 import Divider from '@mui/material/Divider';
 import IconButton from '@mui/material/IconButton';
 import MenuIcon from '@mui/icons-material/Menu';
-import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
 import ListItemButton from "@mui/material/ListItemButton";
 import SettingsIcon from "@mui/icons-material/Settings";
 import AddIcon from "@mui/icons-material/Add";
-import AddDialog from "./AddDialog";
+import SubscribeDialog from "./SubscribeDialog";
 import NotificationList from "./NotificationList";
-import SubscriptionSettings from "./SubscriptionSettings";
+import IconSubscribeSettings from "./IconSubscribeSettings";
 import theme from "./theme";
 import api from "../app/Api";
 import repository from "../app/Repository";
@@ -29,68 +28,23 @@ import Subscriptions from "../app/Subscriptions";
 
 const drawerWidth = 240;
 
-const AppBar = styled(MuiAppBar, {
-    shouldForwardProp: (prop) => prop !== 'open',
-})(({ theme, open }) => ({
-    zIndex: theme.zIndex.drawer + 1,
-    transition: theme.transitions.create(['width', 'margin'], {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.leavingScreen,
-    }),
-    ...(open && {
-        marginLeft: drawerWidth,
-        width: `calc(100% - ${drawerWidth}px)`,
-        transition: theme.transitions.create(['width', 'margin'], {
-            easing: theme.transitions.easing.sharp,
-            duration: theme.transitions.duration.enteringScreen,
-        }),
-    }),
-}));
-
-const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(
-    ({ theme, open }) => ({
-        '& .MuiDrawer-paper': {
-            position: 'relative',
-            whiteSpace: 'nowrap',
-            width: drawerWidth,
-            transition: theme.transitions.create('width', {
-                easing: theme.transitions.easing.sharp,
-                duration: theme.transitions.duration.enteringScreen,
-            }),
-            boxSizing: 'border-box',
-            ...(!open && {
-                overflowX: 'hidden',
-                transition: theme.transitions.create('width', {
-                    easing: theme.transitions.easing.sharp,
-                    duration: theme.transitions.duration.leavingScreen,
-                }),
-                width: theme.spacing(7),
-                [theme.breakpoints.up('sm')]: {
-                    width: theme.spacing(9),
-                },
-            }),
-        },
-    }),
-);
-
-
-const SubscriptionNav = (props) => {
+const NavSubscriptionList = (props) => {
     const subscriptions = props.subscriptions;
     return (
         <>
             {subscriptions.map((id, subscription) =>
-                <SubscriptionNavItem
+                <NavSubscriptionItem
                     key={id}
                     subscription={subscription}
                     selected={props.selectedSubscription && props.selectedSubscription.id === id}
-                    onClick={() => props.handleSubscriptionClick(id)}
+                    onClick={() => props.onSubscriptionClick(id)}
                 />)
             }
         </>
     );
 }
 
-const SubscriptionNavItem = (props) => {
+const NavSubscriptionItem = (props) => {
     const subscription = props.subscription;
     return (
         <ListItemButton onClick={props.onClick} selected={props.selected}>
@@ -100,13 +54,115 @@ const SubscriptionNavItem = (props) => {
     );
 }
 
+const NavList = (props) => {
+    const [subscribeDialogOpen, setSubscribeDialogOpen] = useState(false);
+    const handleSubscribeSubmit = (subscription) => {
+        setSubscribeDialogOpen(false);
+        props.onSubscribeSubmit(subscription);
+    }
+    return (
+        <>
+            <Toolbar />
+            <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 ActionBar = (props) => {
+    const title = (props.selectedSubscription !== null)
+        ? props.selectedSubscription.shortUrl()
+        : "ntfy";
+    return (
+        <AppBar position="fixed" sx={{ width: { sm: `calc(100% - ${drawerWidth}px)` }, ml: { sm: `${drawerWidth}px` } }}>
+            <Toolbar sx={{pr: '24px'}}>
+                <IconButton
+                    color="inherit"
+                    edge="start"
+                    onClick={props.onMobileDrawerToggle}
+                    sx={{ mr: 2, display: { sm: 'none' } }}
+                >
+                    <MenuIcon />
+                </IconButton>
+                <Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1 }}>{title}</Typography>
+                {props.selectedSubscription !== null && <IconSubscribeSettings
+                    subscription={props.selectedSubscription}
+                    onClearAll={props.onClearAll}
+                    onUnsubscribe={props.onUnsubscribe}
+                />}
+            </Toolbar>
+        </AppBar>
+    );
+};
+
+const Sidebar = (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: drawerWidth },
+                }}
+            >
+                {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: drawerWidth },
+                }}
+            >
+                {navigationList}
+            </Drawer>
+        </>
+    );
+};
+
 const App = () => {
     console.log(`[App] Rendering main view`);
 
-    const [drawerOpen, setDrawerOpen] = useState(true);
+    const [mobileDrawerOpen, setMobileDrawerOpen] = useState(false);
     const [subscriptions, setSubscriptions] = useState(new Subscriptions());
     const [selectedSubscription, setSelectedSubscription] = useState(null);
-    const [subscribeDialogOpen, setSubscribeDialogOpen] = useState(false);
     const handleNotification = (subscriptionId, notification) => {
         setSubscriptions(prev => {
             const newSubscription = prev.get(subscriptionId).addNotification(notification);
@@ -115,7 +171,6 @@ const App = () => {
     };
     const handleSubscribeSubmit = (subscription) => {
         console.log(`[App] New subscription: ${subscription.id}`);
-        setSubscribeDialogOpen(false);
         setSubscriptions(prev => prev.add(subscription).clone());
         setSelectedSubscription(subscription);
         api.poll(subscription.baseUrl, subscription.topic)
@@ -126,10 +181,6 @@ const App = () => {
                 });
             });
     };
-    const handleSubscribeCancel = () => {
-        console.log(`[App] Cancel clicked`);
-        setSubscribeDialogOpen(false);
-    };
     const handleClearAll = (subscriptionId) => {
         console.log(`[App] Deleting all notifications from ${subscriptionId}`);
         setSubscriptions(prev => {
@@ -145,14 +196,7 @@ const App = () => {
             return newSubscriptions;
         });
     };
-    const handleSubscriptionClick = (subscriptionId) => {
-        console.log(`[App] Selected ${subscriptionId}`);
-        setSelectedSubscription(subscriptions.get(subscriptionId));
-    };
     const notifications = (selectedSubscription !== null) ? selectedSubscription.getNotifications() : [];
-    const toggleDrawer = () => {
-        setDrawerOpen(!drawerOpen);
-    };
     useEffect(() => {
         setSubscriptions(repository.loadSubscriptions());
     }, [/* initial render only */]);
@@ -160,96 +204,42 @@ const App = () => {
         connectionManager.refresh(subscriptions, handleNotification);
         repository.saveSubscriptions(subscriptions);
     }, [subscriptions]);
+
     return (
         <ThemeProvider theme={theme}>
-            <CssBaseline />
-            <Box sx={{ display: 'flex' }}>
-                <AppBar position="absolute" open={drawerOpen}>
-                    <Toolbar sx={{pr: '24px'}} color="primary">
-                        <IconButton
-                            edge="start"
-                            color="inherit"
-                            aria-label="open drawer"
-                            onClick={toggleDrawer}
-                            sx={{
-                                marginRight: '36px',
-                                ...(drawerOpen && { display: 'none' }),
-                            }}
-                        >
-                            <MenuIcon />
-                        </IconButton>
-                        <Typography
-                            component="h1"
-                            variant="h6"
-                            color="inherit"
-                            noWrap
-                            sx={{ flexGrow: 1 }}
-                        >
-                            {(selectedSubscription !== null) ? selectedSubscription.shortUrl() : "ntfy"}
-                        </Typography>
-                        {selectedSubscription !== null && <SubscriptionSettings
-                            subscription={selectedSubscription}
-                            onClearAll={handleClearAll}
-                            onUnsubscribe={handleUnsubscribe}
-                        />}
-                    </Toolbar>
-                </AppBar>
-                <Drawer variant="permanent" open={drawerOpen}>
-                    <Toolbar
-                        sx={{
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'flex-end',
-                            px: [1],
-                        }}
-                    >
-                        <IconButton onClick={toggleDrawer}>
-                            <ChevronLeftIcon />
-                        </IconButton>
-                    </Toolbar>
-                    <Divider />
-                    <List component="nav">
-                        <SubscriptionNav
-                            subscriptions={subscriptions}
-                            selectedSubscription={selectedSubscription}
-                            handleSubscriptionClick={handleSubscriptionClick}
-                        />
-                        <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>
-                </Drawer>
+            <CssBaseline/>
+            <Box sx={{display: 'flex'}}>
+                <CssBaseline/>
+                <ActionBar
+                    selectedSubscription={selectedSubscription}
+                    onClearAll={handleClearAll}
+                    onUnsubscribe={handleUnsubscribe}
+                    onMobileDrawerToggle={() => setMobileDrawerOpen(!mobileDrawerOpen)}
+                />
+                <Box component="nav" sx={{width: {sm: drawerWidth}, flexShrink: {sm: 0}}}>
+                    <Sidebar
+                        subscriptions={subscriptions}
+                        selectedSubscription={selectedSubscription}
+                        mobileDrawerOpen={mobileDrawerOpen}
+                        onMobileDrawerToggle={() => setMobileDrawerOpen(!mobileDrawerOpen)}
+                        onSubscriptionClick={(subscriptionId) => setSelectedSubscription(subscriptions.get(subscriptionId))}
+                        onSubscribeSubmit={handleSubscribeSubmit}
+                    />
+                </Box>
                 <Box
                     component="main"
                     sx={{
-                        backgroundColor: (theme) =>
-                            theme.palette.mode === 'light'
-                                ? theme.palette.grey[100]
-                                : theme.palette.grey[900],
                         flexGrow: 1,
+                        p: 3,
+                        width: {sm: `calc(100% - ${drawerWidth}px)`},
                         height: '100vh',
                         overflow: 'auto',
-                    }}
-                >
-                    <Toolbar />
+                        backgroundColor: (theme) => theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900]
+                }}>
+                    <Toolbar/>
                     <NotificationList notifications={notifications}/>
                 </Box>
             </Box>
-            <AddDialog
-                open={subscribeDialogOpen}
-                onCancel={handleSubscribeCancel}
-                onSubmit={handleSubscribeSubmit}
-            />
         </ThemeProvider>
     );
 }

web/src/components/IconSubscribeSettings.js

@@ -11,7 +11,7 @@ import MoreVertIcon from "@mui/icons-material/MoreVert";
 import api from "../app/Api";
 
 // Originally from https://mui.com/components/menus/#MenuListComposition.js
-const SubscriptionSettings = (props) => {
+const IconSubscribeSettings = (props) => {
     const [open, setOpen] = useState(false);
     const anchorRef = useRef(null);
 
@@ -114,4 +114,4 @@ const SubscriptionSettings = (props) => {
     );
 }
 
-export default SubscriptionSettings;
+export default IconSubscribeSettings;

web/src/components/SubscribeDialog.js

@@ -12,7 +12,7 @@ import Subscription from "../app/Subscription";
 const defaultBaseUrl = "http://127.0.0.1"
 //const defaultBaseUrl = "https://ntfy.sh"
 
-const AddDialog = (props) => {
+const SubscribeDialog = (props) => {
     const [topic, setTopic] = useState("");
     const handleCancel = () => {
         setTopic('');
@@ -53,4 +53,4 @@ const AddDialog = (props) => {
     );
 };
 
-export default AddDialog;
+export default SubscribeDialog;