74 lines
2.1 KiB
JavaScript
74 lines
2.1 KiB
JavaScript
import { useAuth } from '../context/AuthContext';
|
|
import { AppBar, Toolbar, Typography, IconButton, Box, Avatar, useMediaQuery } from '@mui/material';
|
|
import { useTheme } from '@mui/material/styles';
|
|
import { OPEN_WIDTH, MINI_WIDTH } from './MenuDrawerPrivate';
|
|
|
|
|
|
export default function AppHeader({ drawerExpanded = true, currentPage = 'Dashboard' }) {
|
|
const theme = useTheme();
|
|
const isMobile = useMediaQuery('(max-width:900px)');
|
|
const { user } = useAuth();
|
|
|
|
|
|
const leftOffset = isMobile ? 0 : (drawerExpanded ? OPEN_WIDTH : MINI_WIDTH);
|
|
|
|
return (
|
|
<AppBar
|
|
position="fixed"
|
|
sx={{
|
|
background: 'white',
|
|
color: '#40120E',
|
|
boxShadow: '0px 2px 4px rgba(0,0,0,0.1)',
|
|
}}
|
|
>
|
|
<Toolbar sx={{ minHeight: 64 }}>
|
|
<Box
|
|
sx={{
|
|
ml: `${leftOffset}px`,
|
|
transition: theme.transitions.create('margin-left', {
|
|
duration: theme.transitions.duration.standard,
|
|
easing: theme.transitions.easing.sharp,
|
|
}),
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
flexGrow: 1,
|
|
}}
|
|
>
|
|
<Typography variant="h6" sx={{ fontWeight: 600 }}>
|
|
{currentPage}
|
|
</Typography>
|
|
</Box>
|
|
|
|
<Box
|
|
sx={{
|
|
position: 'absolute',
|
|
right: 20,
|
|
top: '50%',
|
|
transform: 'translateY(-50%)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '10px',
|
|
|
|
}}
|
|
>
|
|
<IconButton>
|
|
<img src="/refresh.png" alt="Reload" width={24} height={24} />
|
|
</IconButton>
|
|
<IconButton>
|
|
<img src="/alert.png" alt="Notifications" width={24} height={24} />
|
|
</IconButton>
|
|
|
|
{user && (
|
|
<Box display="flex" alignItems="center" gap={1}>
|
|
<Avatar alt={user.name} src={user.picture} />
|
|
<Typography variant="body1" color="#40120EFF">
|
|
{user.name}
|
|
</Typography>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
|
|
</Toolbar>
|
|
</AppBar>
|
|
);
|
|
} |