diff --git a/picture-gallery-client/src/ImageGallery/ImageGalleryAppBar.tsx b/picture-gallery-client/src/ImageGallery/ImageGalleryAppBar.tsx index c582e71..52dca24 100644 --- a/picture-gallery-client/src/ImageGallery/ImageGalleryAppBar.tsx +++ b/picture-gallery-client/src/ImageGallery/ImageGalleryAppBar.tsx @@ -1,38 +1,21 @@ import Toolbar from "@mui/material/Toolbar"; -import IconButton from "@mui/material/IconButton"; -import MenuIcon from "@mui/icons-material/Menu"; import Typography from "@mui/material/Typography"; import React from "react"; -import AppBar from "../MuiLayout/AppBar"; import env from "../env"; +import AppBar from "@mui/material/AppBar"; -function ImageGalleryAppBar({ - open, - drawerWidth, - onDrawerOpenClick, -}: { - open: boolean; - drawerWidth: number; - onDrawerOpenClick: () => void; -}) { +export const ImageGalleryAppBar = () => { return ( - + theme.zIndex.drawer + 1 }} + style={{ backgroundColor: env.REACT_APP_APPBAR_COLOR ?? "#1976D2" }} + > - - - {env.REACT_APP_TITLE ?? "Simple Picture Gallery"} ); -} - -export default ImageGalleryAppBar; +}; diff --git a/picture-gallery-client/src/ImageGallery/ImageGalleryDrawer.tsx b/picture-gallery-client/src/ImageGallery/ImageGalleryDrawer.tsx index 942b7a7..ebf37f4 100644 --- a/picture-gallery-client/src/ImageGallery/ImageGalleryDrawer.tsx +++ b/picture-gallery-client/src/ImageGallery/ImageGalleryDrawer.tsx @@ -1,16 +1,11 @@ import Drawer from "@mui/material/Drawer"; -import IconButton from "@mui/material/IconButton"; -import ChevronLeftIcon from "@mui/icons-material/ChevronLeft"; -import ChevronRightIcon from "@mui/icons-material/ChevronRight"; import FolderIcon from "@mui/icons-material/Folder"; import FolderOpenIcon from "@mui/icons-material/FolderOpen"; -import Divider from "@mui/material/Divider"; -import { useTheme } from "@mui/material/styles"; import { TreeItem, TreeView } from "@mui/lab"; import { useLocation, useNavigate } from "react-router-dom"; import React, { useState } from "react"; import { Folders } from "./models"; -import DrawerHeader from "../MuiLayout/DrawerHeader"; +import Toolbar from "@mui/material/Toolbar"; function getDefaultExpanded(pathname: string): string[] { const pathParts = []; @@ -109,45 +104,24 @@ function GenerateTreeView({ root }: { root: Folders }) { ); } -function ImageGalleryDrawer({ - open, +export const ImageGalleryDrawer = ({ drawerWidth, folder, - onDrawerCloseClick, }: { - open: boolean; drawerWidth: number; folder: Folders; - onDrawerCloseClick: () => void; -}) { - const theme = useTheme(); +}) => { return ( - - - {theme.direction === "ltr" ? ( - - ) : ( - - )} - - - + ); -} - -export default ImageGalleryDrawer; +}; diff --git a/picture-gallery-client/src/ImageGalleryLayout.tsx b/picture-gallery-client/src/ImageGalleryLayout.tsx index ac96d09..8143674 100644 --- a/picture-gallery-client/src/ImageGalleryLayout.tsx +++ b/picture-gallery-client/src/ImageGalleryLayout.tsx @@ -3,17 +3,15 @@ import Box from "@mui/material/Box"; import CssBaseline from "@mui/material/CssBaseline"; import { useLocation, useNavigate } from "react-router-dom"; import { Folders, ImageWithThumbnail } from "./ImageGallery/models"; -import ImageGalleryAppBar from "./ImageGallery/ImageGalleryAppBar"; -import DrawerHeader from "./MuiLayout/DrawerHeader"; -import ImageGalleryDrawer from "./ImageGallery/ImageGalleryDrawer"; +import { ImageGalleryAppBar } from "./ImageGallery/ImageGalleryAppBar"; +import { ImageGalleryDrawer } from "./ImageGallery/ImageGalleryDrawer"; import ImageGallery from "./ImageGallery/ImageGallery"; -import Main from "./MuiLayout/Main"; import { Spinner } from "./ImageGallery/Spinner"; +import Toolbar from "@mui/material/Toolbar"; const drawerWidth = 240; function ImageGalleryLayout() { - const [open, setOpen] = useState(true); const [error, setError] = useState(false); const [imagesLoaded, setImagesLoaded] = useState(false); const [images, setImages] = useState([]); @@ -27,14 +25,6 @@ function ImageGalleryLayout() { const location = useLocation(); const navigate = useNavigate(); - const handleDrawerOpen = () => { - setOpen(true); - }; - - const handleDrawerClose = () => { - setOpen(false); - }; - useEffect(() => { setImages([]); setError(false); @@ -73,21 +63,12 @@ function ImageGalleryLayout() { return ( - - -
- + + + + {imagesLoaded ? : } -
+ ); } diff --git a/picture-gallery-client/src/MuiLayout/AppBar.tsx b/picture-gallery-client/src/MuiLayout/AppBar.tsx deleted file mode 100644 index 534d75f..0000000 --- a/picture-gallery-client/src/MuiLayout/AppBar.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { styled } from "@mui/material/styles"; -import MuiAppBar from "@mui/material/AppBar"; -import env from "../env"; - -const AppBar = styled(MuiAppBar, { - shouldForwardProp: (prop) => prop !== "open", -})<{ - open?: boolean; - drawerwidth: number; -}>(({ theme, open, drawerwidth }) => ({ - backgroundColor: env.REACT_APP_APPBAR_COLOR ?? "#1976D2", - transition: theme.transitions.create(["margin", "width"], { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.leavingScreen, - }), - ...(open && { - width: `calc(100% - ${drawerwidth}px)`, - marginLeft: `${drawerwidth}px`, - transition: theme.transitions.create(["margin", "width"], { - easing: theme.transitions.easing.easeOut, - duration: theme.transitions.duration.enteringScreen, - }), - }), -})); - -export default AppBar; diff --git a/picture-gallery-client/src/MuiLayout/DrawerHeader.tsx b/picture-gallery-client/src/MuiLayout/DrawerHeader.tsx deleted file mode 100644 index 12b437b..0000000 --- a/picture-gallery-client/src/MuiLayout/DrawerHeader.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { styled } from "@mui/material/styles"; - -const DrawerHeader = styled("div")(({ theme }) => ({ - display: "flex", - alignItems: "center", - padding: theme.spacing(0, 1), - // necessary for content to be below app bar - ...theme.mixins.toolbar, - justifyContent: "flex-end", -})); - -export default DrawerHeader; diff --git a/picture-gallery-client/src/MuiLayout/Main.tsx b/picture-gallery-client/src/MuiLayout/Main.tsx deleted file mode 100644 index 4a627cb..0000000 --- a/picture-gallery-client/src/MuiLayout/Main.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { styled } from "@mui/material/styles"; - -const Main = styled("main", { shouldForwardProp: (prop) => prop !== "open" })<{ - open?: boolean; - drawerwidth: number; -}>(({ theme, open, drawerwidth }) => ({ - flexGrow: 1, - padding: theme.spacing(3), - transition: theme.transitions.create("margin", { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.leavingScreen, - }), - marginLeft: `-${drawerwidth}px`, - ...(open && { - transition: theme.transitions.create("margin", { - easing: theme.transitions.easing.easeOut, - duration: theme.transitions.duration.enteringScreen, - }), - marginLeft: 0, - }), -})); - -export default Main;