avatar component

client/src/components/navigation/Sidebar/index.tsx

 import Navigation from 'components/navigation/Navigation';
-import avatar from 'images/daniel-planoetscher.jpg';
+import Avatar from 'components/ui/Avatar';
 import LineGraph from 'components/graphs/LineGraph';
 import { NavLink, useHistory } from 'react-router-dom';
 import { clearToken } from 'adapters/auth';
 import './sidebar.scss';
 import { useEffect, useState } from 'react';
-import { getCurrentUser, getUserImageUri, User } from 'adapters/user';
+import { getCurrentUser, User } from 'adapters/user';
 
 interface Props {
     mobileShown: boolean;
@@ -32,9 +32,7 @@ export default function Sidebar({ mobileShown, setMobileShown }: Props) {
         <aside className={'site-aside' + (mobileShown ? ' shown' : '')}>
             <div className="top">
                 <div className="profile">
-                    <div className="avatar">
-                        <img src={user && getUserImageUri(user.id)} alt="Profile" />
-                    </div>
+                    <Avatar user={user}/>
                     <span className="name">{user?.realname ?? user?.username}</span>
                     {user?.realname && <span className="username">{user?.username}</span>}
                 </div>

client/src/components/navigation/Sidebar/sidebar.scss

@@ -41,14 +41,8 @@
         .avatar {
             width: 130px;
             height: 130px;
-            border-radius: 50%;
-            overflow: hidden;
             margin-bottom: 20px;
-
-            img {
-                width: 100%;
-                height: auto;
-            }
+            font-size: 64px;
         }
 
         .name {

client/src/components/ui/Avatar/avatar.scss

+@use 'styles/settings.scss' as s;
+
+.avatar {
+    border-radius: 50%;
+    overflow: hidden;
+
+    img {
+        width: 100%;
+        height: auto;
+    }
+    .standard-image {
+        width: 100%;
+        height: 100%;
+        background: s.$secondary;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-transform: uppercase;
+        user-select: none;
+        color: s.$black;
+        font-weight: s.$weight-bold;
+    }
+}
\ No newline at end of file

client/src/components/ui/Avatar/index.tsx

+import { getUserImageUri, User } from 'adapters/user';
+import { useCallback, useState } from 'react';
+import './avatar.scss';
+
+interface Props {
+    user?: User;
+}
+
+export default function Avatar({ user }: Props) {
+    const [error, setError] = useState(false);
+    const avatarSrc = user && getUserImageUri(user.id);
+
+    const onError = useCallback(() => {
+        setError(true);
+    }, [setError]);
+    return (
+        <div className="avatar">
+
+            {
+                !error && (
+                    <img src={avatarSrc} alt={user?.username} onError={onError} />
+                )
+            }
+
+            {
+                error && (
+                    <div className="standard-image">
+                        {user?.username.charAt(0)}
+                    </div>
+                )
+            }
+        </div>
+    )
+}
\ No newline at end of file