done halve of navigation on app

src/App.tsx

@@ -7,9 +7,9 @@ import s from './App.module.css';
 import { getToken } from './redux/authorization/selector'
 import { asyncLogout, asyncCurrentUser } from './redux/authorization/operations'
 import { setToken } from './api-data'
-import PrivateRoute from './components/Routes/PrivateRoute/PrivateRoute';
-import PublicRoute from './components/Routes/PublicRoute/PublicRoute';
-import Loader from './components/Loader/Loader';
+import PrivateRoute from './components/reusableComponents/Routes/PrivateRoute';
+import PublicRoute from './components/reusableComponents/Routes/PublicRoute';
+import Loader from './components/reusableComponents/Loader/Loader';
 
 const HomePage = lazy(
   () =>

src/components/AuthPage/Registration/index.tsx

@@ -2,7 +2,7 @@ import { makeStyles, Button, TextField, Typography } from '@material-ui/core'
 import { useState } from 'react';
 import { useDispatch } from 'react-redux';
 
-import UploadAvatar from '../../../components/DropZone/UploadAvatar'
+import UploadAvatar from '../../reusableComponents/DropZone/UploadAvatar'
 import { asyncCreateUser } from '../../../redux/authorization/operations'
 
 const useStyles = makeStyles({

src/components/HomePage/ContactsBar/ChatsList/chats.tsx

@@ -7,15 +7,15 @@ export  const chats = [
     },
     {
         avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
+        name: 'Grigfffffffffffffffvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvfffffffffffffdddddddddfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
+        lastName:'Weddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddrr',
+        message: 'dddd'
     },
     {
         avatarUrl: '',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
+        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',

src/components/HomePage/ContactsBar/ChatsList/index.tsx

@@ -10,8 +10,6 @@ import  shortid  from 'shortid';
 import doubleCheck from '../../../../img/clipart289625.png'
 import { chats } from './chats'
 
-const randomColor = () => "#" + Math.floor(Math.random() * 0xFFFFFF).toString(16);
-
 const useStyles = makeStyles({
   list: {
     width: '100%',
@@ -79,11 +77,7 @@ const useStyles = makeStyles({
   }
 })
 
-interface IChatListP{
-  handleEnterOpenMenuSm: (e: any) => void,
-  handleLeaveCloseMenuSm: (e: any) => void,
-}
-const  ChatsList = ({handleEnterOpenMenuSm,handleLeaveCloseMenuSm}:IChatListP) => {
+const  ChatsList = () => {
   const [selectedIndex, setSelectedIndex] = useState<number>(1);
 
   const classes = useStyles()
@@ -105,11 +99,10 @@ const  ChatsList = ({handleEnterOpenMenuSm,handleLeaveCloseMenuSm}:IChatListP) =
   });
 
   const firstLetter = (word: string) => word.slice(0, 1).toUpperCase()
-  const slicedWord = (word:string,max: number) => word.length < max?word:`${word.slice(0,max)}...`
+  const slicedWord = (word: string, max: number,from:number = 0) => word.length < max ? word.slice(from) : word.slice(from, max)
+
   return (
     <List
-      onMouseEnter={handleEnterOpenMenuSm}
-      onMouseLeave={handleLeaveCloseMenuSm}
       className={classes.list} component="nav"
         aria-label="main mailbox folders">
          {chats && chats.map(({name,lastName,avatarUrl,message}: any,i:number) =>
@@ -125,7 +118,8 @@ const  ChatsList = ({handleEnterOpenMenuSm,handleLeaveCloseMenuSm}:IChatListP) =
                  {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
               </Avatar>
           </ListItemIcon> 
-            <ListItemText primary={slicedWord(name,50)} secondary={slicedWord(message,35)} />
+
+            <ListItemText primary={`${firstLetter(name)}${slicedWord(name,15,1)} ${firstLetter(lastName)}${slicedWord(lastName,15,1)}`} secondary={slicedWord(message,35)} />
           <ListItemIcon className={classes.listItem_iconRight}>
                <div className={classes.listItem_iconTimeChecked}>
                  <img alt='double check' width="16" height='16' src={doubleCheck} />

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

@@ -0,0 +1,219 @@
+export  const contacts = [
+    {
+        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: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
+    },
+    {
+        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/LeftBar/ContactsList/index.tsx

@@ -0,0 +1,123 @@
+import List from '@mui/material/List';
+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 { makeStyles } from '@material-ui/core'
+import { useState } from 'react';
+import  shortid  from 'shortid';
+
+import { contacts } from './contacts'
+
+const useStyles = makeStyles({
+  list: {
+    width: '100%',
+    maxHeight: '890px',
+    overflowY: 'scroll',
+  '&::-webkit-scrollbar': {
+    width: '0.4em'
+  },
+  '&::-webkit-scrollbar-track': {
+    boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
+    webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
+    backgroundColor: '#eceeec',
+  },
+  '&::-webkit-scrollbar-thumb': {
+    backgroundColor: '#ccc8c8',
+    },
+  "&::-webkit-scrollbar-thumb:focus": {
+    backgroundColor: "#959595",
+          },
+  "&::-webkit-scrollbar-thumb:active": {
+    backgroundColor: "#959595",
+    },
+  },
+  listItem: {},
+  listItem_iconAvatar: {
+    marginRight:10
+  },
+  listItem_iconRight: {
+    marginRight: 10,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignContent: 'center',
+    flexDirection: 'column'
+  },
+  listItem_iconTimeChecked: {
+    display: 'flex',
+    flexWrap: 'nowrap',
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignContent: 'center',
+    marginBottom:2
+  },
+  listItem_iconRightBtn: {
+    background: '#0ac40a',
+    borderRadius: '50%',
+    color: '#ffffff',
+    border: 'none',
+    height: 24,
+    width: 24,
+    textAlign: 'center',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignContent: 'center',
+    fontSize: 12,
+    marginLeft: 'auto',
+    '&:hover': {
+      outline: 'solid 3px #3ee415',
+    }
+  },
+  listItem_icon_time: {
+    fontSize: 12,
+    marginLeft:5
+  }
+})
+
+const  ChatsList = () => {
+  const [selectedIndex, setSelectedIndex] = useState<number>(1);
+
+  const classes = useStyles()
+
+  const handleListItemClick = (e: React.SyntheticEvent<Element, Event>, i: number) => {
+    console.log(i,'index','selected chat in chat bar',e)
+    setSelectedIndex(i);
+  }
+
+  const data = new Date(2022, 3, 8).toLocaleString("en-US", {
+    year:'numeric',
+    month: 'short',
+    day: 'numeric'
+  });
+
+  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)
+
+  return (
+    <List
+      className={classes.list} component="nav"
+        aria-label="main mailbox folders">
+         {contacts && contacts.map(({name,lastName,avatarUrl,message}: any,i:number) =>
+          <ListItemButton
+          className={classes.listItem}
+          key={shortid.generate()}
+          selected={selectedIndex === i}
+          onClick={(e) => handleListItemClick(e, i)}
+          >
+          <ListItemIcon className={classes.listItem_iconAvatar}>
+            <Avatar alt={name} src={avatarUrl?avatarUrl:undefined}
+                 sx={{ background: '#f0c712', width: 54, height: 54 }}>
+                 {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
+              </Avatar>
+          </ListItemIcon> 
+          <ListItemText primary={`${firstLetter(name)}${slicedWord(name, 15, 1)}
+                ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`} secondary={data} />        
+        </ListItemButton>)}
+      </List>
+  );
+}
+
+export default ChatsList

src/components/HomePage/ContactsBar/ChatsList/MenuBar/index.tsx

@@ -14,7 +14,7 @@ import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 import BugReportIcon from '@mui/icons-material/BugReport';
 import { makeStyles } from '@material-ui/core'
 
-import Modal from '../Modal'
+import Modal from '../../../reusableComponents/Modal'
 
 const useStyles = makeStyles({
     container: {
@@ -28,6 +28,9 @@ const useStyles = makeStyles({
     },
     list: {
       background:'#fdfdfd'
+    },
+      listDone: {
+        color: '#0dc706'
     },
     listItemLast: {
       textAlign: 'center',
@@ -41,74 +44,79 @@ const useStyles = makeStyles({
     }
 })
 
-const MenuBar = () => {
-    const classes = useStyles()
+interface IContactsList {
+  handleSelectedMenu: (i:number) => void
+}
+
+const MenuBar = ({handleSelectedMenu}:IContactsList) => {
+  const classes = useStyles()
+
   return (
     <Modal> 
       <Paper className={classes.container}>
       <MenuList className={classes.list}>
-        <MenuItem>
+        <MenuItem onClick={() => handleSelectedMenu(0)}>
           <ListItemIcon className={classes.listIcon}>
             <BookmarkBorderIcon fontSize="medium" />
           </ListItemIcon>
           <ListItemText>Saved Messages</ListItemText>
         </MenuItem>
-        <MenuItem>
+        <MenuItem onClick={() => handleSelectedMenu(1)}>
           <ListItemIcon className={classes.listIcon}>
             <ArchiveIcon fontSize="medium" />
           </ListItemIcon>
           <ListItemText>Archived Chats</ListItemText>
         </MenuItem>
-        <MenuItem>
+        <MenuItem  onClick={() => handleSelectedMenu(2)}>
           <ListItemIcon className={classes.listIcon}>
             <PermContactCalendarIcon fontSize="medium" />
           </ListItemIcon>
-          <ListItemText>Contacts</ListItemText>
+          <ListItemText className={classes.listDone}>Contacts</ListItemText>
         </MenuItem>        
-        <MenuItem>
+        <MenuItem onClick={() => handleSelectedMenu(3)}>
           <ListItemIcon className={classes.listIcon}>
             <SettingsIcon fontSize="medium" />
           </ListItemIcon>
           <ListItemText>Settings</ListItemText>
         </MenuItem>
-        <MenuItem>
+        <MenuItem onClick={() => handleSelectedMenu(4)}>
           <ListItemIcon className={classes.listIcon}>
             <Brightness3Icon fontSize="medium" />
           </ListItemIcon>
           <ListItemText>Night Mode</ListItemText>
         </MenuItem>
-        <MenuItem>
+        <MenuItem onClick={() => handleSelectedMenu(5)}>
           <ListItemIcon className={classes.listIcon}>
             <AnimationIcon fontSize="medium" />
           </ListItemIcon>
           <ListItemText>Animation</ListItemText>
         </MenuItem>
-        <MenuItem>
+        <MenuItem onClick={() => handleSelectedMenu(6)}>
           <ListItemIcon className={classes.listIcon}>
             <HelpOutlineIcon fontSize="medium" />
           </ListItemIcon>
           <ListItemText>Telegram Features</ListItemText>
         </MenuItem>              
-        <MenuItem>
+        <MenuItem onClick={() => handleSelectedMenu(7)}>
           <ListItemIcon className={classes.listIcon}>
             <BugReportIcon fontSize="medium" />
           </ListItemIcon>
           <ListItemText>Report bug</ListItemText>
         </MenuItem>
-        <MenuItem>
+        <MenuItem onClick={() => handleSelectedMenu(8)}>
           <ListItemIcon className={classes.listIconText}>
             K
           </ListItemIcon>
           <ListItemText>Switch to K Version</ListItemText>
         </MenuItem>
-        <MenuItem>
+        <MenuItem onClick={() => handleSelectedMenu(9)}>
           <ListItemIcon className={classes.listIconText}>
              W
           </ListItemIcon>
           <ListItemText>Switch to Old Version</ListItemText>
-        </MenuItem>
+        </MenuItem >
         <Divider />
-        <MenuItem >
+        <MenuItem onClick={() => handleSelectedMenu(10)}>
           <ListItemText secondary='Telegram WebZ 1.32.3' className={classes.listItemLast}/>
         </MenuItem>
       </MenuList>

src/components/HomePage/ContactsBar/SearchBar/ChatListRecent/index.tsx

@@ -1,8 +1,8 @@
 import Avatar from '@mui/material/Avatar';
 import Stack from '@mui/material/Stack';
 import { makeStyles, Typography } from '@material-ui/core'
-import  shortid  from 'shortid';
-import { useState } from 'react';
+import shortid from 'shortid';
+
 import {users} from './user'
 
 const useStyles = makeStyles({
@@ -29,17 +29,13 @@ const useStyles = makeStyles({
     }
 })
 
-const randomColor = () => "#" + Math.floor(Math.random() * 0xFFFFFF).toString(16);
-
 const ChatListRecent = () => {
     const classes = useStyles()
-    // const [selectedIndex, setSelectedIndex] = useState<number>(1);
-    // const handleSelectedIndex
     return (
     <Stack direction="row" className={classes.stack}>
       {users && users.slice(0, 6).map(({ name, avatarUrl,lastName }) => <div key={shortid.generate()} className={classes.stackItem}>
         <Avatar alt={name} src={avatarUrl?avatarUrl:undefined}
-              sx={{ background: randomColor(), width: 54, height: 54 }}>{!avatarUrl&&`${lastName.slice(0,1).toUpperCase()}${lastName.slice(0,1).toUpperCase()}`}</Avatar>
+              sx={{ background: '#2ab307', width: 54, height: 54 }}>{!avatarUrl&&`${lastName.slice(0,1).toUpperCase()}${lastName.slice(0,1).toUpperCase()}`}</Avatar>
         <Typography variant="h6" className={classes.titleName} >{name.length < 9?name:`${name.slice(0,8)}...`}</Typography>
           </div>)}
     </Stack>   

src/components/HomePage/ContactsBar/SearchBar/index.tsx

@@ -3,8 +3,8 @@ import BottomNavigationAction from '@mui/material/BottomNavigationAction';
 import React, { useState } from 'react';
 import { makeStyles } from '@material-ui/core'
 
-import ChatListRecent from './ChatListRecent'
-
+import ChatListRecent from '../ChatListRecent'
+import HasNotDoneComponentYet from '../../../../reusableComponents/HasNotDoneComponentYet' 
 const useStyles = makeStyles({
     bottomNavigation: {
         boxShadow: '0px 1px 1px 1px rgba(120,120,120,0.63)',
@@ -19,7 +19,7 @@ const useStyles = makeStyles({
     },
 })
 
-const SearchBar = () => {
+const SearchLists = () => {
     const [isActive, setIsActive] = useState<number>(0)
     const handleIsActive = (_e: React.SyntheticEvent<Element, Event>, newValue: number): void => setIsActive(newValue)
     const classes = useStyles()
@@ -40,9 +40,14 @@ const SearchBar = () => {
             <BottomNavigationAction label={<Label/>} icon={<Icon name='Music' />}  />
             <BottomNavigationAction label={<Label/>} icon={<Icon name='Voice' />}  />
         </BottomNavigation>
-       {isActive === 0&&<ChatListRecent/>}
+            {isActive === 0 && <ChatListRecent />}
+            {isActive === 1 && <HasNotDoneComponentYet name='Media'/>}
+            {isActive === 2 && <HasNotDoneComponentYet name='Links'/>}
+            {isActive === 3 && <HasNotDoneComponentYet name='Files'/>}
+            {isActive === 4 && <HasNotDoneComponentYet name='Music'/>}
+            {isActive === 5 && <HasNotDoneComponentYet name='Voice'/>}
     </>      
     )
 }
 
-export default SearchBar
+export default SearchLists

src/components/HomePage/ContactsBar/index.tsx

@@ -6,15 +6,6 @@ import InputBase from '@mui/material/InputBase';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import { styled } from '@mui/material/styles';
 import { makeStyles } from '@material-ui/core'
-import React, { useState, useRef, useEffect } from 'react';
-import { createPortal } from 'react-dom';
-
-import SmallMenuBar from './ChatsList/SmallMenuBar'
-import SearchBar from './SearchBar'
-import ChatsList from './ChatsList'
-import MenuBar from './ChatsList/MenuBar'
-
-
 
 const Search = styled('div')(({ theme }:any) => ({
   position: 'relative',
@@ -55,6 +46,7 @@ const StyledInputBase = styled(InputBase)(({ theme }) => ({
       width: '35ch',
       '&:focus': {
         outline: '2px solid  #2184f7',
+        color: '#2184f7'
       },
     },
   },
@@ -78,48 +70,16 @@ const useStyles = makeStyles({
   },
 })
 
-const ContactsBar = () => {
-    const classes = useStyles()
-    const [isOpen, setIsOpen] = useState<boolean>(false)
-    const [isMenu, setIsMenu] = useState<boolean>(false)
-    const [isMenuSm, setIsMenuSm] = useState<boolean>(false);
-    const [value, setValue] = useState<string>('')
-    const modalRoot = useRef<HTMLDivElement|null>(null);
-    const handleFocus = (): void => setIsOpen(true)
-    const handleClick = (): void => {
-    if(!isOpen) return setIsMenu(!isMenu)
-       setIsOpen(false)
-    }
-    const handleSearch = (e: React.ChangeEvent<HTMLInputElement>):void => setValue(e.target.value)
-    const handleEnterOpenMenuSm = (): void => {
-    if(!isMenuSm)setIsMenuSm(true)
-    }
-    const handleLeaveCloseMenuSm = (e: any): void => {
-      if(isMenuSm&&e.pageX > 470)setIsMenuSm(false)
-    }
-
-  useEffect(() => {
-    const handleCloseModal = (e:any) => {
-      console.log(e.target)
-      if(e.target.id === 'overlay')  setIsMenu(false)
-    }
-    if (!modalRoot.current) {
-    const modal = document.getElementById('modal-root') as HTMLDivElement | null
-      if (modal) {
-      modal.addEventListener('click',handleCloseModal)
-      modalRoot.current = modal
-       }     
-    }
-    return () => {
-      if (modalRoot.current) {
-      modalRoot.current.removeEventListener('click',handleCloseModal)
-      modalRoot.current = null        
-      }
-    }
-  }, [])
+interface ISearchBar {
+  handleClick:() => void,
+  handleFocus:() => void,
+  handleSearch:(e: React.ChangeEvent<HTMLInputElement>) => void,
+  isOpen:boolean,
+}
 
+const SearchBar = ({handleClick,handleFocus,handleSearch,isOpen}:ISearchBar) => {
+  const classes = useStyles()
     return (
-    <>
         <Toolbar className={classes.toolBar}>
             <IconButton  onClick={handleClick}>
                 {isOpen ? <ArrowBackIcon className={classes.iconArrow} /> : <MenuIcon className={classes.iconBtn} />}
@@ -136,13 +96,7 @@ const ContactsBar = () => {
                 />
             </Search>
         </Toolbar>
-        {isOpen ? <SearchBar /> :
-          <ChatsList handleEnterOpenMenuSm={handleEnterOpenMenuSm}
-            handleLeaveCloseMenuSm={handleLeaveCloseMenuSm} />}
-        {isMenu && modalRoot.current && createPortal(<MenuBar />, modalRoot.current)}
-        {isMenuSm&&<SmallMenuBar />}
-    </>
     )
 }
 
-export default ContactsBar
+export default SearchBar

src/components/HomePage/ContactsBar/ChatsList/SmallMenuBar/index.tsx

@@ -10,19 +10,6 @@ import GroupsIcon from '@mui/icons-material/Groups';
 import ModeEditOutlineOutlinedIcon from '@mui/icons-material/ModeEditOutlineOutlined';
 import CloseIcon from '@mui/icons-material/Close';
 
-
-const useStyles = makeStyles({
-    container: {
-        position: 'absolute',
-        maxWidth: '100%',
-        top: 895,
-        left: 390,
-        zIndex: 10,
-        visibility: 'visible',
-        cursor:'pointer'
-  },
-})
-
 const StyledMenu = styled((props:any) => (
   <Menu
     elevation={0}
@@ -59,16 +46,34 @@ const StyledMenu = styled((props:any) => (
   },
 }));
 
+const useStyles = makeStyles({
+    container: {
+        position: 'absolute',
+        maxWidth: '100%',
+        top: 895,
+        left: 390,
+        zIndex: 10,
+        visibility: 'visible',
+        cursor:'pointer'
+  },
+  activeIcon: {
+    backgroundColor:'#12f11d'
+  }
+})
 
-
-const  SmallMenuBar = () => {
+interface ISmallMenuBar {
+  handleSelectedMenu:(i:number) => void,
+  setIsMenuSm:React.Dispatch<React.SetStateAction<boolean>>,
+}
+const  SmallMenuBar = ({handleSelectedMenu,setIsMenuSm}:ISmallMenuBar) => {
   const classes = useStyles()
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const open = Boolean(anchorEl);
   const handleClick = (e: React.MouseEvent<HTMLDivElement>):void => setAnchorEl(e.currentTarget)
 
   const handleClose = (i:number|null):void => {
-    console.log('chosen one element from small menu by id',i)
+    console.log('chosen one element from small menu by id', i)
+    setIsMenuSm(false)
     setAnchorEl(null)
   }
 
@@ -86,16 +91,25 @@ const  SmallMenuBar = () => {
         open={open}
         onClose={handleClose}
       >
-          <MenuItem onClick={() => handleClose(0)}>
+        <MenuItem onClick={() => {
+          handleClose(0);
+          handleSelectedMenu(11)
+        }}>
             <GroupsIcon />
             New Channel
           </MenuItem>
-          <MenuItem onClick={() => handleClose(1)}>
+        <MenuItem onClick={() => {
+          handleClose(1);
+          handleSelectedMenu(12)
+        }}>
             <GroupIcon />
             New Group
           </MenuItem>
-          <MenuItem onClick={() => handleClose(2)}>
-            <PersonIcon  />
+        <MenuItem  onClick={() => {
+          handleClose(2);
+          handleSelectedMenu(13)
+        }}>
+            <PersonIcon className={classes.activeIcon} />
             New Message
           </MenuItem>
         </StyledMenu>

src/components/HomePage/LeftBar/index.tsx

@@ -0,0 +1,90 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+
+import Grid from '@mui/material/Grid'
+import SmallMenuBar from './SmallMenuBar'
+import SearchLists from './SearchBar/SearchLists'
+import SearchBar from './SearchBar'
+import ChatsList from './ChatsList'
+import MenuBar from './MenuBar'
+import ContactsList from './ContactsList'
+import HasNotDoneComponentYet from '../../reusableComponents/HasNotDoneComponentYet'
+
+const LeftBar = () => {
+  const [isOpen, setIsOpen] = useState<boolean>(false)
+  const [isMenu, setIsMenu] = useState<boolean>(false)
+  const [isMenuSm, setIsMenuSm] = useState<boolean>(false);
+  const [iMenu, setIMenu] = useState<number | null>(null)
+  const [value, setValue] = useState<string>('')
+  const modalRoot = useRef<HTMLDivElement|null>(null);
+  const handleFocus = (): void => setIsOpen(true)
+  const handleClick = (): void => {
+  if (iMenu) setIMenu(null)
+  if(!isOpen) return setIsMenu(!isMenu)
+     setIsOpen(false)
+  }
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>):void => setValue(e.target.value)
+  const handleEnterOpenMenuSm = (): void => {
+  if(!isMenuSm) setIsMenuSm(true)
+  }
+  const handleLeaveCloseMenuSm = (e: any): void => {
+  if(isMenuSm&&e.pageX > 480) setIsMenuSm(false)
+  }
+  const handleSelectedMenu = (i: number) => {
+    setIsOpen(true)
+    setIsMenu(false)
+    setIsMenuSm(false)
+    setIMenu(i)
+  }
+  
+  useEffect(() => {
+    const handleCloseModal = (e:any) => {
+      if (e.target.id === 'overlay') {
+        setIsMenu(false)
+        setIsMenuSm(false)
+      }
+    }
+    if (!modalRoot.current) {
+    const modal = document.getElementById('modal-root') as HTMLDivElement | null
+      if (modal) {
+      modal.addEventListener('click',handleCloseModal)
+      modalRoot.current = modal
+       }     
+    }
+    return () => {
+      if (modalRoot.current) {
+      modalRoot.current.removeEventListener('click',handleCloseModal)
+      modalRoot.current = null        
+      }
+    }
+  }, [])
+
+    return (
+      <Grid item lg={3} onMouseEnter={handleEnterOpenMenuSm} onMouseLeave={handleLeaveCloseMenuSm}>
+        <SearchBar handleClick={handleClick} handleFocus={handleFocus}
+          handleSearch={handleSearch} isOpen={isOpen} />
+        {!iMenu&&isOpen && <SearchLists />}
+        {!iMenu&&!isOpen &&<ChatsList/>}
+        {!iMenu && isMenuSm && !isOpen && <SmallMenuBar handleSelectedMenu={handleSelectedMenu}
+          setIsMenuSm={setIsMenuSm} />}
+        {isMenu && modalRoot.current &&
+          createPortal(<MenuBar handleSelectedMenu={handleSelectedMenu} />, modalRoot.current)}
+        {iMenu === 0 && <HasNotDoneComponentYet name='Saved Messages' />}
+        {iMenu === 1 && <HasNotDoneComponentYet name='Archive Chats' />}
+        {iMenu === 2 && <ContactsList />}
+        {iMenu === 3 && <HasNotDoneComponentYet name='Settings' />}
+        {iMenu === 4 && <HasNotDoneComponentYet name='Night Mode' />}
+        {iMenu === 5 && <HasNotDoneComponentYet name='Animations' />}
+        {iMenu === 6 && <HasNotDoneComponentYet name='Telegram Feature' />}
+        {iMenu === 7 && <HasNotDoneComponentYet name='Report Bag' />}
+        {iMenu === 8 && <HasNotDoneComponentYet name='Switch to K Version' />}
+        {iMenu === 9 && <HasNotDoneComponentYet name='Switch to Old Version' />}
+        {iMenu === 10 && <HasNotDoneComponentYet name='Telegram WebZ 1.33.4' />}
+        {iMenu === 11 && <HasNotDoneComponentYet name='New Channel' />}
+        {iMenu === 12 && <HasNotDoneComponentYet name='New Group' />}
+        {iMenu === 13 && <ContactsList />}
+    </Grid>
+    )
+}
+
+export default LeftBar

src/components/HomePage/RightBar/index.tsx

@@ -0,0 +1,21 @@
+import Typography from '@mui/material/Typography'
+import Grid from '@mui/material/Grid'
+import { makeStyles } from '@material-ui/core'
+
+const useStyles = makeStyles({
+    chat: {
+        minHeight: '100%',
+        background: 'linear-gradient(to bottom right, #e7f097 , #b1e667,#f4f75e)',
+    },
+})
+
+const RightBar = () => {
+    const classes = useStyles()
+    return (
+        <Grid item lg={9} className={classes.chat}>
+            <Typography variant="h6">RightBar</Typography>
+        </Grid>
+    )
+}
+
+export default RightBar

src/components/HomePage/index.tsx

@@ -1,29 +1,12 @@
 import Grid from '@mui/material/Grid'
-import { makeStyles } from '@material-ui/core'
-import ContactsBar from './ContactsBar'
-
-const useStyles = makeStyles({
-    container: {
-        overflow: 'hidden',
-        minHeight: '100vh',
-        minWidth: '100vw',
-        overflowY:'hidden'
-    },
-    chat: {
-        minHeight: '100%',
-        background: 'linear-gradient(to bottom right, #e7f097 , #b1e667,#f4f75e)',
-    },
-})
+import LeftBar from './LeftBar'
+import RightBar from './RightBar'
 
 const HomePage = () => {
-    const classes = useStyles()
     return (
-       <Grid container spacing={0} className={classes.container}>
-            <Grid item lg={3}>
-                <ContactsBar/>
-            </Grid>
-            <Grid item lg={9} className={classes.chat}>
-            </Grid>
+       <Grid container spacing={0} >
+          <LeftBar/>
+          <RightBar/>
        </Grid>
     )
 }

src/components/reusableComponents/HasNotDoneComponentYet/index.tsx

@@ -0,0 +1,21 @@
+import Typography from '@mui/material/Typography'
+import { makeStyles } from '@material-ui/core'
+
+const useStyles = makeStyles({
+    container: {
+        display: 'flex',
+        justifyContent: 'center',
+        padding: '100px 10px',
+        background: '#eb4141'
+    }
+})
+const HasNotDoneComponentYet = ({ name }: { name: string }) => {
+    const classes = useStyles()
+    return (
+        <div className={classes.container}>
+            <Typography variant="h6">HasNotDoneComponentYet : {name}</Typography>
+        </div>
+    )
+}
+
+export default HasNotDoneComponentYet

src/components/Loader/Loader.jsx

@@ -2,7 +2,7 @@ import 'react-loader-spinner/dist/loader/css/react-spinner-loader.css';
 import Loader from 'react-loader-spinner';
 import { useSelector } from 'react-redux';
 
-import {getLoad} from '../../redux/loading/selector'
+import {getLoad} from '../../../redux/loading/selector'
 import s from './Loader.module.css';
 
 const Load = () => {

src/components/Routes/PrivateRoute/PrivateRoute.tsx

@@ -1,8 +1,8 @@
 import { Route, Redirect } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 
-import { IPrivateProps} from '../../../typescript/components/Routes/interfaces';
-import { getToken } from '../../../redux/authorization/selector'
+import { IPrivateProps} from '../../../../typescript/components/Routes/interfaces';
+import { getToken } from '../../../../redux/authorization/selector'
 
 function PrivateRoute({ children, ...routeProps }: IPrivateProps) {
   const token = useSelector(getToken)

src/components/Routes/PublicRoute/PublicRoute.tsx

@@ -1,8 +1,8 @@
 import { Route, Redirect } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 
-import { IPublicProps } from '../../../typescript/components/Routes/interfaces';
-import { getToken } from '../../../redux/authorization/selector'
+import { IPublicProps } from '../../../../typescript/components/Routes/interfaces';
+import { getToken } from '../../../../redux/authorization/selector'
 
 function PublicRoute({
   children,