Added dynmic avatar name loading

01-frontend/src/helper/navbar/NavBar.tsx

@@ -28,6 +28,7 @@ export default function NavBar() {
     const navigate = useNavigate();
     const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(null);
     const [anchorElUser, setAnchorElUser] = React.useState<null | HTMLElement>(null);
+    const [avatarName, setAvatarName] = React.useState<string>(''); // Für Avatar-Tooltip
 
     const { user, logout } = useAccount();
 
@@ -96,6 +97,13 @@ export default function NavBar() {
         setItemNames(items.map((item) => item.name));
     }, [items]);
 
+    React.useEffect(() => {
+        // Setze den Avatar-Namen, wenn der Benutzer angemeldet ist
+        if (user) {
+            setAvatarName(user.email.toUpperCase());
+        }
+    }, [user]);
+
     const handleSearch = (_: React.SyntheticEvent, value: string | null) => {
 
         if (!value) {
@@ -216,7 +224,7 @@ export default function NavBar() {
                         <ThemeToggle />
                         <Tooltip title={t('openSettings')} placement='bottom-end'>
                             <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
-                                <Avatar alt="Florian Speicher" src="/static/images/avatar/2.jpg" />
+                                <Avatar alt={avatarName} src="/static/images/avatar/2.jpg" />
                             </IconButton>
                         </Tooltip>
                         <Menu