Collapse toolbar in a menu for mobile devices

rigon · Sep 21, 2023 · 0b1bf0f · 0b1bf0f
1 parent f7885b3
commit 0b1bf0f
Show file tree

Hide file tree

Showing 9 changed files with 174 additions and 80 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -10,6 +10,7 @@ module.exports = {
   plugins: ['react-refresh'],
   rules: {
     'react-refresh/only-export-components': 'warn',
-    "@typescript-eslint/no-explicit-any": 'warn',
+    '@typescript-eslint/no-explicit-any': 'warn',
+    '@typescript-eslint/no-unused-vars': 'warn',
   },
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "photo-gallery",
   "private": true,
-  "version": "1.5.1",
+  "version": "1.5.2",
   "type": "module",
   "scripts": {
     "start": "vite",

diff --git a/src/FavoriteMenu.tsx b/src/FavoriteMenu.tsx
@@ -1,30 +1,22 @@
 import { FC, useState } from 'react';
-import { styled } from '@mui/material/styles';
 import { useSelector, useDispatch } from 'react-redux';
-import Button from '@mui/material/Button';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import FavoriteIcon from '@mui/icons-material/Favorite';
 import ListItemText from '@mui/material/ListItemText';
-import Menu, { MenuProps } from '@mui/material/Menu';
+import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
-import Tooltip from '@mui/material/Tooltip';
 
 import { useGetPseudoAlbumsQuery } from './services/api';
 import { changeFavorite, selectFavorite } from './services/app';
+import { ToolbarItem } from './Toolbar';
 
-const StyledButton = styled(Button)({
-    textTransform: "none",
-    borderRadius: "1000px",
-    paddingLeft: "11px",
-});
 
 const FavoriteMenu: FC = () => {
     const dispatch = useDispatch();
     const favoriteSelected = useSelector(selectFavorite);
     const { data = [], isFetching } = useGetPseudoAlbumsQuery();
-    const [anchorEl, setAnchorEl] = useState<MenuProps["anchorEl"]>(null);
+    const [anchorEl, setAnchorEl] = useState<Element | null>(null);
 
-    const handleClickListItem = (event: React.SyntheticEvent<HTMLButtonElement>) => {
+    const handleClickListItem = (event: React.MouseEvent<Element, MouseEvent>) => {
         setAnchorEl(event.currentTarget);
     };
 
@@ -50,28 +42,26 @@ const FavoriteMenu: FC = () => {
     ));
 
     return (
-        <div>
-            <Tooltip title="Select an album to bookmark your favorites photos" enterDelay={300}>
-                <StyledButton
-                    color="inherit"
-                    onClick={handleClickListItem}
-                    startIcon={<FavoriteIcon />}
-                    endIcon={<ExpandMoreIcon />}>
-                        { favoriteSelected?.album || <em>Nothing</em> }
-                </StyledButton>
-            </Tooltip>
+        <>
+            <ToolbarItem
+                subMenu
+                showTitle
+                onClick={handleClickListItem}
+                icon={<FavoriteIcon />}
+                title={ favoriteSelected?.album || <em>Nothing</em> }
+                tooltip="Select an album to bookmark your favorites photos" />
 
             <Menu
                 id="lock-menu"
                 anchorEl={anchorEl}
-                anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
-                transformOrigin={{ vertical: 'top', horizontal: 'center' }}
+                anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+                transformOrigin={{ vertical: 'top', horizontal: 'left' }}
                 keepMounted
                 open={Boolean(anchorEl)}
                 onClose={handleCloseMenu}>
                     { noItems ? info : items }
             </Menu>
-        </div>
+        </>
     );
 }
 

diff --git a/src/Layout.tsx b/src/Layout.tsx
@@ -13,7 +13,6 @@ import Link from '@mui/material/Link';
 import MenuIcon from '@mui/icons-material/Menu';
 import Paper from '@mui/material/Paper';
 import Toolbar from '@mui/material/Toolbar';
-import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import ZoomOutIcon from "@mui/icons-material/ZoomOutRounded";
 import ZoomInIcon from "@mui/icons-material/ZoomInRounded";
@@ -25,6 +24,7 @@ import FavoriteMenu from './FavoriteMenu';
 import NewAlbum from './NewAlbum';
 import Storage from './Storage';
 import ThemeMenu from './ThemeMenu';
+import { ToolbarItem, ToolbarMenu } from './Toolbar';
 
 import { increaseZoom, decreaseZoom } from "./services/app";
 
@@ -65,7 +65,6 @@ const Layout: FC = () => {
                 <AlbumList onClick={handleDrawerClose} />
             </Box>
             <Box sx={{ flex: 'none' }}>
-                {/* <Divider /> */}
                 <Storage />
                 <Paper elevation={24} square>
                     <Typography variant="body2" style={{ padding: "10px", textAlign: 'justify' }} >
@@ -86,8 +85,8 @@ const Layout: FC = () => {
             <AppBar
                 position="fixed"
                 sx={{
-                    width: { sm: `calc(100% - ${drawerWidth}px)` },
-                    ml: { sm: `${drawerWidth}px` },
+                    width: { md: `calc(100% - ${drawerWidth}px)` },
+                    ml: { md: `${drawerWidth}px` },
                 }}
             >
                 <Toolbar>
@@ -96,32 +95,23 @@ const Layout: FC = () => {
                         aria-label="open drawer"
                         edge="start"
                         onClick={handleDrawerToggle}
-                        sx={{ mr: 2, display: { sm: 'none' } }}
+                        sx={{ mr: 2, display: { md: 'none' } }}
                     >
                         <MenuIcon />
                     </IconButton>
                     <AlbumTitle />
                     <Box sx={{ flexGrow: 1 }} />
-                    <NewAlbum />
-                    <FavoriteMenu />
-                    <ThemeMenu />
-
-                    <Tooltip title="Increase Zoom" enterDelay={300}>
-                        <IconButton onClick={zoomIn} aria-label="zoom in" color="inherit">
-                            <ZoomInIcon />
-                        </IconButton>
-                    </Tooltip>
-                    <Tooltip title="Decrease Zoom" enterDelay={300}>
-                        <IconButton onClick={zoomOut} aria-label="zoom out" color="inherit">
-                            <ZoomOutIcon />
-                        </IconButton>
-                    </Tooltip>
+                    <ToolbarMenu>
+                        <NewAlbum />
+                        <FavoriteMenu />
+                        <Divider />
+                        <ThemeMenu />
+                        <ToolbarItem title="Zoom in" tooltip="Increase Zoom" onClick={zoomIn} icon={<ZoomInIcon />} />
+                        <ToolbarItem title="Zoom out" tooltip="Decrease Zoom" onClick={zoomOut} icon={<ZoomOutIcon />} />
+                    </ToolbarMenu>
                 </Toolbar>
             </AppBar>
-            <Box
-                component="nav"
-                sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }}
-            >
+            <Box component="nav" sx={{ width: { md: drawerWidth }, flexShrink: { md: 0 } }}>
                 {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
                 <Drawer
                     variant="temporary"
@@ -131,16 +121,16 @@ const Layout: FC = () => {
                         keepMounted: true, // Better open performance on mobile.
                     }}
                     sx={{
-                        display: { xs: 'block', sm: 'none' },
-                        '& .MuiDrawer-paper': { boxSizing: 'border-box', width: "90%" },
+                        display: { xs: 'block', md: 'none' },
+                        '& .MuiDrawer-paper': { boxSizing: 'border-box', width: "70%", minWidth: drawerWidth },
                     }}
                 >
                     {drawer}
                 </Drawer>
                 <Drawer
                     variant="permanent"
                     sx={{
-                        display: { xs: 'none', sm: 'block' },
+                        display: { xs: 'none', md: 'block' },
                         '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
                     }}
                     open
@@ -150,7 +140,7 @@ const Layout: FC = () => {
             </Box>
             <Box
                 component="main"
-                sx={{ flexGrow: 1, width: { sm: `calc(100% - ${drawerWidth}px)` } }}
+                sx={{ flexGrow: 1, width: { md: `calc(100% - ${drawerWidth}px)` } }}
             >
                 <Toolbar />
 

diff --git a/src/NewAlbum.tsx b/src/NewAlbum.tsx
@@ -25,6 +25,7 @@ import Tooltip from '@mui/material/Tooltip';
 
 import { useGetCollectionsQuery, useAddAlbumMutation, QueryAddAlbum } from "./services/api";
 import useNotification from './Notification';
+import { ToolbarItem } from './Toolbar';
 
 const defaults: QueryAddAlbum = {
     collection: "",
@@ -83,11 +84,12 @@ const NewAlbum: FC = () => {
 
     return (
         <>
-            <Tooltip title="Create new album" enterDelay={300}>
-                <IconButton onClick={handleClickOpen} aria-label="create album" color="inherit">
-                    <AddAlbumIcon />
-                </IconButton>
-            </Tooltip>
+            <ToolbarItem
+                onClick={handleClickOpen}
+                icon={<AddAlbumIcon />}
+                title="New album"
+                tooltip="Create a new album"
+                aria-label="create album" />
 
             <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
                 <DialogTitle id="form-dialog-title" >

diff --git a/src/ThemeMenu.tsx b/src/ThemeMenu.tsx
@@ -1,16 +1,15 @@
 import { FC, useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import DarkModeIcon from '@mui/icons-material/DarkMode';
-import IconButton from '@mui/material/IconButton';
 import LightModeIcon from '@mui/icons-material/LightMode';
-import Menu, { MenuProps } from '@mui/material/Menu';
+import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import ListItemText from '@mui/material/ListItemText';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import SettingsBrightnessIcon from '@mui/icons-material/SettingsBrightness';
-import Tooltip from '@mui/material/Tooltip';
 
 import { selectTheme, changeTheme } from './services/app';
+import { ToolbarItem } from './Toolbar';
 
 const options = {
     "light": { label: "Light", icon: <LightModeIcon /> },
@@ -21,13 +20,13 @@ const options = {
 const ThemeMenu: FC = () => {
     const dispatch = useDispatch();
     const themeSelected = useSelector(selectTheme);
-    const [anchorEl, setAnchorEl] = useState<MenuProps["anchorEl"]>(null);
+    const [anchorEl, setAnchorEl] = useState<Element | null>(null);
 
-    const handleClickListItem = (event: React.SyntheticEvent<HTMLButtonElement>) => {
+    const handleClickListItem = (event: React.MouseEvent<Element, MouseEvent>) => {
         setAnchorEl(event.currentTarget);
     };
 
-    const handleMenuItemClick = (_event: React.MouseEvent<HTMLElement>, key: typeof themeSelected) => {
+    const handleMenuItemClick = (_event: React.MouseEvent<Element, MouseEvent>, key: typeof themeSelected) => {
         dispatch(changeTheme(key));
         //setAnchorEl(null);
     };
@@ -37,20 +36,20 @@ const ThemeMenu: FC = () => {
     };
 
     return (
-        <div>
-            <Tooltip title="Change theme" enterDelay={300}>
-                <IconButton
-                    color="inherit"
-                    onClick={handleClickListItem}>
-                        {options[themeSelected].icon}
-                </IconButton>
-            </Tooltip>
+        <>
+            <ToolbarItem
+                subMenu
+                onClick={handleClickListItem}
+                icon={options[themeSelected].icon}
+                title="Theme"
+                tooltip="Change theme"
+                aria-label="change theme" />
 
             <Menu
                 id="lock-menu"
                 anchorEl={anchorEl}
-                anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
-                transformOrigin={{ vertical: 'top', horizontal: 'center' }}
+                anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+                transformOrigin={{ vertical: 'top', horizontal: 'left' }}
                 keepMounted
                 open={Boolean(anchorEl)}
                 onClose={handleCloseMenu}>
@@ -65,7 +64,7 @@ const ThemeMenu: FC = () => {
                         </MenuItem>
                     ))}
             </Menu>
-        </div>
+        </>
     );
 }
 

diff --git a/src/Thumb.tsx b/src/Thumb.tsx
@@ -60,11 +60,11 @@ export default (
     const openLightbox = () => {
         setLightboxIndex(layout.index);
     }
-    const saveFavorite = (event: { stopPropagation: () => void; }) => {
+    const saveFavorite = (event: React.MouseEvent<Element, MouseEvent>) => {
         event.stopPropagation();
         toggleFavorite(layout.index);
     }
-    const showInfo = (event: { stopPropagation: () => void; }) => {
+    const showInfo = (event: React.MouseEvent<Element, MouseEvent>) => {
         event.stopPropagation();
         setInfoPhotoIndex(layout.index);
     }