78 lines
2.5 KiB
TypeScript
78 lines
2.5 KiB
TypeScript
import { AccountCircle, Translate } from '@mui/icons-material';
|
|
import {
|
|
AppBar,
|
|
Avatar,
|
|
Box,
|
|
CircularProgress,
|
|
IconButton,
|
|
Link as MUILink,
|
|
Toolbar,
|
|
useScrollTrigger,
|
|
} from '@mui/material';
|
|
import { Link, useRouterState } from '@tanstack/react-router';
|
|
import { cloneElement, FC, ReactElement, useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import Api from '../../api/Api';
|
|
import LanguageMenu from '../Menus/Language/LanguageMenu';
|
|
import UserMenu from '../Menus/User/UserMenu';
|
|
|
|
const ElevationScroll = ({ children }: { children: ReactElement }) => {
|
|
const trigger = useScrollTrigger({
|
|
disableHysteresis: true,
|
|
threshold: 0,
|
|
});
|
|
|
|
return cloneElement(children, {
|
|
elevation: trigger ? 4 : 0,
|
|
});
|
|
};
|
|
|
|
const Header: FC = () => {
|
|
const [anchorUserMenu, setAnchorUserMenu] = useState<null | HTMLElement>(null);
|
|
const [anchorLanguageMenu, setAnchorLanguageMenu] = useState<null | HTMLElement>(null);
|
|
|
|
const { t } = useTranslation();
|
|
const isLoading = useRouterState({ select: (s) => s.status === 'pending' });
|
|
|
|
const user = Api.getAuthenticatedUser();
|
|
|
|
const handleClose = () => {
|
|
setAnchorLanguageMenu(null);
|
|
setAnchorUserMenu(null);
|
|
};
|
|
|
|
return (
|
|
<ElevationScroll>
|
|
<>
|
|
<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>
|
|
<IconButton size="large" onClick={(event) => setAnchorLanguageMenu(event.currentTarget)}>
|
|
<Translate sx={{ color: 'white' }} />
|
|
</IconButton>
|
|
{user ? (
|
|
<IconButton onClick={(event) => setAnchorUserMenu(event.currentTarget)} sx={{ p: 0 }}>
|
|
<Avatar alt={user.username} src={`storage/${user.image}`} />
|
|
</IconButton>
|
|
) : (
|
|
<IconButton size="large" onClick={(event) => setAnchorUserMenu(event.currentTarget)} color="inherit">
|
|
<AccountCircle />
|
|
</IconButton>
|
|
)}
|
|
<LanguageMenu anchorEl={anchorLanguageMenu} handleClose={handleClose} />
|
|
<UserMenu anchorEl={anchorUserMenu} handleClose={handleClose} />
|
|
</Toolbar>
|
|
</AppBar>
|
|
<Toolbar />
|
|
</>
|
|
</ElevationScroll>
|
|
);
|
|
};
|
|
|
|
export default Header;
|