"update user popover with dynamic user metadata loading and improved UI consistency,"

This commit is contained in:
louiscklaw
2025-05-11 07:55:16 +08:00
parent 9a8fd1c073
commit b5e9c8ba34
5 changed files with 164 additions and 39 deletions

View File

@@ -71,29 +71,55 @@ export function SideNav(): React.JSX.Element {
width: { xs: '100%', md: '240px' },
}}
>
<Stack component="ul" spacing={3} sx={{ listStyle: 'none', m: 0, p: 0 }}>
<Stack
component="ul"
spacing={3}
sx={{ listStyle: 'none', m: 0, p: 0 }}
>
{navItems.map((group) => (
<Stack component="li" key={group.key} spacing={2}>
<Stack
component="li"
key={group.key}
spacing={2}
>
{group.title ? (
<div>
<Typography color="text.secondary" variant="caption">
<Typography
color="text.secondary"
variant="caption"
>
{group.title}
</Typography>
</div>
) : null}
<Stack component="ul" spacing={1} sx={{ listStyle: 'none', m: 0, p: 0 }}>
<Stack
component="ul"
spacing={1}
sx={{ listStyle: 'none', m: 0, p: 0 }}
>
{group.items.map((item) => (
<NavItem {...item} key={item.key} pathname={pathname} />
<NavItem
{...item}
key={item.key}
pathname={pathname}
/>
))}
</Stack>
</Stack>
))}
</Stack>
<Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
<Stack
direction="row"
spacing={2}
sx={{ alignItems: 'center' }}
>
<Avatar src="/assets/avatar.png">AV</Avatar>
<div>
<Typography variant="subtitle1">Sofia Rivers</Typography>
<Typography color="text.secondary" variant="caption">
<Typography
color="text.secondary"
variant="caption"
>
sofia@devias.io
</Typography>
</div>
@@ -112,7 +138,10 @@ function NavItem({ disabled, external, href, icon, pathname, title }: NavItemPro
const Icon = icon ? icons[icon] : null;
return (
<Box component="li" sx={{ userSelect: 'none' }}>
<Box
component="li"
sx={{ userSelect: 'none' }}
>
<Box
{...(href
? {