Merge pull request #32 from GoryaOSS/update-ui

Add drawer toggle for app bar
jacobnguyenn · Sep 6, 2023 · f7841b9 · f7841b9
2 parents 5356d1e + 22d0c89
commit f7841b9
Show file tree

Hide file tree

Showing 3 changed files with 193 additions and 156 deletions.
diff --git a/client/src/modules/components/AppBar.js b/client/src/modules/components/AppBar.js
@@ -1,4 +1,6 @@
 import * as React from 'react';
+import classNames from 'classnames';
+
 import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
 import Toolbar from '@mui/material/Toolbar';
@@ -13,10 +15,25 @@ import Tooltip from '@mui/material/Tooltip';
 import MenuItem from '@mui/material/MenuItem';
 import FilterDrama from '@mui/icons-material/FilterDrama';
 import { useKeycloak } from '@react-keycloak/web';
+import Divider from '@material-ui/core/Divider';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import Hidden from '@material-ui/core/Hidden';
+import List from '@material-ui/core/List';
+import map from 'lodash/map';
+import startsWith from 'lodash/startsWith';
+import Drawer from '@material-ui/core/Drawer';
+import { ListItemButton } from '@mui/material';
+import Brightness4Icon from '@mui/icons-material/Brightness4';
+import Brightness7Icon from '@mui/icons-material/Brightness7';
+const ColorModeContext = React.createContext({ toggleColorMode: () => {} });
 
 function ResponsiveAppBar(props) {
   const [anchorElNav, setAnchorElNav] = React.useState(null);
   const [anchorElUser, setAnchorElUser] = React.useState(null);
+  const [drawerOpen, setDrawerOpen] = React.useState(false);
+  const colorMode = React.useContext(ColorModeContext);
   const { keycloak } = useKeycloak();
   const links = props.links;
   const handleOpenNavMenu = (event) => {
@@ -33,159 +50,188 @@ function ResponsiveAppBar(props) {
   const handleCloseUserMenu = () => {
     setAnchorElUser(null);
   };
+  const drawer = (
+    <div>
+      <List dense disablePadding>
+        {map(links, (page, _) => (
+          <ListItem key={page.primary} button onClick={props.onClickLink(page)}>
+            <ListItemButton>
+              <ListItemIcon>{page.icon}</ListItemIcon>
+              <ListItemText primary={page.primary} />
+            </ListItemButton>
+          </ListItem>
+        ))}
+      </List>
+      <Divider />
+    </div>
+  );
+  const toggleDrawer = (open) => (event) => {
+    if (
+      event.type === 'keydown' &&
+      (event.key === 'Tab' || event.key === 'Shift')
+    ) {
+      return;
+    }
+    setDrawerOpen(open);
+  };
   return (
-    <AppBar position="absolute" color="primary" elevation={2} square>
-      <Container maxWidth="xl">
-        <Toolbar disableGutters>
-          <IconButton
-            color="inherit"
-            aria-label="open drawer"
-            onClick={props.handleDrawerToggle}
-          >
-            <MenuIcon />
-          </IconButton>
-          <FilterDrama sx={{ display: { xs: 'none', md: 'flex' }, mr: 1 }} />
-          <Typography
-            variant="h6"
-            noWrap
-            component="a"
-            href="/"
-            sx={{
-              mr: 2,
-              display: { xs: 'none', md: 'flex' },
-              fontFamily: 'monospace',
-              fontWeight: 700,
-              letterSpacing: '.3rem',
-              color: 'inherit',
-              textDecoration: 'none',
-            }}
-          >
-            Gorya
-          </Typography>
-
-          <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
-            <IconButton
-              size="large"
-              aria-label="account of current user"
-              aria-controls="menu-appbar"
-              aria-haspopup="true"
-              onClick={handleOpenNavMenu}
-              color="inherit"
-            >
-              {/* <MenuIcon /> */}
+    <div>
+      <AppBar position="absolute" color="primary" elevation={2} square>
+        <Container maxWidth="false">
+          <Toolbar disableGutters>
+            <IconButton color="inherit" aria-label="open drawer">
+              <MenuIcon onClick={toggleDrawer(true)} />
+              <Drawer
+                anchor="left"
+                open={drawerOpen}
+                onClose={toggleDrawer(false)}
+              >
+                {drawer}
+              </Drawer>
             </IconButton>
-            <Menu
-              id="menu-appbar"
-              anchorEl={anchorElNav}
-              anchorOrigin={{
-                vertical: 'bottom',
-                horizontal: 'left',
-              }}
-              keepMounted
-              transformOrigin={{
-                vertical: 'top',
-                horizontal: 'left',
+            <FilterDrama sx={{ display: { xs: 'none', md: 'flex' }, mr: 1 }} />
+            <Typography
+              variant="h6"
+              noWrap
+              component="a"
+              href="/"
+              sx={{
+                mr: 2,
+                display: { xs: 'none', md: 'flex' },
+                fontFamily: 'monospace',
+                fontWeight: 700,
+                letterSpacing: '.3rem',
+                color: 'inherit',
+                textDecoration: 'none',
               }}
-              open={Boolean(anchorElNav)}
-              onClose={handleCloseNavMenu}
+            >
+              Gorya
+            </Typography>
+
+            <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
+              <IconButton
+                size="large"
+                aria-label="account of current user"
+                aria-controls="menu-appbar"
+                aria-haspopup="true"
+                onClick={handleOpenNavMenu}
+                color="inherit"
+              ></IconButton>
+              <Menu
+                id="menu-appbar"
+                anchorEl={anchorElNav}
+                anchorOrigin={{
+                  vertical: 'bottom',
+                  horizontal: 'left',
+                }}
+                keepMounted
+                transformOrigin={{
+                  vertical: 'top',
+                  horizontal: 'left',
+                }}
+                open={Boolean(anchorElNav)}
+                onClose={handleCloseNavMenu}
+                sx={{
+                  display: { xs: 'block', md: 'none' },
+                }}
+              >
+                {links.map((page) => (
+                  <MenuItem
+                    key={page.primary}
+                    onClick={props.onClickLink(page)}
+                  >
+                    <Typography textAlign="center">{page.primary}</Typography>
+                  </MenuItem>
+                ))}
+              </Menu>
+            </Box>
+            <FilterDrama sx={{ display: { xs: 'flex', md: 'none' }, mr: 1 }} />
+            <Typography
+              variant="h5"
+              noWrap
+              component="a"
+              href="/"
               sx={{
-                display: { xs: 'block', md: 'none' },
+                mr: 2,
+                display: { xs: 'flex', md: 'none' },
+                flexGrow: 1,
+                fontFamily: 'monospace',
+                fontWeight: 700,
+                letterSpacing: '.3rem',
+                color: 'inherit',
+                textDecoration: 'none',
               }}
             >
+              LOGO
+            </Typography>
+            <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
               {links.map((page) => (
-                <MenuItem key={page.primary} onClick={props.onClickLink(page)}>
-                  <Typography textAlign="center">{page.primary}</Typography>
-                </MenuItem>
+                <Button
+                  key={page.primary}
+                  onClick={props.onClickLink(page)}
+                  sx={{ my: 2, color: 'white', display: 'block' }}
+                >
+                  {page.primary}
+                </Button>
               ))}
-            </Menu>
-          </Box>
-          <FilterDrama sx={{ display: { xs: 'flex', md: 'none' }, mr: 1 }} />
-          <Typography
-            variant="h5"
-            noWrap
-            component="a"
-            href="/"
-            sx={{
-              mr: 2,
-              display: { xs: 'flex', md: 'none' },
-              flexGrow: 1,
-              fontFamily: 'monospace',
-              fontWeight: 700,
-              letterSpacing: '.3rem',
-              color: 'inherit',
-              textDecoration: 'none',
-            }}
-          >
-            LOGO
-          </Typography>
-          <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
-            {links.map((page) => (
-              <Button
-                key={page.primary}
-                onClick={props.onClickLink(page)}
-                sx={{ my: 2, color: 'white', display: 'block' }}
+            </Box>
+            <Box sx={{ flexGrow: 0 }}>
+              <Tooltip title="Open settings">
+                <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
+                  {/* only when authenticated we have the keycloak.tokenParsed object */}
+                  {keycloak.authenticated ? (
+                    <Avatar
+                      alt="user-avatar"
+                      src={`https://avatars.githubusercontent.com/${keycloak.tokenParsed.preferred_username}`}
+                    />
+                  ) : null}
+                </IconButton>
+              </Tooltip>
+              <Menu
+                sx={{ mt: '45px' }}
+                id="menu-appbar"
+                anchorEl={anchorElUser}
+                anchorOrigin={{
+                  vertical: 'top',
+                  horizontal: 'right',
+                }}
+                keepMounted
+                transformOrigin={{
+                  vertical: 'top',
+                  horizontal: 'right',
+                }}
+                open={Boolean(anchorElUser)}
+                onClose={handleCloseUserMenu}
               >
-                {page.primary}
-              </Button>
-            ))}
-          </Box>
-
-          <Box sx={{ flexGrow: 0 }}>
-            <Tooltip title="Open settings">
-              <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
-                {/* only when authenticated we have the keycloak.tokenParsed object */}
-                {keycloak.authenticated ? (
-                  <Avatar
-                    alt="user-avatar"
-                    src={`https://avatars.githubusercontent.com/${keycloak.tokenParsed.preferred_username}`}
-                  />
-                ) : null}
-              </IconButton>
-            </Tooltip>
-            <Menu
-              sx={{ mt: '45px' }}
-              id="menu-appbar"
-              anchorEl={anchorElUser}
-              anchorOrigin={{
-                vertical: 'top',
-                horizontal: 'right',
-              }}
-              keepMounted
-              transformOrigin={{
-                vertical: 'top',
-                horizontal: 'right',
-              }}
-              open={Boolean(anchorElUser)}
-              onClose={handleCloseUserMenu}
-            >
-              <MenuItem key="Logout" onClick={handleCloseUserMenu}>
-                <Typography textAlign="center">
-                  {!keycloak.authenticated && (
-                    <div
-                      type="button"
-                      className="text-blue-800"
-                      onClick={() => keycloak.login()}
-                    >
-                      Login
-                    </div>
-                  )}
+                <MenuItem key="Logout" onClick={handleCloseUserMenu}>
+                  <Typography textAlign="center">
+                    {!keycloak.authenticated && (
+                      <div
+                        type="button"
+                        className="text-blue-800"
+                        onClick={() => keycloak.login()}
+                      >
+                        Login
+                      </div>
+                    )}
 
-                  {!!keycloak.authenticated && (
-                    <div
-                      type="button"
-                      className="text-blue-800"
-                      onClick={() => keycloak.logout()}
-                    >
-                      Logout
-                    </div>
-                  )}
-                </Typography>
-              </MenuItem>
-            </Menu>
-          </Box>
-        </Toolbar>
-      </Container>
-    </AppBar>
+                    {!!keycloak.authenticated && (
+                      <div
+                        type="button"
+                        className="text-blue-800"
+                        onClick={() => keycloak.logout()}
+                      >
+                        Logout
+                      </div>
+                    )}
+                  </Typography>
+                </MenuItem>
+              </Menu>
+            </Box>
+          </Toolbar>
+        </Container>
+      </AppBar>
+    </div>
   );
 }
 export default ResponsiveAppBar;
diff --git a/client/src/modules/components/AppFrameFunction.js b/client/src/modules/components/AppFrameFunction.js
@@ -83,12 +83,10 @@ const styles = (theme) => ({
 
 function AppFrame(props) {
   const [title, setTitle] = useState('');
-  const [mobileOpen, setMobileOpen] = useState(false);
   const keycloakInitialized = props.keycloakInitialized;
   useEffect(() => {
-    const history = props.history;
     const currentLink = find(links, (link) =>
-      startsWith(history.location.pathname, link.path)
+      startsWith(props.history.location.pathname, link.path)
     );
     if (currentLink) {
       setTitle(currentLink.primary);
@@ -100,18 +98,12 @@ function AppFrame(props) {
     setTitle(link.primary);
   };
 
-  const handleDrawerToggle = () => {
-    setMobileOpen(!mobileOpen);
-  };
-
   const classes = props.classes;
   const children = props.children;
   if (keycloakInitialized) {
     return (
       <div className={classes.root}>
         <ResponsiveAppBar
-          value={mobileOpen}
-          handleDrawerToggle={handleDrawerToggle}
           title={title}
           onClickLink={handleClickLink}
           links={links}