done visual part of chat

src/App.module.css

@@ -5,4 +5,5 @@
   overflow: hidden;
   overflow-y: hidden;
   overflow-x: hidden;
+  -ms-overflow-style: none;
 }

src/components/HomePage/LeftBar/ContactsList/index.tsx

@@ -74,7 +74,7 @@ const  ChatsList = () => {
               </Avatar>
           </ListItemIcon> 
           <ListItemText primary={`${firstLetter(name)}${slicedWord(name, 15, 1)}
-                ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`} secondary={data} />        
+                ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`} secondary={`last seen ${data}`} />        
         </ListItemButton>)}
       </List>
   );

src/components/HomePage/LeftBar/index.tsx

@@ -83,6 +83,7 @@ const LeftBar = () => {
         {iMenu === 11 && <NotDone name='New Channel' />}
         {iMenu === 12 && <NotDone name='New Group' />}
         {iMenu === 13 && <ContactsList />}
+        {iMenu === 14 && <NotDone name='Add new contact' />}
     </Grid>
     )
 }

src/components/HomePage/RightBar/ChatBar/Messages/MessageLeft/index.tsx

@@ -0,0 +1,98 @@
+import { makeStyles } from "@material-ui/core/styles";
+import Avatar from "@material-ui/core/Avatar";
+import ListItemText from '@mui/material/ListItemText';
+
+const useStyles = makeStyles({
+    container: {
+      display: "flex",
+      width:'auto',
+      maxWidth: '80%',
+    '&:last-child': {
+      paddingBottom:0,
+      }      
+    },
+    messageVertical: {
+      position:'relative',
+      display: 'flex',
+      alignContent: 'center',
+      alignItems: 'flex-end',
+      marginBottom: "10px",
+    },
+    avatar: {
+      width: 34,
+      height: 34,
+      backgroundColor: "#2697dd",
+      marginBottom:13
+    },
+    message: {
+      position: "relative",
+      marginLeft: 3,
+      padding: "10px",
+      paddingBottom:18,
+      backgroundColor: "#ffffff",
+      wordBreak:'break-word',
+      textAlign: "left",
+      font: "400 .9em 'Open Sans', sans-serif",
+      border: "1px solid #f0f0f0",
+      borderRadius: "10px",
+      "&:after": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "15px solid #ffffff",
+        borderLeft: "15px solid transparent",
+        borderRight: "15px solid transparent",
+        bottom: '0px',
+        left: "-15px"
+      },
+      "&:before": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "17px solid #ffffff",
+        borderLeft: "16px solid transparent",
+        borderRight: "16px solid transparent",
+        bottom: "-1px",
+        left: "-17px"
+      }      
+    },
+    messageTime: {
+      position: "absolute",
+      fontSize: ".75em",
+      fontWeight:300,
+      marginTop: "10px",
+      bottom: "12px",
+      right: "10px",
+      zIndex: 3,
+      color: '#4d4c4c'
+    },
+});
+
+const firstLetter = (word: string) => word.slice(0, 1).toUpperCase()
+const slicedWord = (word: string, max: number,from:number = 0) => word.length < max ? word.slice(from) : word.slice(from, max)
+
+const MessageLeft = ({message,avatarUrl,name,lastName,timestamp}:any) => {
+  const classes = useStyles();
+  return (
+  <div className={classes.container}>
+      <div className={classes.messageVertical}>
+        <Avatar
+          alt='avatar'
+          src={avatarUrl?avatarUrl:undefined}
+          className={classes.avatar}
+        ></Avatar>
+        <ListItemText className={classes.message}
+          primary={`${firstLetter(name)}${slicedWord(name, 15, 1)} 
+          ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
+          primaryTypographyProps={{color: "#0379af"}}
+          secondary={message}
+          secondaryTypographyProps={{color: "#0e0d0d"}}/>
+        <div className={classes.messageTime}>{timestamp}</div>
+      </div>
+    </div>
+  );
+};
+
+export default MessageLeft

src/components/HomePage/RightBar/ChatBar/Messages/MessagesRight/index.tsx

@@ -0,0 +1,101 @@
+import { makeStyles } from "@material-ui/core/styles";
+import Avatar from "@material-ui/core/Avatar";
+import ListItemText from '@mui/material/ListItemText';
+
+const useStyles = makeStyles({
+    container: {
+      display: "flex",
+      justifyContent: "flex-end",
+      width:'auto',
+    maxWidth: '80%',
+    '&:last-child': {
+      paddingBottom:0,
+      }
+    },
+    messageVertical: {
+      position:'relative',
+      display: 'flex',
+      alignContent: 'center',
+      alignItems: 'flex-end',
+      marginBottom: "10px",
+    },
+    avatar: {
+      width: 34,
+      height: 34,
+      backgroundColor: "#2697dd",
+      marginBottom:13
+    },
+    message: {
+      position: "relative",
+      marginRight: 3,
+      padding: "10px",
+      paddingBottom:18,
+      backgroundColor: "#deffa9",
+      wordBreak:'break-word',
+      textAlign: "left",
+      font: "400 .9em 'Open Sans', sans-serif",
+      border: "1px solid #d5ff91",
+      borderRadius: "10px",
+      "&:after": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "15px solid #deffa9",
+        borderLeft: "15px solid transparent",
+        borderRight: "15px solid transparent",
+        bottom: "0",
+        right: "-15px"
+      },
+      "&:before": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "17px solid #deffa9",
+        borderLeft: "16px solid transparent",
+        borderRight: "16px solid transparent",
+        bottom: "-1px",
+        right: "-17px"
+      }
+    },
+    messageTime: {
+      position: "absolute",
+      fontSize: ".75em",
+      fontWeight:300,
+      marginTop: "10px",
+      bottom: "12px",
+      right: "50px",
+      zIndex: 3,
+      color: '#4d4c4c'
+    },
+});
+
+const firstLetter = (word: string) => word.slice(0, 1).toUpperCase()
+const slicedWord = (word: string, max: number,from:number = 0) => word.length < max ? word.slice(from) : word.slice(from, max)
+
+const MessageRight = ({message,avatarUrl,name,lastName,timestamp}:any) => {
+  const classes = useStyles();
+
+  return (
+  <div className={classes.container}>
+      <div className={classes.messageVertical}>
+        <div className={classes.messageTime}>{timestamp}</div>
+        <ListItemText className={classes.message}
+          primary={`${firstLetter(name)}${slicedWord(name, 15, 1)} 
+          ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
+          primaryTypographyProps={{color: "#42aee0"}}
+          secondary={message}
+          secondaryTypographyProps={{color: "#0e0d0d"}}/>
+        <Avatar
+          alt='avatar'
+          src={avatarUrl?avatarUrl:undefined}
+          className={classes.avatar}
+        ></Avatar>
+      </div>
+  </div>    
+)};
+
+
+
+export  default  MessageRight

src/components/HomePage/RightBar/ChatBar/SendMessage/index.tsx

@@ -0,0 +1,47 @@
+import TextField from '@material-ui/core/TextField';
+import { makeStyles } from "@material-ui/core/styles";
+import SendIcon from '@mui/icons-material/Send';
+import MicNoneIcon from '@mui/icons-material/MicNone';
+import Avatar from '@mui/material/Avatar';
+
+const useStyles = makeStyles({
+    form : {
+        display: "flex",
+        justifyContent: "space-between",
+        alignContent: 'center',
+        alignItems:'center',
+        width: 700,
+        position: 'fixed',
+        bottom: 20,
+    },
+    input  : {
+        width: 620
+    },
+    avatar: {
+        '&:hover': {
+            backgroundColor: 'rgb(41, 139, 231)',
+            color: '#ffffff',
+        }
+    },
+});
+
+const SendMessage = () => {
+    const classes = useStyles();
+    return (
+        <>
+            <form className={classes.form}  noValidate autoComplete="off">
+              <TextField
+                label="Write a new message"
+                className={classes.input}
+              />
+             <Avatar className={classes.avatar} sx={{
+               backgroundColor: '#ffffff',
+               width: 56, height: 56 ,color: 'rgb(41, 139, 231)'}}>
+                  <SendIcon fontSize="medium" />
+             </Avatar>                
+            </form>
+        </>
+    )
+}
+
+export default SendMessage

src/components/HomePage/RightBar/ChatBar/chats.tsx

@@ -0,0 +1,225 @@
+export  const chats = [
+    {
+        avatarUrl: '',
+        name: 'Grigore',
+        lastName:'Helena',
+        message: 'Hello'
+    },
+    {
+        avatarUrl: '',
+        name: 'Grigore',
+        lastName:'Helena',
+        message: 'Hello'
+    },    
+    {
+        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        name: 'Grigfffffffffffffffvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvfffffffffffffdddddddddfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
+        lastName:'Weddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddrr',
+        message: 'dddd'
+    },
+    {
+        avatarUrl: '',
+        name: 'Helena',
+        lastName:'Velikolug',
+        message: 'I am zaraza'
+    },
+    {
+        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
+        lastName: 'Wedrr',
+        message: 'qweeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeedfgfgggggggggggggggggggggghhhhhhhhhhhhhhhjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjhh'
+    },
+    {
+        avatarUrl: '',
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
+        lastName:'Wedrr',
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
+    },
+    {
+        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
+        lastName:'Wedrr',
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
+    },
+    {
+        avatarUrl: '',
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
+        lastName:'Wedrr',
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
+    },
+    {
+        avatarUrl: '',
+        name: 'hrigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
+        lastName:'uedrr',
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
+    },
+    {
+        avatarUrl: '',
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
+        lastName:'kjedrr',
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
+    },
+    {
+        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
+        lastName:'Wedrr',
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
+    },
+    {
+        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
+        lastName:'Wedrr',
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
+    },
+    {
+        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
+        lastName:'Wedrr',
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
+    },
+    {
+        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
+        lastName:'Wedrr',
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
+    },
+    {
+        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
+        lastName:'Wedrr',
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
+    },
+    {
+        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
+        lastName:'Wedrr',
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
+    },
+    {
+        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
+        lastName:'Wedrr',
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
+    },
+    {
+        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
+        lastName:'Wedrr',
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
+    },
+    {
+        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
+        lastName:'Wedrr',
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
+    },
+    {
+        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
+        lastName:'Wedrr',
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
+    },
+    {
+        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
+        lastName:'Wedrr',
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
+    },
+    {
+        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
+        lastName:'Wedrr',
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
+    },
+    {
+        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
+        lastName:'Wedrr',
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
+    },
+    {
+        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
+        lastName:'Wedrr',
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
+    },
+    {
+        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
+        lastName:'Wedrr',
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
+    },
+    {
+        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
+        lastName:'Wedrr',
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
+    },
+    {
+        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
+        lastName:'Wedrr',
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
+    },
+    {
+        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
+        lastName:'Wedrr',
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
+    },
+    {
+        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
+        lastName:'Wedrr',
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
+    },
+    {
+        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
+        lastName:'Wedrr',
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
+    },
+    {
+        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
+        lastName:'Wedrr',
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
+    },
+    {
+        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
+        lastName:'Wedrr',
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
+    },
+    {
+        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
+        lastName:'Wedrr',
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
+    },
+    {
+        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
+        lastName:'Wedrr',
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
+    },
+    {
+        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
+        lastName:'Wedrr',
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
+    },
+    {
+        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
+        lastName:'Wedrr',
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
+    },
+    {
+        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
+        lastName:'Wedrr',
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
+    },    
+]
+

src/components/HomePage/RightBar/ChatBar/index.tsx

@@ -0,0 +1,66 @@
+import { makeStyles } from "@material-ui/core/styles";
+import { Paper } from "@material-ui/core";
+import SendMessage from "./SendMessage";
+import MessageLeft from './Messages/MessageLeft'
+import MessageRight from './Messages/MessagesRight'
+
+import { chats } from "./chats";
+
+const useStyles = makeStyles({   
+    container: {
+      width: "100%",
+      height: "100%",
+      maxWidth: "100%",
+      maxHeight: "100%",
+      display: "flex",
+      alignItems: "center",
+      alignContent:"center",
+      flexDirection: "column",
+      position: "relative",
+      overflowY: "scroll",
+      paddingTop: 60,
+      paddingBottom:60
+    },
+    messagesBody: {
+      width: "40%",
+      height: "80%",
+    },      
+});
+
+const timestamp = new Date(2022, 3, 8).toLocaleString("en-US", {
+    year:'numeric',
+    month: 'short',
+    day: 'numeric'
+  });
+
+const ChatBar = () => {
+  const classes = useStyles();
+  return (
+      <div className={classes.container}>
+        <div className={classes.messagesBody}>
+        {chats.map(({message,avatarUrl,name,lastName}:any,i) => {
+          if (i % 2 == 0) {
+            return (
+            <MessageLeft
+            message={message}
+            timestamp={timestamp}
+            avatarUrl={avatarUrl}
+            name={name}
+            lastName={lastName}
+          />)
+          } else {
+            return (
+            <MessageRight
+            message={message}
+            timestamp={timestamp}
+            avatarUrl={avatarUrl}
+            name={name}
+            lastName={lastName}
+          />)}})}
+        </div>
+        <SendMessage />
+      </div>
+  );
+}
+
+export default ChatBar

src/components/HomePage/RightBar/HeaderBar/Buttons/MenuList/index.tsx

@@ -1,15 +1,15 @@
-import  { useState } from 'react';
+import { useState } from 'react';
+import { useDispatch } from 'react-redux';
 import { styled } from '@mui/material/styles';
 import IconButton from '@mui/material/IconButton';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
-import PersonAddAltIcon from '@mui/icons-material/PersonAddAlt';
 import VolumeOffIcon from '@mui/icons-material/VolumeOff';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 
-import { IHandleIsOpen } from '../../'
+import { actionIsOpen } from '../../../../../../redux/controlApp/action'
 
 const StyledMenu = styled((props:any) => (
   <Menu
@@ -48,17 +48,18 @@ const StyledMenu = styled((props:any) => (
 }));
 
 
-const  MenuList = ({handleIsOpen}:IHandleIsOpen) => {
+const MenuList = () => {
+  const dispatch = useDispatch()
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const open = Boolean(anchorEl);
   const handleClick = (e: React.MouseEvent<HTMLButtonElement>): void => {
-    handleIsOpen('menu')
+    dispatch(actionIsOpen('menu'))
     setAnchorEl(e.currentTarget)
   }
 
-  const handleClose = (i:number|null):void => {
+  const handleClose = (i:number|undefined):void => {
     console.log('chosen one element from small menu by id', i)
-    handleIsOpen(null)
+    dispatch(actionIsOpen(''))
     setAnchorEl(null)
   }
 
@@ -75,18 +76,14 @@ const  MenuList = ({handleIsOpen}:IHandleIsOpen) => {
         onClose={handleClose}
       >
         <MenuItem onClick={() =>  handleClose(0)}>
-            <PersonAddAltIcon />
-            Add to contacts
-          </MenuItem>
-        <MenuItem onClick={() =>  handleClose(1)}>
             <VolumeOffIcon />
             Mute
           </MenuItem>
-        <MenuItem onClick={() =>  handleClose(2)}>
+        <MenuItem onClick={() =>  handleClose(1)}>
             <CheckBoxIcon/>
             Select messages
         </MenuItem>
-        <MenuItem onClick={() =>  handleClose(3)}>
+        <MenuItem onClick={() =>  handleClose(2)}>
             <DeleteOutlineIcon/>
             Delete chat
         </MenuItem>        

src/components/HomePage/RightBar/HeaderBar/Buttons/index.tsx

@@ -2,9 +2,10 @@ import Stack from '@mui/material/Stack';
 import IconButton from '@mui/material/IconButton';
 import SearchIcon from '@mui/icons-material/Search';
 import { makeStyles } from '@material-ui/core'
+import { useDispatch } from 'react-redux';
 
 import MenuList from './MenuList'
-import { IHandleIsOpen } from '../'
+import { actionIsOpen } from '../../../../../redux/controlApp/action'
 
 const useStyles = makeStyles({
   container: {
@@ -12,14 +13,15 @@ const useStyles = makeStyles({
   }
 })
 
-const Buttons = ({handleIsOpen}:IHandleIsOpen) => {
-  const classes = useStyles() 
+const Buttons = () => {
+  const classes = useStyles()
+  const dispatch = useDispatch()
   return (
     <Stack className={classes.container} direction="row" spacing={1}>
-      <IconButton onClick={() => handleIsOpen('search')} aria-label="delete" size="medium">
+      <IconButton onClick={() => dispatch(actionIsOpen('search'))} aria-label="delete" size="medium">
         <SearchIcon fontSize='medium'/>
       </IconButton>
-      <MenuList handleIsOpen={handleIsOpen}/>
+      <MenuList/>
     </Stack>
   );
 }

src/components/HomePage/RightBar/HeaderBar/Credentials/index.tsx

@@ -2,8 +2,9 @@ import ListItemButton from '@mui/material/ListItemButton';
 import Avatar from '@mui/material/Avatar';
 import ListItemText from '@mui/material/ListItemText';
 import ListItemIcon from '@mui/material/ListItemIcon';
-import { IHandleIsOpen } from '../'
+import { useDispatch } from 'react-redux';
 
+import { actionIsOpen } from '../../../../../redux/controlApp/action'
 const contact = [{
   avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
   name: 'Grigore',
@@ -11,8 +12,8 @@ const contact = [{
   message: 'Hello'
 }]
 
-const  Credentials = ({handleIsOpen}:IHandleIsOpen) => {
-
+const Credentials = () => {
+  const dispatch = useDispatch()
   const data = new Date(2022, 3, 8).toLocaleString("en-US", {
     year:'numeric',
     month: 'short',
@@ -24,7 +25,7 @@ const  Credentials = ({handleIsOpen}:IHandleIsOpen) => {
     word.length < max ? word.slice(from) : word.slice(from, max)
   const {avatarUrl,name,lastName }:any = contact[0]
   return (
-    <ListItemButton onClick={() => handleIsOpen('credentials')}>
+    <ListItemButton onClick={() => dispatch(actionIsOpen('credentials'))}>
       <ListItemIcon >
         <Avatar alt={name} src={avatarUrl?avatarUrl:undefined}
               sx={{ background: '#f0c712', width: 44, height: 44 }}>

src/components/HomePage/RightBar/HeaderBar/RightLists/CredentialsList/ToolBar/index.tsx

@@ -3,7 +3,8 @@ import IconButton from '@mui/material/IconButton';
 import PersonAddAltIcon from '@mui/icons-material/PersonAddAlt';
 import CloseIcon from '@mui/icons-material/Close';
 import { makeStyles, Typography } from '@material-ui/core'
-import { IHandleIsOpen } from '../../..'
+import { useDispatch } from 'react-redux';
+import { actionIsOpen } from '../../../../../../../redux/controlApp/action'
 
 const useStyles = makeStyles({
   container: {
@@ -14,11 +15,12 @@ const useStyles = makeStyles({
   },
 })
 
-const ToolBar = ({handleIsOpen}:IHandleIsOpen) => {
+const ToolBar = () => {
+  const dispatch = useDispatch()
   const classes = useStyles()
   return (
-    <Stack className={classes.container} direction="row" spacing={21}>
-      <IconButton onClick={() => handleIsOpen(null)} aria-label="delete" size="medium">
+    <Stack className={classes.container} direction="row" spacing={22}>
+      <IconButton onClick={() => dispatch(actionIsOpen(''))} aria-label="delete" size="medium">
         <CloseIcon fontSize='medium'/>
       </IconButton>
       <Typography variant="h6" color="initial">Profile</Typography>

src/components/HomePage/RightBar/HeaderBar/RightLists/CredentialsList/index.tsx

@@ -2,13 +2,12 @@ import { makeStyles } from '@material-ui/core'
 import ToolBar from './ToolBar'
 import NotDone from '../../../../../reusableComponents/NotDone'
 import { chats } from './chats'
-import { IHandleIsOpen } from '../../'
 
 const useStyles = makeStyles({
     listAbsolute: {
         position: 'absolute',
         top: 58,
-        width: 490,
+        width: 506,
         borderLeft: 'solid 0.5px #9c9c9c',
         maxHeight: '905px',
         minHeight: '905px',
@@ -16,11 +15,11 @@ const useStyles = makeStyles({
     }
 })
 
-const CredentialsList= ({handleIsOpen}:IHandleIsOpen) => {
+const CredentialsList= () => {
   const classes = useStyles()
     return (
 <div>
-     <ToolBar handleIsOpen={handleIsOpen} />
+     <ToolBar/>
      <div className={classes.listAbsolute}>
         {chats.map(() =>
         <NotDone name='Profile credentials' />)}

src/components/HomePage/RightBar/HeaderBar/RightLists/SearchList/Search/index.tsx

@@ -7,9 +7,10 @@ import CloseIcon from '@mui/icons-material/Close';
 import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
 import { styled } from '@mui/material/styles';
 import { makeStyles } from '@material-ui/core'
+import { useDispatch } from "react-redux";
 
+import { actionIsOpen } from '../../../../../../../redux/controlApp/action'
 import StaticDatePicker from './DataPicker'
-import { IHandleIsOpen } from '../../../'
 
 const SearchBar = styled('div')(({ theme }:any) => ({
   position: 'relative',
@@ -64,13 +65,14 @@ const useStyles = makeStyles({
   },
 })
 
-const Search = ({handleIsOpen}:IHandleIsOpen) => {
+const Search = () => {
+  const dispatch = useDispatch()
   const [date, changeDate] = useState<any>(new Date());
   const classes = useStyles()
   console.log(date, 'data from dataPicker')
   return (
     <Stack className={classes.container} direction="row" spacing={1.5}>
-      <IconButton onClick={() => handleIsOpen(null)} aria-label="delete" size="medium">
+      <IconButton onClick={() => dispatch(actionIsOpen(''))} aria-label="delete" size="medium">
         <CloseIcon fontSize='medium'/>
       </IconButton>
       <SearchBar>

src/components/HomePage/RightBar/HeaderBar/RightLists/SearchList/index.tsx

@@ -1,16 +1,13 @@
 import { makeStyles } from '@material-ui/core'
-
 import Search from './Search'
 import NotDone from '../../../../../reusableComponents/NotDone'
-
 import { chats } from './chats'
-import { IHandleIsOpen } from '../../'
 
 const useStyles = makeStyles({
     listAbsolute: {
         position: 'absolute',
         top: 58,
-        width: 490,
+        width: 506,
         borderLeft: 'solid 0.5px #9c9c9c',
         maxHeight: '905px',
         minHeight: '905px',
@@ -18,11 +15,11 @@ const useStyles = makeStyles({
     }
 })
 
-const SearchList= ({handleIsOpen}:IHandleIsOpen) => {
+const SearchList= () => {
   const classes = useStyles()
     return (
 <div>
-     <Search handleIsOpen={handleIsOpen} />
+     <Search/>
      <div className={classes.listAbsolute}>
         {chats.map(() =>
         <NotDone name='Search List'/>)}

src/components/HomePage/RightBar/HeaderBar/RightLists/index.tsx

@@ -1,12 +1,15 @@
+import { useSelector } from 'react-redux'
 import SearchList from './SearchList'
 import CredentialsList from './CredentialsList'
-import { IHandleOpen } from '../'
+import { getIsOpen } from '../../../../../redux/controlApp/selector'
 
-const RightLists = ({ isOpen, handleIsOpen }: IHandleOpen) => {
+
+const RightLists = () => {
+  const isOpen = useSelector(getIsOpen)
   return (
     <div>
-      {isOpen === 'credentials' &&<CredentialsList handleIsOpen={handleIsOpen}/>}
-      {isOpen === 'search' && <SearchList handleIsOpen={handleIsOpen} />}
+      {isOpen === 'credentials' &&<CredentialsList/>}
+      {isOpen === 'search' && <SearchList/>}
   </div>
    )
 }

src/components/HomePage/RightBar/HeaderBar/index.tsx

@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import Toolbar from '@mui/material/Toolbar'
 import AppBar from '@mui/material/AppBar';
 import { makeStyles } from '@material-ui/core'
@@ -18,15 +17,13 @@ const useStyles = makeStyles({
 
 
 const HeaderBar = () => {
-  const [isOpen,setIsOpen] = useState<TIsOpen>(null)
   const classes = useStyles()
-  const handleIsOpen = (flag:TIsOpen) => setIsOpen(flag)
     return (
       <AppBar position="static">
         <Toolbar  className={classes.toolBar}>
-          <Credentials handleIsOpen={handleIsOpen}/>
-          <Buttons handleIsOpen={handleIsOpen} />
-          <RightLists isOpen={isOpen} handleIsOpen={handleIsOpen}/>
+          <Credentials/>
+          <Buttons/>
+          <RightLists/>
         </Toolbar>
       </AppBar>        
     )
@@ -34,13 +31,3 @@ const HeaderBar = () => {
 
 export default HeaderBar
 
-export type TIsOpen = (null | 'credentials' | 'search' | 'menu')
-
-export interface IHandleIsOpen {
-  handleIsOpen:(flag:TIsOpen) => void
-}
-
-export interface IHandleOpen {
-  isOpen: TIsOpen,
-  handleIsOpen:(flag:TIsOpen) => void
-}

src/components/HomePage/RightBar/index.tsx

@@ -1,24 +1,41 @@
-import Toolbar from '@mui/material/Toolbar'
-import SearchIcon from '@mui/icons-material/Search';
-import AppBar from '@mui/material/AppBar';
 import Grid from '@mui/material/Grid'
 import { makeStyles } from '@material-ui/core'
-
 import HeaderBar from './HeaderBar'
+import ChatBar from './ChatBar'
+import { useSelector } from 'react-redux'
+import { getIsOpen } from '../../../redux/controlApp/selector'
 
 const useStyles = makeStyles({
   container: {
     minHeight: '100vh',
     maxHeight: '100vh',
     background: 'linear-gradient(to bottom right, #e7f097 , #b1e667,#f4f75e)',
+    paddingBottom:160,
+  },
+  chat: {
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    flexWrap: 'nowrap',
+    alignItems: "center",
+    justifyContent: 'center',
   },
+  moveChat: {
+    marginLeft:506
+  }
 })
 
 const RightBar = () => {
-    const classes = useStyles()
+  const classes = useStyles()
+  const isOpen = useSelector(getIsOpen)
     return (
       <Grid item lg={9} className={classes.container}>
-          <HeaderBar/>
+        <HeaderBar />
+        <div className={classes.chat}>
+          <ChatBar />
+          {isOpen&&isOpen !== 'menu'&&
+            <div className={classes.moveChat}></div>}
+        </div>
       </Grid>
     )
 }

src/components/HomePage/index.tsx

@@ -9,6 +9,7 @@ const useStyles = makeStyles({
         maxHeight: '100vh',
     },
 })
+
 const HomePage = () => {
    const classes = useStyles()
     return (

src/index.css

@@ -3,6 +3,10 @@ html {
   overflow-x: hidden;
 }
 
+html {
+  overflow: hidden;
+}
+
 body {
   background-color: white;
   min-width: 100vw;

src/redux/controlApp/action/index.ts

@@ -0,0 +1,8 @@
+import { createAction } from '@reduxjs/toolkit';
+import { TState }  from '../../../typescript/redux/controlApp/interfaces'
+
+const actionIsOpen= createAction('control/isOpen', (value:TState) => ({
+  payload: value,
+}));
+
+export { actionIsOpen };

src/redux/controlApp/reducer/index.ts

@@ -0,0 +1,11 @@
+import { createReducer } from '@reduxjs/toolkit';
+import { actionIsOpen } from '../action';
+import { IPayload } from '../../../typescript/redux/controlApp/interfaces'
+
+const reducerControlApp = createReducer('', {
+  [actionIsOpen.type]: (_, { payload }:IPayload) => {
+    return payload
+  },
+});
+
+export default reducerControlApp;

src/redux/controlApp/selector/index.ts

@@ -0,0 +1,5 @@
+import { IState } from '../../../typescript/redux/interfaces'
+
+const getIsOpen = (state:IState) => state.controlApp;
+
+export { getIsOpen };

src/redux/loading/reducer/index.ts

@@ -4,4 +4,5 @@ import { actionIsLoading } from '../action';
 const reducerLoading = createReducer(false, {
   [actionIsLoading.type]: (_, { payload }: {payload : boolean}) => payload,
 });
+
 export default reducerLoading;

src/redux/rootReducer/index.ts

@@ -2,6 +2,7 @@ import { combineReducers } from '@reduxjs/toolkit';
 import { persistReducer } from 'redux-persist';
 import storage from 'redux-persist/lib/storage';
 
+import reducerControlApp from '../controlApp/reducer'
 import reducerLoading from '../loading/reducer';
 import reducerAuthorization from '../authorization/reducer';
 
@@ -12,6 +13,7 @@ const authorizationPersistConfig = {
 
 export const rootReducer = combineReducers({
   isLoading: reducerLoading,
+  controlApp: reducerControlApp,
   authorization: persistReducer(
     authorizationPersistConfig,
     reducerAuthorization,

src/typescript/redux/authorization/interfaces.ts

@@ -1,4 +1,3 @@
-import { string } from "prop-types";
 
 export interface IAuthorizationState  {
         token: string,

src/typescript/redux/controlApp/interfaces.ts

@@ -0,0 +1,6 @@
+export type TState = ('' | 'credentials' | 'search' | 'menu')
+
+export interface IPayload {
+  payload:TState
+}
+

src/typescript/redux/interfaces.ts

@@ -1,6 +1,8 @@
 import {IAuthorizationState} from './authorization/interfaces'
+import { TState } from './controlApp/interfaces'
 
 export interface IState {
+  controlApp:TState,
   isLoading: boolean;
-    authorization: IAuthorizationState
+  authorization: IAuthorizationState
 }