Initial Post list

exam/react/src/components/Header/Header.tsx

@@ -1,5 +1,17 @@
 import { AccountCircle } from '@mui/icons-material';
-import { AppBar, Avatar, IconButton, Menu, MenuItem, Toolbar, Typography, useScrollTrigger } from '@mui/material';
+import {
+  AppBar,
+  Avatar,
+  Box,
+  CircularProgress,
+  IconButton,
+  Menu,
+  MenuItem,
+  Link as MUILink,
+  Toolbar,
+  useScrollTrigger,
+} from '@mui/material';
+import { Link, useRouter, useRouterState } from '@tanstack/react-router';
 import { cloneElement, FC, ReactElement, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Api from '../../api/Api';
@@ -24,6 +36,8 @@ const Header: FC = () => {
   const setUser = useGuestBookStore((state) => state.setUser);
 
   const { t } = useTranslation();
+  const router = useRouter();
+  const isLoading = useRouterState({ select: (s) => s.status === 'pending' });
 
   const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
@@ -35,56 +49,68 @@ const Header: FC = () => {
 
   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}
-          >
+      <>
+        <AppBar>
+          <Toolbar>
+            <Box sx={{ flexGrow: 1, alignItems: 'center', display: 'flex', gap: 1 }}>
+              <MUILink component={Link} to="/" color="#FFF" variant="h6" underline="none">
+                {t('GuestBook')}
+              </MUILink>
+              {isLoading && <CircularProgress size={16} thickness={10} sx={{ color: 'white' }} />}
+            </Box>
             {user ? (
-              [
-                <MenuItem key="profile" onClick={handleClose}>
-                  {t('Profile')}
-                </MenuItem>,
-                <MenuItem
-                  key="logout"
-                  onClick={() => {
-                    Api.logOut();
-                    setUser(undefined);
-                  }}
-                >
-                  {t('Log out')}
-                </MenuItem>,
-              ]
+              <IconButton onClick={handleMenu} sx={{ p: 0 }}>
+                <Avatar alt={user.username} src={`storage/${user.image}`} />
+              </IconButton>
             ) : (
-              <Login />
+              <IconButton size="large" onClick={handleMenu} color="inherit">
+                <AccountCircle />
+              </IconButton>
             )}
-          </Menu>
-        </Toolbar>
-      </AppBar>
+            <Menu
+              id="menu-appbar"
+              anchorEl={anchorEl}
+              anchorOrigin={{
+                vertical: 'bottom',
+                horizontal: 'right',
+              }}
+              keepMounted
+              transformOrigin={{
+                vertical: 'top',
+                horizontal: 'right',
+              }}
+              open={Boolean(anchorEl)}
+              onClose={handleClose}
+              sx={{
+                '& .MuiMenu-paper': {
+                  minWidth: '240px',
+                },
+              }}
+            >
+              {user ? (
+                [
+                  <MenuItem key="profile" onClick={handleClose}>
+                    {t('Profile')}
+                  </MenuItem>,
+                  <MenuItem
+                    key="logout"
+                    onClick={() => {
+                      Api.logOut();
+                      setUser();
+                      router.invalidate();
+                    }}
+                  >
+                    {t('Log out')}
+                  </MenuItem>,
+                ]
+              ) : (
+                <Login />
+              )}
+            </Menu>
+          </Toolbar>
+        </AppBar>
+        <Toolbar />
+      </>
     </ElevationScroll>
   );
 };