Fix action bar

web/src/components/ActionBar.js

@@ -12,7 +12,11 @@ const ActionBar = (props) => {
         ? props.selectedSubscription.shortUrl()
         : "ntfy";
     return (
-        <AppBar position="fixed" sx={{ width: { sm: `calc(100% - ${Navigation.width}px)` }, ml: { sm: `${Navigation.width}px` } }}>
+        <AppBar position="fixed" sx={{
+            width: '100%',
+            zIndex: { sm: 2000 }, // > Navigation
+            ml: { sm: `${Navigation.width}px` }
+        }}>
             <Toolbar sx={{pr: '24px'}}>
                 <IconButton
                     color="inherit"
@@ -22,7 +26,9 @@ const ActionBar = (props) => {
                 >
                     <MenuIcon />
                 </IconButton>
-                <Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1 }}>{title}</Typography>
+                <Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1 }}>
+                    {title}
+                </Typography>
                 {props.selectedSubscription !== null && <IconSubscribeSettings
                     subscription={props.selectedSubscription}
                     users={props.users}
@@ -34,4 +40,17 @@ const ActionBar = (props) => {
     );
 };
 
+/*
+    To add a top left corner logo box:
+        <Typography variant="h5" noWrap component="div" sx={{
+            display: { xs: 'none', sm: 'block' },
+            width: { sm: `${Navigation.width}px` }
+        }}>
+            ntfy
+        </Typography>
+
+    To make the size of the top bar dynamic based on the drawer:
+        width: { sm: `calc(100% - ${Navigation.width}px)` }
+*/
+
 export default ActionBar;

web/src/components/App.js

@@ -23,7 +23,6 @@ import notificationManager from "../app/NotificationManager";
 // TODO embed into ntfy server
 // TODO remember selected subscription
 // TODO since=<ID>
-// TODO top left corner
 
 const App = () => {
     console.log(`[App] Rendering main view`);

web/src/components/Navigation.js

@@ -11,7 +11,7 @@ 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} from "@mui/material";
+import {Alert, AlertTitle, ListSubheader} from "@mui/material";
 import Button from "@mui/material/Button";
 import Typography from "@mui/material/Typography";
 
@@ -66,10 +66,11 @@ const NavList = (props) => {
     return (
         <>
             <Toolbar/>
-            <List component="nav" sx={{paddingTop: 0}}>
+            <List component="nav" sx={{
+                paddingTop: (showGrantPermissionsBox) ? '0' : ''
+            }}>
                 {showGrantPermissionsBox &&
                     <>
-                        <Divider/>
                         <Alert severity="warning" sx={{paddingTop: 2}}>
                             <AlertTitle>Notifications are disabled</AlertTitle>
                             <Typography gutterBottom>
@@ -84,17 +85,20 @@ const NavList = (props) => {
                                 Grant now
                             </Button>
                         </Alert>
+                        <Divider/>
                     </>}
                 {showSubscriptionsList &&
                     <>
-                        <Divider/>
+                        <ListSubheader component="div" id="nested-list-subheader">
+                            Subscribed topics
+                        </ListSubheader>
                         <SubscriptionList
                             subscriptions={props.subscriptions}
                             selectedSubscription={props.selectedSubscription}
                             onSubscriptionClick={props.onSubscriptionClick}
                         />
+                        <Divider sx={{my: 1}}/>
                     </>}
-                <Divider sx={{my: 1}}/>
                 <ListItemButton>
                     <ListItemIcon>
                         <SettingsIcon/>