Добавление профиля пользователя

frontend/index.html

@@ -77,11 +77,14 @@
         <!-- Chat Interface -->
         <div id="chat-interface" style="display: none;">
             <div class="all-container">
+                <div class="profile" id="profile">
+                    <div class="profileheader"><p>Твой профиль</p><a href="#" id="closeprofile">закрыть</a></div>
+                </div>
                 <div class="chat-list" id="chat-list">
                     <header class="chat-header-left">
                         <div id="productname">Loading...</div> 
                         <div class="profile">
-                            <a href="#"><img src="./src/images/default-avatar.png" alt=""></a>
+                            <a href="#" id="profbut"><img src="./src/images/default-avatar.png" alt=""></a>
                         </div>
                     </header>
                     <div class="chat-tabs">

frontend/src/css/_panelchat.scss

@@ -10,6 +10,35 @@
     height: 100vh;
 }
 
+#profile {
+    display: none;
+    flex-direction: column;
+    z-index: 2000;
+    top: 0;
+    left: 0;
+    position: fixed;
+    height: 100vh;
+    width: 27%;
+    background-color: $color-dark-surface-container;
+    .profileheader{
+        display: flex;
+        gap: 200px;
+        p{
+            color: white;
+        }
+        a{
+            text-decoration: none;
+            color: white;
+            border: solid 2px $color-dark-on-surface-variant;
+            padding: 5px;
+            border-radius: 10px;
+            &:hover{
+                background-color: rgba(255, 255, 255, 0.241);
+            }
+        }
+    }
+}
+
 #chat-list {
     display: flex;
     flex-direction: column;
@@ -35,14 +64,15 @@
             display: flex;
             justify-content: start;
 
-            a {
-                display: flex;
-                color: $color-dark-surface;
+            #closeprofile a {
                 text-decoration: none;
-                width: 100%;
+                color: white;
+                border: solid 2px $color-dark-on-surface-variant;
+                padding: 5px;
+                border-radius: 10px;
                 
                 &:hover {
-                    font-size: 26px;
+                    background-color: rgba(255, 255, 255, 0.241);
                 }
             }
 
@@ -104,18 +134,23 @@
             display: flex;
             flex-direction: row;
         }
-    }
-}
-
-.ponel {
-    display: flex;
-    position: fixed;
-    top: 95%;
-    left: 2%;
-    gap: 10px;
-
-    a {
-        text-decoration: none;
-        color: $color-dark-surface;
+
+        .ponel {
+            display: flex;
+            position: fixed;
+            top: 95%;
+            left: 0.5%;
+            gap: 10px;
+            a {
+                text-decoration: none;
+                color: $color-dark-on-surface-variant;
+                border: solid 2px $color-dark-on-surface-variant;
+                padding: 5px;
+                border-radius: 10px;
+                &:hover {
+                    background-color: rgba(255, 255, 255, 0.241);
+                }
+            }
+        }
     }
 }

frontend/src/main.ts

@@ -144,6 +144,7 @@ document.getElementById('message-form')!.addEventListener('submit', (e) => {
 
 document.getElementById("productname")!.textContent = PRODUCT_NAME;
 document.title = PRODUCT_NAME;
+// сварачивание и разворачивание чата
 const but = document.getElementById('chat-recrol')!;
 const but_list1 = document.getElementById('chat1but')!;
 const but_list2 = document.getElementById('chat1but2')!;
@@ -165,3 +166,18 @@ but_list2.addEventListener('click',() => {
     cont1.style.display = 'flex';
     namechat.textContent = 'общий чат 2';
 });
+// открытие профиля
+const butprofile = document.getElementById('profbut')!
+const chatlist = document.getElementById('chat-list')!
+const profile = document.getElementById('profile')!
+const closeprofile = document.getElementById('closeprofile')!
+butprofile.addEventListener('click',()=>{
+    chatlist.style.display = 'none'
+    cont1.style.display = 'none'
+    profile.style.display = 'flex'
+
+})
+closeprofile.addEventListener('click',()=>{
+    chatlist.style.display = 'flex'
+    profile.style.display = 'none'
+})