AgileWebs/fendi-react-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: align the user name and icons to the right

Browse Source
This commit is contained in:
Rodolfo Ruiz 2025-08-21 20:14:19 -06:00
parent cfdad88682
commit 6b493265b2
1 changed files with 15 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/AppHeader.jsx
View File

@ -14,7 +14,7 @@ export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
};
const [drawerExpanded, setDrawerExpanded] = useState(true);
const [currentPage, setCurrentPage] = useState('Dashboard');
const [currentPage, setCurrentPage] = useState('Dashboard');
const { user } = useAuth();
const isPrivate = zone === 'private';
@ -25,7 +25,7 @@ export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
const handleMenuSelect = (page) => {
setCurrentPage(page);
onSelectMenuItem?.(page);
onSelectMenuItem?.(page);
};
return (
@ -51,31 +51,30 @@ export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
<Typography
variant="h6"
noWrap
sx={{ color: '#40120EFF', fontWeight:'light', fontSize: '30px'}}
sx={{ color: '#40120EFF', fontWeight: 'light', fontSize: '30px' }}
>
{currentPage}
</Typography>
</Box>
{/* MIDDLE: Icon Buttons */}
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<IconButton sx={{ mx: 1 }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: '10px', ml: 'auto' }}>
<IconButton>
<img src="/refresh.png" alt="Reload" width={24} height={24} />
</IconButton>
<IconButton sx={{ mx: 1 }}>
<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>
{/* RIGHT SIDE: User Info */}
{user && (
<Box display="flex" alignItems="center" gap={1}>
<Avatar alt={user.name} src={user.picture} />
<Typography variant="body1" color='#40120EFF'>{user.name}</Typography>
</Box>
)}
{/* Drawer (kept here for logic; reports expanded/collapsed to header) */}
<MenuDrawer
zone="private"
onSelect={handleMenuSelect}