chatResponsive

markalbrand56 · Nov 5, 2023 · 771af04 · 771af04
1 parent 4298a7f
commit 771af04
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 13 deletions.
diff --git a/uniEmpleos/src/components/Chat/Chat.module.css b/uniEmpleos/src/components/Chat/Chat.module.css
@@ -6,7 +6,7 @@
   width: auto;
   border-radius: 10px;
   /* Sombras más pronunciadas */
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 4px 8px #94bd0f;
   animation: chatAnimation 0.5s ease-in-out;
 }
 
@@ -24,7 +24,7 @@
 }
 
 .button {
-  background-color: #e1dede;
+  background-color: #fff;
   border: none;
   border-radius: 5px;
   padding: 5px;
@@ -39,11 +39,11 @@
 
 .button:focus {
   outline: none;
-  background-color: #d1cece;
+  background-color: #94bd0f75;
 }
 
 .button:hover {
-  background-color: #d1cece;
+  background-color: #94bd0f75;
 }
 
 .pfp {
@@ -83,4 +83,11 @@
   color: #252525;
   font-weight: normal;
   text-align: start;
+}
+
+
+@media (max-width: 768px) {
+  .lastChat {
+    display: none;
+  }
 }
diff --git a/uniEmpleos/src/pages/ChatPage/ChatPage.jsx b/uniEmpleos/src/pages/ChatPage/ChatPage.jsx
@@ -1,6 +1,7 @@
 /* eslint-disable camelcase */
 /* eslint-disable react/prop-types */
 import React, { useEffect, useState, useRef } from "react"
+import { FaUserFriends } from "react-icons/fa"
 import { useStoreon } from "storeon/react"
 import style from "./ChatPage.module.css"
 import { Header } from "../../components/Header/Header"
@@ -79,11 +80,6 @@ const ChatPage = () => {
     scrollDown()
     obtainMessages()
   }
-
-  const handleChat = (receptor, id) => {
-    setCurrentChat(receptor)
-    setIdCurrentChat(id)
-  }
 
   const handleInputChange = (e) => {
     setTextMessage(e.target.value)
@@ -105,6 +101,20 @@ const ChatPage = () => {
     return () => clearInterval(intervalListadeChats)
   }, [])
 
+  // Estado para controlar la visibilidad del contenedor de chats
+  const [showChats, setShowChats] = useState(false)
+
+  // Función para alternar la visibilidad del contenedor de chats
+  const toggleChats = () => {
+    setShowChats(!showChats)
+  }
+
+  const handleChat = (receptor, id) => {
+    setCurrentChat(receptor)
+    setIdCurrentChat(id)
+    setShowChats(false)
+  }
+
   return (
     <div className={style.container}>
       <Header userperson="student" />
@@ -114,8 +124,15 @@ const ChatPage = () => {
         style={typePopUp}
         close={() => setWarning(false)}
       />
+      <button type="button" className={style.menuButton} onClick={toggleChats}>
+        <FaUserFriends size={30} color="#000" />
+      </button>
       <div className={style.generalChatContainer}>
-        <div className={style.chatsContainer}>
+        <div
+          className={`${style.chatsContainer} ${
+            showChats ? style.showChat : style.hideChat
+          }`}
+        >
           {apiLastChats.data && apiLastChats.data.messages.length > 0 ? (
             apiLastChats.data.messages.map((chat) =>
               chat.last_message.length === 0 ? null : (
@@ -139,7 +156,12 @@ const ChatPage = () => {
             <div className={style.noUsersMessage}>No hay chats recientes.</div>
           )}
         </div>
-        <div className={style.currentChatContainer} ref={chatContainerRef}>
+        <div
+          className={`${style.currentChatContainer} ${
+            showChats ? style.hide : style.show
+          }`}
+          ref={chatContainerRef}
+        >
           {apiMessages.data && apiMessages.data.messages.length > 0 ? (
             apiMessages.data.messages.map((message, number) => {
               const side = message.id_emisor === user.id_user ? "right" : "left"

diff --git a/uniEmpleos/src/pages/ChatPage/ChatPage.module.css b/uniEmpleos/src/pages/ChatPage/ChatPage.module.css
@@ -16,9 +16,10 @@
 .chatsContainer {
   display: flex;
   flex-direction: column;
-  background-color: #f5f5f5;
+  background-color: #fff;
   color: #fff;
   width: 30%;
+  padding: 10px;
   overflow: hidden;
   overflow-y: auto;
   scrollbar-width: none;
@@ -140,4 +141,54 @@
   color: #000;
   width: 100%;
   height: 100%;
-}
+}
+
+.show {
+  display: block;
+}
+
+.hide {
+  display: none;
+}
+
+/* Estilos para el botón de menú, solo visible en móviles */
+.menuButton {
+  display: none;
+}
+
+/* Usa media queries para hacer que el botón de menú solo se muestre en dispositivos móviles */
+@media (max-width: 768px) {
+  .menuButton {
+    display: flex;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+  }
+
+  .currentChatContainer {
+    width: calc(100% - 20px);
+    overflow: hidden;
+    padding: 10px;
+    box-shadow: none;
+    background-color: #fff;
+  }
+
+  .showChat {
+    display: flex;
+    gap: 20px;
+  }
+
+  .hideChat {
+    display: none;
+  }
+
+  .chatsContainer {
+    width: 100%;
+    padding: 10px;
+  }
+
+  .inputContainer {
+    width: 90%;
+    padding: 10px;
+  }
+}