From 260e66ebde46effc754e0d714d78a470b466e23c Mon Sep 17 00:00:00 2001
From: Andcool-Systems <drolll2007@gmail.com>
Date: Fri, 10 Jan 2025 14:22:14 +0300
Subject: [PATCH] added avatar blur

---
 src/app/modules/components/MeSidebar.tsx | 20 +++++++++++++++++++-
 src/app/styles/me/sidebar.module.css     | 15 +++++++++++++--
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/app/modules/components/MeSidebar.tsx b/src/app/modules/components/MeSidebar.tsx
index 90f7f47..bf9fa97 100644
--- 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
index e624a96..3d03f97 100644
--- 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;