Добавил свой дизайн

frontend/index.html

@@ -76,54 +76,59 @@
 
         <!-- Chat Interface -->
         <div id="chat-interface" style="display: none;">
-            <div class="header">
+            <div class="all-conteiner">
-                <div class="header-content">
+                <div class="chat-list" id="chat-list">
-                    <div class="logo">
+                    <header class="chat-sitting">
-                        <span id="productname">Loading...</span>
+                        <div id="productname">Loading...</div> 
-                    </div>
+                        <div class="profile">
-                    <ul class="nav-links">
+                            <a href="#">Профиль</a>
-                        <li>
-                            <a href="#" id="chat-link">
-                                <span class="material-symbols filled">chat_bubble</span> Общий чат
-                            </a>
-                        </li>
-                        <li>
-                            <a href="#" id="logout-link">
-                                <span class="material-symbols filled">logout</span> Выйти
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-
-            <div class="chat-container">
-                <div class="chat-main">
-                    <div class="chat-header">
-                        <img src="src/images/default-avatar.png" alt="Avatar" class="chat-header-avatar">
-                        <div class="chat-header-info">
-                            <h4>Общий чат</h4>
-                            <p><span class="online-status"></span> Онлайн</p>
                         </div>
+                    </header>
+                    <div class="chat-sortirovka"><nav><ul>
+                        <li>чаты</li>
+                        <li>канал</li>
+                        <li>контакты</li>
+                    </ul></nav></div>
+                    <div class="chats-chanel-kontarti">
+                        <a href="#" id="chat1but">Общий чат</a>
+                        <a href="#" id="chat1but2">Общий чат 2</a>
                     </div>
-                    
+                    <div class="ponel"><a href="#">+чат</a> <a href="#">+канал</a> <a href="#">Выйти</a></div>
-                    <div class="chat-messages" id="chat-messages">
+                    <footer></footer>
-                        <!-- Messages will be loaded here dynamically -->
+                </div>
-                    </div>
+                <div class="chat-container">          
-                    
+                    <div class="chat-main" id="conteinerchat">
-                    <div class="chat-input-wrapper">
+                        <div class="chat-header">
-                        <div class="chat-input">
+                            <img src="src/images/default-avatar.png" alt="Avatar" class="chat-header-avatar">
-                            <form class="input-group" id="message-form">
+                            <div class="chat-header-info">
-                                <input type="text" class="message-input" id="message-input" placeholder="Напишите сообщение..." autocomplete="off">
+                                <div class="info-chat">
-                                <button type="submit" class="send-btn">
+                                    <h4 id="namechat">Общий чат</h4>
-                                    <span class="material-symbols filled">send</span>
+                                    <p>
-                                </button>
+                                        <span class="online-status"></span> Онлайн
-                            </form>
+                                    </p>
+                                </div>
+                                <a href="#" id="chat-recrol">Свернуть чат</a>
+                            </div>
+                        </div>
+                        
+                        <div class="chat-messages" id="chat-messages">
+                            <!-- Messages will be loaded here dynamically -->
+                        </div>
+                        
+                        <div class="chat-input-wrapper">
+                            <div class="chat-input">
+                                <form class="input-group" id="message-form">
+                                    <input type="text" class="message-input" id="message-input" placeholder="Напишите сообщение..." autocomplete="off">
+                                    <button type="submit" class="send-btn">
+                                        <span class="material-symbols filled">send</span>
+                                    </button>
+                                </form>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
-
         <script src="src/main.ts" type="module"></script>
     </body>
 </html> 

frontend/src/css/_chat.scss

@@ -4,13 +4,18 @@
 #chat-interface {
     /* Header */
     .header {
+        display: flex;
         background-color: $color-dark-surface-container;
         color: white;
         padding: 16px 16px;
-        position: fixed;
+        position: static;
-        width: 100%;
+        justify-content: end;
-        top: 0;
+        width: fit-content;
         z-index: 1000;
+        position: absolute;
+        top: 0;
+        right: 0;
+
 
         .header-content {
             display: flex;
@@ -24,11 +29,10 @@
                 align-items: center;
             }
 
-            .nav-links {
+            #logouts {
-                display: flex;
+                display: none;
                 list-style: none;
                 gap: 10px;
-
                 li {
                     a {
                         color: white;
@@ -53,13 +57,15 @@
 
     .chat-container {
         display: flex;
-        height: calc(100vh - 70px);
+        width: 100%;
-        margin-top: 70px;
+        flex-direction: column;
+
 
         .chat-main {
-            flex: 1;
+            flex-grow: 1;
             display: flex;
             flex-direction: column;
+            height: 100%;
 
             .chat-header {
                 padding: 16px;
@@ -77,16 +83,20 @@
                 }
 
                 .chat-header-info {
-                    h4 {
+                    display: flex;
-                        font-size: 1.1rem;
+                    .info-chat{
-                        margin-bottom: 0.2rem;
+                        display: flex;
-                    }
+                        flex-direction: column;
+                        h4 {
+                            font-size: 1.1rem;
+                            margin-bottom: 0.2rem;
+                        }
 
-                    p {
+                        p {
-                        font-size: 0.8rem;
+                            font-size: 0.8rem;
-                        color: #718096;
+                            color: #718096;
+                        }
                     }
-
                     .online-status {
                         display: inline-block;
                         width: 10px;
@@ -95,6 +105,21 @@
                         background-color: $success;
                         margin-right: 5px;
                     }
+                    a{
+                        display: flex;
+                        flex-direction: row;
+                        text-decoration: none;
+                        color: white;
+                        justify-content: end;
+                        padding: 0;
+                        margin: 0;
+                        position: absolute;
+                        right: 2%;
+                        top: 2%;
+                        &:hover{
+                            border: none;
+                        }
+                    }
                 }
             }
 
@@ -225,4 +250,5 @@
             }
         }
     }
+    
 }

frontend/src/css/_panelchat.scss

@@ -0,0 +1,85 @@
+@use "common/colors" as *;
+@use "common/material" as *;
+// контейнер чата и панели с чатами
+.all-conteiner{
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    height: 100vh;
+}
+#chat-list{
+    display: flex;
+    flex-direction: column;
+    flex-grow: 0;
+    width: 40%;
+    background-color: $color-light-primary-container;
+    height: 100%;
+    z-index: 1000;
+    .chat-sitting{
+        display: flex;
+        color: $color-dark-on-primary-container;
+        font-size: 42px;
+        font-weight: bolder;
+        background-color: rgb(159, 163, 165);
+        width: 100%;
+        justify-content: center;
+        .profile{
+            font-size: 24px;
+            display: flex;
+            justify-content: end;
+            a{
+                display: flex;
+                color: $color-dark-surface;
+                text-decoration: none;
+                width: 100%;
+                &:hover{
+                    font-size: 26px;
+                }
+            }
+        }
+    }
+    .chats-chanel-kontarti{
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        margin-top: 5px;
+        a{
+            display: flex;
+            text-decoration: none;
+            padding: 10px;
+            border:  solid 2px black;
+            margin-left: 20px;
+            margin-right: 20px;
+            background-color: $gray;
+            color: $color-dark-shadow;
+            font-weight: 20px;
+        }
+    }
+    .chat-sortirovka{
+        display: flex;
+        flex-direction: row;
+        font-size: 24px;
+        justify-content: center;
+            ul{
+                display: flex;
+                flex-direction: row;
+                gap: 5px;
+            }
+            li{
+                display: flex;
+                flex-direction: row;
+            }
+    }
+
+    .ponel{
+        display: flex;
+        position: fixed;
+        top: 95%;
+        left: 2%;
+        gap: 10px;
+        a{
+            text-decoration: none;
+            color: $color-dark-surface;
+        }
+    }
+}

frontend/src/css/style.scss

@@ -1,5 +1,6 @@
 @use "auth";
 @use "chat";
+@use "panelchat";
 @use "common/animations";
 @use "common/components";
 @use "common/colors" as *;
@@ -19,4 +20,6 @@ body {
     background-color: $color-dark-surface;
     color: $color-dark-on-surface;
     line-height: 1.6;
+    height: 100vh;
+    position: relative;
 }

frontend/src/links.ts

@@ -1,11 +1,11 @@
-import { loadChat, logout, showLogin, showRegister } from "./auth";
+import { /* loadChat, */ /* logout, */ showLogin, showRegister } from "./auth";
 
 const login = document.getElementById("login-link")!;
 const register = document.getElementById("register-link")!;
-const chat = document.getElementById("chat-link")!;
+// const chat = document.getElementById("chat-link")!;
-const logoutLink = document.getElementById("logout-link")!;
+// const logoutLink = document.getElementById("logout-link")!;
 
 login.addEventListener("click", showLogin);
 register.addEventListener("click", showRegister);
-chat.addEventListener("click", loadChat);
+// chat.addEventListener("click", loadChat);
-logoutLink.addEventListener("click", logout);
+// logoutLink.addEventListener("click", logout);

frontend/src/main.ts

@@ -143,4 +143,25 @@ document.getElementById('message-form')!.addEventListener('submit', (e) => {
 });
 
 document.getElementById("productname")!.textContent = PRODUCT_NAME;
-document.title = PRODUCT_NAME;
+document.title = PRODUCT_NAME;
+const but = document.getElementById('chat-recrol')!;
+const but_list1 = document.getElementById('chat1but')!;
+const but_list2 = document.getElementById('chat1but2')!;
+const cont1 = document.getElementById('conteinerchat')!;
+const logout = document.getElementById('logouts')!;
+const namechat = document.getElementById('namechat')!;
+but.addEventListener('click',() => {
+    but.style.display = 'none';
+    cont1.style.display = 'none';
+    logout.style.display = 'flex';
+});
+but_list1.addEventListener('click',() => {
+    but.style.display = 'flex';
+    cont1.style.display = 'flex';
+    namechat.textContent = 'общий чат';
+});
+but_list2.addEventListener('click',() => {
+    but.style.display = 'flex';
+    cont1.style.display = 'flex';
+    namechat.textContent = 'общий чат 2';
+});