added avatar blur

PPLBandage · Jan 10, 2025 · 260e66e · 260e66e
1 parent b033cf8
commit 260e66e
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 3 deletions.
diff --git a/src/app/modules/components/MeSidebar.tsx b/src/app/modules/components/MeSidebar.tsx
@@ -18,7 +18,25 @@ const Default = ({ data, islogged, color }: { data: Query, islogged: boolean, co
     return (
         <div className={style_sidebar.card} style={{ backgroundColor: color || "var(--main-card-color)" }}>
             <div className={`${style_sidebar.avatar_container} ${!islogged && style_sidebar.placeholders}`}>
-                {islogged && data?.avatar && <Image src={data?.avatar} alt="" width={150} height={150} priority={true} draggable={false} />}
+                {islogged && data?.avatar && !color &&
+                    <Image
+                        src={data.avatar}
+                        className={style_sidebar.blurred_avatar}
+                        alt=""
+                        width={150}
+                        height={150}
+                        priority={true}
+                        draggable={false}
+                    />}
+                {islogged && data?.avatar &&
+                    <Image
+                        src={data.avatar}
+                        alt=""
+                        width={150}
+                        height={150}
+                        priority={true}
+                        draggable={false}
+                    />}
             </div>
             <h3>{data?.name}</h3>
             <p className={style_sidebar.username}>{data?.username} {!!data.last_accessed &&

diff --git a/src/app/styles/me/sidebar.module.css b/src/app/styles/me/sidebar.module.css
@@ -29,15 +29,26 @@
     width: 300px;
     align-items: flex-start;
     box-sizing: border-box;
+    overflow: hidden;
 }
 
-.card img,
 .avatar_container {
-    border-radius: 50%;
     width: 7rem;
     height: 7rem;
+    position: relative;
 }
 
+.avatar_container img {
+    width: 7rem;
+    height: 7rem;
+    border-radius: 50%;
+
+    position: absolute;
+}
+
+.blurred_avatar {
+    filter: blur(20px);
+}
 
 .card .username {
     margin: 0;