Login/Logout + Menu + i18next

2024-07-25 01:09:20 +02:00
parent dd48f72c42
commit 65848f094b
17 changed files with 1042 additions and 211 deletions
@@ -0,0 +1,92 @@
+import { AccountCircle } from '@mui/icons-material';
+import { AppBar, Avatar, IconButton, Menu, MenuItem, Toolbar, Typography, useScrollTrigger } from '@mui/material';
+import { cloneElement, FC, ReactElement, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import Api from '../../api/Api';
+import useGuestBookStore from '../../store/store';
+import Login from '../Forms/Login/Login';
+
+const ElevationScroll = ({ children }: { children: ReactElement }) => {
+  const trigger = useScrollTrigger({
+    disableHysteresis: true,
+    threshold: 0,
+  });
+
+  return cloneElement(children, {
+    elevation: trigger ? 4 : 0,
+  });
+};
+
+const Header: FC = () => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+
+  const user = useGuestBookStore((state) => state.user);
+  const setUser = useGuestBookStore((state) => state.setUser);
+
+  const { t } = useTranslation();
+
+  const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <ElevationScroll>
+      <AppBar>
+        <Toolbar>
+          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+            {t('GuestBook')}
+          </Typography>
+          {user ? (
+            <IconButton onClick={handleMenu} sx={{ p: 0 }}>
+              <Avatar alt={user.username} src={`storage/${user.image}`} />
+            </IconButton>
+          ) : (
+            <IconButton size="large" onClick={handleMenu} color="inherit">
+              <AccountCircle />
+            </IconButton>
+          )}
+          <Menu
+            id="menu-appbar"
+            anchorEl={anchorEl}
+            anchorOrigin={{
+              vertical: 'bottom',
+              horizontal: 'right',
+            }}
+            keepMounted
+            transformOrigin={{
+              vertical: 'top',
+              horizontal: 'right',
+            }}
+            open={Boolean(anchorEl)}
+            onClose={handleClose}
+          >
+            {user ? (
+              [
+                <MenuItem key="profile" onClick={handleClose}>
+                  {t('Profile')}
+                </MenuItem>,
+                <MenuItem
+                  key="logout"
+                  onClick={() => {
+                    Api.logOut();
+                    setUser(undefined);
+                  }}
+                >
+                  {t('Log out')}
+                </MenuItem>,
+              ]
+            ) : (
+              <Login />
+            )}
+          </Menu>
+        </Toolbar>
+      </AppBar>
+    </ElevationScroll>
+  );
+};
+
+export default Header;