chat overview Made Mobile

src/components/nav/Nav.js

@@ -105,7 +105,7 @@ useEffect(() => {
   if (isMobile) {
 
     return (
-      location2.pathname.includes('azmoon_list') ? null :
+      location2.pathname.includes('azmoon_list') || location2.pathname.includes('messages') ? null :
       <div className="w-full flex fixed  bg-white justify-center z-20 py-4 bottom-0">
         <div className="flex w-11/12 bg-white justify-between rtl border border-red82OP rounded-xl">
           {

src/view/messages/Messages.js

@@ -6,11 +6,12 @@ import avatar4 from "../../assets/img/avatar/alex-suprun-ZHvM3XIOHoE-unsplash.jp
 import avatar5 from "../../assets/img/avatar/nicolas-horn-MTZTGvDsHFY-unsplash.jpg";
 import avatar6 from "../../assets/img/avatar/sarah-brown-tTdC88_6a_I-unsplash.jpg";
 import sendIcon from "../../assets/img/vuesax-linear-direct-left.svg";
+import { connect } from "react-redux";
+import { BsCheck2All, BsTelephone,  } from "react-icons/bs";
+import { Link } from "react-router-dom";
 
-import { BsCheck2All, BsTelephone } from "react-icons/bs";
 
-
-const Messages=()=>{
+const Messages=({isMobile})=>{
   const [contacts] = useState([
     {
       id: 1,
@@ -91,6 +92,62 @@ const Messages=()=>{
     e.target.style.height = `${scHeight}px`;
   }
   return (
+    isMobile ? 
+    
+    
+        <div className="Messages-contacts w-full bg-white px-2 mt-16 pb-10 overflow-y-auto">
+        {contacts.map((item, index) => (
+          <Link to={`${item.id}`}
+            key={index}
+            className="Messages-contacts-item w-full py-4 border-b border-color7 flex items-center justify-between flex-row-reverse"
+          >
+            <div className="Messages-contacts-item-img-container  w-14 h-14 rounded-full overflow-hidden flex items-ceter justify-center">
+              <img src={item.img} alt="avatar" className="w-full" />
+            </div>
+            <div className="Messages-contacts-item-info w-[68%]">
+              <div className="Messages-contacts-item-info-name w-full text-right">
+                {item.firstName} {item.lastName}
+              </div>
+              <div
+                className="Messages-contacts-item-info-last-message w-full text-right text-xs overflow-hidden text-ellipsis whitespace-nowrap mt-2"
+                style={{ color: "#8D8D8D", direction: "rtl" }}
+              >
+                {item.lastMessage}
+              </div>
+            </div>
+            <div className="Messages-contacts-item-details w-[9%] min-h-[57px] ">
+              <div
+                className="Messages-contacts-item-details-time w-full text-sm text-left mb-4"
+                style={{ color: "#A5A5A5" }}
+              >
+                {item.time}
+              </div>
+              {item.newMessages !== 0 && (
+                <div className="Messages-contacts-item-details-newMessages text-sm w-[70%] aspect-square flex items-center justify-center rounded-full bg-color2 text-white ">
+                  {item.newMessages}
+                </div>
+              )}
+              {item.messageSituation !== 0 && (
+                <div className="Messages-contacts-item-details-messageSituation">
+                  <BsCheck2All
+                    className="text-lg "
+                    style={
+                      item.messageSituation === 1
+                        ? { color: "#979797" }
+                        : item.messageSituation === 2
+                        ? { color: "#267DE9" }
+                        : null
+                    }
+                  />
+                </div>
+              )}
+            </div>
+          </Link>
+        ))}
+      </div>
+    
+    
+    :
     <div className="Messages w-[93.5%] h-[91.5%]  absolute top-[8.5%] z-0 left-0 bg-color5 flex border-t border-color7">
       <div className="Messages-main-box w-3/4 h-full relative">
         <div className="Messages-main-box-header w-full h-[8%] bg-white flex items-center justify-between px-6 flex-row-reverse">
@@ -168,5 +225,10 @@ const Messages=()=>{
     </div>
   );
 }
+const mapStateToProps = (state) => ({
+  isMobile: state.publicApi.isMobile,
+});
+const mapDispatchToProps = {
+};
 
-export default Messages;
+export default connect(mapStateToProps, mapDispatchToProps)(Messages);