68 lines
1.8 KiB
TypeScript
Executable File
68 lines
1.8 KiB
TypeScript
Executable File
// @mui
|
|
import { styled } from '@mui/material/styles';
|
|
import { Box, Link, Typography, Avatar } from '@mui/material';
|
|
import useAuth from '../../../hooks/useAuth';
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
const RootStyle = styled('div')(({ theme }) => ({
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
padding: theme.spacing(2, 2.5),
|
|
borderRadius: Number(theme.shape.borderRadius) * 1.5,
|
|
backgroundColor: theme.palette.grey[500_12],
|
|
transition: theme.transitions.create('opacity', {
|
|
duration: theme.transitions.duration.shorter,
|
|
}),
|
|
}));
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
type Props = {
|
|
isCollapse: boolean | undefined;
|
|
};
|
|
|
|
export default function NavbarAccount({ isCollapse }: Props) {
|
|
|
|
const { user } = useAuth();
|
|
|
|
console.log('current user is ', user)
|
|
return (
|
|
<Link underline="none" color="inherit">
|
|
<RootStyle
|
|
sx={{
|
|
...(isCollapse && {
|
|
bgcolor: 'transparent',
|
|
}),
|
|
}}
|
|
>
|
|
{user && user.user.avatar_url && (<Avatar
|
|
src={user ? user.user.avatar_url : ''}
|
|
alt={user ? user.user.full_name : ''}
|
|
/>)}
|
|
|
|
<Box
|
|
sx={{
|
|
ml: 2,
|
|
transition: (theme) =>
|
|
theme.transitions.create('width', {
|
|
duration: theme.transitions.duration.shorter,
|
|
}),
|
|
...(isCollapse && {
|
|
ml: 0,
|
|
width: 0,
|
|
}),
|
|
}}
|
|
>
|
|
<Typography variant="subtitle2" noWrap>
|
|
{ user ? user.user.full_name ?? 'Hi, ' : 'Hi, '}
|
|
</Typography>
|
|
<Typography variant="body2" noWrap sx={{ color: 'text.secondary', fontSize: '11px' }}>
|
|
{ user ? user.user.email : 'Please Wait'}
|
|
</Typography>
|
|
</Box>
|
|
</RootStyle>
|
|
</Link>
|
|
);
|
|
}
|