done header in right side

package-lock.json

@@ -8,9 +8,11 @@
       "name": "react-21-22",
       "version": "0.1.0",
       "dependencies": {
+        "@date-io/date-fns": "^1.3.13",
         "@emotion/react": "^11.7.1",
         "@emotion/styled": "^11.6.0",
         "@material-ui/core": "^4.11.3",
+        "@material-ui/pickers": "^3.3.10",
         "@mui/icons-material": "^5.3.1",
         "@mui/material": "^5.4.0",
         "@reduxjs/toolkit": "^1.5.0",
@@ -1259,6 +1261,22 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
       "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
     },
+    "node_modules/@date-io/core": {
+      "version": "1.3.13",
+      "resolved": "https://registry.npmjs.org/@date-io/core/-/core-1.3.13.tgz",
+      "integrity": "sha512-AlEKV7TxjeK+jxWVKcCFrfYAk8spX9aCyiToFIiLPtfQbsjmRGLIhb5VZgptQcJdHtLXo7+m0DuurwFgUToQuA=="
+    },
+    "node_modules/@date-io/date-fns": {
+      "version": "1.3.13",
+      "resolved": "https://registry.npmjs.org/@date-io/date-fns/-/date-fns-1.3.13.tgz",
+      "integrity": "sha512-yXxGzcRUPcogiMj58wVgFjc9qUYrCnnU9eLcyNbsQCmae4jPuZCDoIBR21j8ZURsM7GRtU62VOw5yNd4dDHunA==",
+      "dependencies": {
+        "@date-io/core": "^1.3.13"
+      },
+      "peerDependencies": {
+        "date-fns": "^2.0.0"
+      }
+    },
     "node_modules/@emotion/babel-plugin": {
       "version": "11.7.2",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.7.2.tgz",
@@ -2275,6 +2293,26 @@
       "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz",
       "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA=="
     },
+    "node_modules/@material-ui/pickers": {
+      "version": "3.3.10",
+      "resolved": "https://registry.npmjs.org/@material-ui/pickers/-/pickers-3.3.10.tgz",
+      "integrity": "sha512-hS4pxwn1ZGXVkmgD4tpFpaumUaAg2ZzbTrxltfC5yPw4BJV+mGkfnQOB4VpWEYZw2jv65Z0wLwDE/piQiPPZ3w==",
+      "dependencies": {
+        "@babel/runtime": "^7.6.0",
+        "@date-io/core": "1.x",
+        "@types/styled-jsx": "^2.2.8",
+        "clsx": "^1.0.2",
+        "react-transition-group": "^4.0.0",
+        "rifm": "^0.7.0"
+      },
+      "peerDependencies": {
+        "@date-io/core": "^1.3.6",
+        "@material-ui/core": "^4.0.0",
+        "prop-types": "^15.6.0",
+        "react": "^16.8.0 || ^17.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0"
+      }
+    },
     "node_modules/@material-ui/styles": {
       "version": "4.11.3",
       "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.3.tgz",
@@ -3424,6 +3462,14 @@
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.0.tgz",
       "integrity": "sha512-RJJrrySY7A8havqpGObOB4W92QXKJo63/jFLLgpvOtsGUqbQZ9Sbgl35KMm1DjC6j7AvmmU2bIno+3IyEaemaw=="
     },
+    "node_modules/@types/styled-jsx": {
+      "version": "2.2.9",
+      "resolved": "https://registry.npmjs.org/@types/styled-jsx/-/styled-jsx-2.2.9.tgz",
+      "integrity": "sha512-W/iTlIkGEyTBGTEvZCey8EgQlQ5l0DwMqi3iOXlLs2kyBwYTXHKEiU6IZ5EwoRwngL8/dGYuzezSup89ttVHLw==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/tapable": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.6.tgz",
@@ -18091,6 +18137,17 @@
       "resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz",
       "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM="
     },
+    "node_modules/rifm": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/rifm/-/rifm-0.7.0.tgz",
+      "integrity": "sha512-DSOJTWHD67860I5ojetXdEQRIBvF6YcpNe53j0vn1vp9EUb9N80EiZTxgP+FkDKorWC8PZw052kTF4C1GOivCQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
     "node_modules/rimraf": {
       "version": "2.6.3",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
@@ -23658,6 +23715,19 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
       "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
     },
+    "@date-io/core": {
+      "version": "1.3.13",
+      "resolved": "https://registry.npmjs.org/@date-io/core/-/core-1.3.13.tgz",
+      "integrity": "sha512-AlEKV7TxjeK+jxWVKcCFrfYAk8spX9aCyiToFIiLPtfQbsjmRGLIhb5VZgptQcJdHtLXo7+m0DuurwFgUToQuA=="
+    },
+    "@date-io/date-fns": {
+      "version": "1.3.13",
+      "resolved": "https://registry.npmjs.org/@date-io/date-fns/-/date-fns-1.3.13.tgz",
+      "integrity": "sha512-yXxGzcRUPcogiMj58wVgFjc9qUYrCnnU9eLcyNbsQCmae4jPuZCDoIBR21j8ZURsM7GRtU62VOw5yNd4dDHunA==",
+      "requires": {
+        "@date-io/core": "^1.3.13"
+      }
+    },
     "@emotion/babel-plugin": {
       "version": "11.7.2",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.7.2.tgz",
@@ -24459,6 +24529,19 @@
         }
       }
     },
+    "@material-ui/pickers": {
+      "version": "3.3.10",
+      "resolved": "https://registry.npmjs.org/@material-ui/pickers/-/pickers-3.3.10.tgz",
+      "integrity": "sha512-hS4pxwn1ZGXVkmgD4tpFpaumUaAg2ZzbTrxltfC5yPw4BJV+mGkfnQOB4VpWEYZw2jv65Z0wLwDE/piQiPPZ3w==",
+      "requires": {
+        "@babel/runtime": "^7.6.0",
+        "@date-io/core": "1.x",
+        "@types/styled-jsx": "^2.2.8",
+        "clsx": "^1.0.2",
+        "react-transition-group": "^4.0.0",
+        "rifm": "^0.7.0"
+      }
+    },
     "@material-ui/styles": {
       "version": "4.11.3",
       "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.3.tgz",
@@ -25321,6 +25404,14 @@
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.0.tgz",
       "integrity": "sha512-RJJrrySY7A8havqpGObOB4W92QXKJo63/jFLLgpvOtsGUqbQZ9Sbgl35KMm1DjC6j7AvmmU2bIno+3IyEaemaw=="
     },
+    "@types/styled-jsx": {
+      "version": "2.2.9",
+      "resolved": "https://registry.npmjs.org/@types/styled-jsx/-/styled-jsx-2.2.9.tgz",
+      "integrity": "sha512-W/iTlIkGEyTBGTEvZCey8EgQlQ5l0DwMqi3iOXlLs2kyBwYTXHKEiU6IZ5EwoRwngL8/dGYuzezSup89ttVHLw==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/tapable": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.6.tgz",
@@ -37382,6 +37473,14 @@
       "resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz",
       "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM="
     },
+    "rifm": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/rifm/-/rifm-0.7.0.tgz",
+      "integrity": "sha512-DSOJTWHD67860I5ojetXdEQRIBvF6YcpNe53j0vn1vp9EUb9N80EiZTxgP+FkDKorWC8PZw052kTF4C1GOivCQ==",
+      "requires": {
+        "@babel/runtime": "^7.3.1"
+      }
+    },
     "rimraf": {
       "version": "2.6.3",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",

package.json

@@ -4,9 +4,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@date-io/date-fns": "^1.3.13",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
     "@material-ui/core": "^4.11.3",
+    "@material-ui/pickers": "^3.3.10",
     "@mui/icons-material": "^5.3.1",
     "@mui/material": "^5.4.0",
     "@reduxjs/toolkit": "^1.5.0",

src/App.tsx

@@ -2,6 +2,8 @@ import { lazy, Suspense , useEffect } from 'react';
 import { BrowserRouter, Switch } from 'react-router-dom';
 import { ToastContainer } from 'react-toastify';
 import { useSelector, useDispatch } from 'react-redux';
+import { MuiPickersUtilsProvider } from '@material-ui/pickers';
+import DateFnsUtils from '@date-io/date-fns';
 
 import s from './App.module.css';
 import { getToken } from './redux/authorization/selector'
@@ -47,6 +49,7 @@ function App() {
 
   return (
     <div className={s.appWrapper}>
+      <MuiPickersUtilsProvider utils={DateFnsUtils}>
       <Suspense fallback={<Loader />}>
         <BrowserRouter>
           <Switch>
@@ -71,6 +74,7 @@ function App() {
         draggable
         pauseOnHover
       />
+      </MuiPickersUtilsProvider>
     </div>
   );
 }

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

@@ -1,6 +1,6 @@
 export  const contacts = [
     {
-        avatarUrl: '',
+        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
         name: 'Grigore',
         lastName:'Helena',
         message: 'Hello'

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

@@ -32,48 +32,9 @@ const useStyles = makeStyles({
     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 = () => {
@@ -98,11 +59,10 @@ const  ChatsList = () => {
 
   return (
     <List
-      className={classes.list} component="nav"
+        className={classes.list} component="nav"
         aria-label="main mailbox folders">
-         {contacts && contacts.map(({name,lastName,avatarUrl,message}: any,i:number) =>
+         {contacts && contacts.map(({name,lastName,avatarUrl}: any,i:number) =>
           <ListItemButton
-          className={classes.listItem}
           key={shortid.generate()}
           selected={selectedIndex === i}
           onClick={(e) => handleListItemClick(e, i)}

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

@@ -18,19 +18,16 @@ import Modal from '../../../reusableComponents/Modal'
 
 const useStyles = makeStyles({
     container: {
-        position: 'absolute',
-        width: 270,
-        maxWidth: '100%',
-        top: 60,
-        left: 15,
-        zIndex: 10,
-        visibility: 'visible',
+      position: 'absolute',
+      width: 270,
+      maxWidth: '100%',
+      top: 60,
+      left: 15,
+      zIndex: 10,
+      visibility: 'visible',
     },
     list: {
       background:'#fdfdfd'
-    },
-      listDone: {
-        color: '#0dc706'
     },
     listItemLast: {
       textAlign: 'center',
@@ -71,7 +68,7 @@ const MenuBar = ({handleSelectedMenu}:IContactsList) => {
           <ListItemIcon className={classes.listIcon}>
             <PermContactCalendarIcon fontSize="medium" />
           </ListItemIcon>
-          <ListItemText className={classes.listDone}>Contacts</ListItemText>
+          <ListItemText>Contacts</ListItemText>
         </MenuItem>        
         <MenuItem onClick={() => handleSelectedMenu(3)}>
           <ListItemIcon className={classes.listIcon}>

src/components/HomePage/LeftBar/SearchBar/SearchLists/index.tsx

@@ -4,7 +4,8 @@ import React, { useState } from 'react';
 import { makeStyles } from '@material-ui/core'
 
 import ChatListRecent from '../ChatListRecent'
-import HasNotDoneComponentYet from '../../../../reusableComponents/HasNotDoneComponentYet' 
+import NotDone from '../../../../reusableComponents/NotDone'
+
 const useStyles = makeStyles({
     bottomNavigation: {
         boxShadow: '0px 1px 1px 1px rgba(120,120,120,0.63)',
@@ -41,11 +42,11 @@ const SearchLists = () => {
             <BottomNavigationAction label={<Label/>} icon={<Icon name='Voice' />}  />
         </BottomNavigation>
             {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'/>}
+            {isActive === 1 && <NotDone name='Media'/>}
+            {isActive === 2 && <NotDone name='Links'/>}
+            {isActive === 3 && <NotDone name='Files'/>}
+            {isActive === 4 && <NotDone name='Music'/>}
+            {isActive === 5 && <NotDone name='Voice'/>}
     </>      
     )
 }

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

@@ -9,6 +9,7 @@ import GroupIcon from '@mui/icons-material/Group';
 import GroupsIcon from '@mui/icons-material/Groups';
 import ModeEditOutlineOutlinedIcon from '@mui/icons-material/ModeEditOutlineOutlined';
 import CloseIcon from '@mui/icons-material/Close';
+import PersonAddAltIcon from '@mui/icons-material/PersonAddAlt';
 
 const StyledMenu = styled((props:any) => (
   <Menu
@@ -56,9 +57,6 @@ const useStyles = makeStyles({
         visibility: 'visible',
         cursor:'pointer'
   },
-  activeIcon: {
-    backgroundColor:'#12f11d'
-  }
 })
 
 interface ISmallMenuBar {
@@ -109,12 +107,18 @@ const  SmallMenuBar = ({handleSelectedMenu,setIsMenuSm}:ISmallMenuBar) => {
           handleClose(2);
           handleSelectedMenu(13)
         }}>
-            <PersonIcon className={classes.activeIcon} />
+            <PersonIcon/>
             New Message
-          </MenuItem>
-        </StyledMenu>
+        </MenuItem>
+        <MenuItem  onClick={() => {
+          handleClose(2);
+          handleSelectedMenu(14)
+        }}>
+            <PersonAddAltIcon/>
+            Add to contacts
+         </MenuItem>        
+       </StyledMenu>    
     </div>
   );
 }
-
 export default SmallMenuBar

src/components/HomePage/LeftBar/index.tsx

@@ -8,7 +8,7 @@ import SearchBar from './SearchBar'
 import ChatsList from './ChatsList'
 import MenuBar from './MenuBar'
 import ContactsList from './ContactsList'
-import HasNotDoneComponentYet from '../../reusableComponents/HasNotDoneComponentYet'
+import NotDone from '../../reusableComponents/NotDone'
 
 const LeftBar = () => {
   const [isOpen, setIsOpen] = useState<boolean>(false)
@@ -69,19 +69,19 @@ const LeftBar = () => {
           setIsMenuSm={setIsMenuSm} />}
         {isMenu && modalRoot.current &&
           createPortal(<MenuBar handleSelectedMenu={handleSelectedMenu} />, modalRoot.current)}
-        {iMenu === 0 && <HasNotDoneComponentYet name='Saved Messages' />}
-        {iMenu === 1 && <HasNotDoneComponentYet name='Archive Chats' />}
+        {iMenu === 0 && <NotDone name='Saved Messages' />}
+        {iMenu === 1 && <NotDone 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 === 3 && <NotDone name='Settings' />}
+        {iMenu === 4 && <NotDone name='Night Mode' />}
+        {iMenu === 5 && <NotDone name='Animations' />}
+        {iMenu === 6 && <NotDone name='Telegram Feature' />}
+        {iMenu === 7 && <NotDone name='Report Bag' />}
+        {iMenu === 8 && <NotDone name='Switch to K Version' />}
+        {iMenu === 9 && <NotDone name='Switch to Old Version' />}
+        {iMenu === 10 && <NotDone name='Telegram WebZ 1.33.4' />}
+        {iMenu === 11 && <NotDone name='New Channel' />}
+        {iMenu === 12 && <NotDone name='New Group' />}
         {iMenu === 13 && <ContactsList />}
     </Grid>
     )

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

@@ -0,0 +1,98 @@
+import  { useState } from 'react';
+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 '../../'
+
+const StyledMenu = styled((props:any) => (
+  <Menu
+    elevation={0}
+    anchorOrigin={{
+      vertical: 'top',
+      horizontal: 'right',
+    }}
+    transformOrigin={{
+      vertical: 'bottom',
+      horizontal: 'right',
+    }}
+    {...props}
+  />
+))(({ theme }:any) => ({
+  '& .MuiPaper-root': {
+    borderRadius: 10,
+    marginTop: theme.spacing(-2),
+    minWidth: 220,
+    color:
+      theme.palette.mode === 'light' ? 'rgb(55, 65, 81)' : theme.palette.grey[500],
+    boxShadow:
+      'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px',
+    '& .MuiMenu-list': {
+      padding: '14px 14px',
+    },
+    '& .MuiMenuItem-root': {
+      marginBottom: theme.spacing(1),
+      '& .MuiSvgIcon-root': {
+        fontSize: 21,
+        color: theme.palette.text.secondary,
+        marginRight: theme.spacing(4),
+      }
+    },
+  },
+}));
+
+
+const  MenuList = ({handleIsOpen}:IHandleIsOpen) => {
+  const [anchorEl, setAnchorEl] = useState<any>(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>): void => {
+    handleIsOpen('menu')
+    setAnchorEl(e.currentTarget)
+  }
+
+  const handleClose = (i:number|null):void => {
+    console.log('chosen one element from small menu by id', i)
+    handleIsOpen(null)
+    setAnchorEl(null)
+  }
+
+  return (
+    <>
+      <IconButton onClick={handleClick} aria-label="delete" size="medium">
+        <MoreVertIcon fontSize='medium'/>
+      </IconButton>
+      <StyledMenu
+        id="demo-positioned-menu"
+        aria-labelledby="demo-positioned-button"
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+      >
+        <MenuItem onClick={() =>  handleClose(0)}>
+            <PersonAddAltIcon />
+            Add to contacts
+          </MenuItem>
+        <MenuItem onClick={() =>  handleClose(1)}>
+            <VolumeOffIcon />
+            Mute
+          </MenuItem>
+        <MenuItem onClick={() =>  handleClose(2)}>
+            <CheckBoxIcon/>
+            Select messages
+        </MenuItem>
+        <MenuItem onClick={() =>  handleClose(3)}>
+            <DeleteOutlineIcon/>
+            Delete chat
+        </MenuItem>        
+      </StyledMenu>
+    </>
+  );
+}
+
+export default MenuList

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

@@ -0,0 +1,27 @@
+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 MenuList from './MenuList'
+import { IHandleIsOpen } from '../'
+
+const useStyles = makeStyles({
+  container: {
+    marginLeft:20
+  }
+})
+
+const Buttons = ({handleIsOpen}:IHandleIsOpen) => {
+  const classes = useStyles() 
+  return (
+    <Stack className={classes.container} direction="row" spacing={1}>
+      <IconButton onClick={() => handleIsOpen('search')} aria-label="delete" size="medium">
+        <SearchIcon fontSize='medium'/>
+      </IconButton>
+      <MenuList handleIsOpen={handleIsOpen}/>
+    </Stack>
+  );
+}
+
+export default Buttons

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

@@ -0,0 +1,40 @@
+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 '../'
+
+const contact = [{
+  avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+  name: 'Grigore',
+  lastName:'Helena',
+  message: 'Hello'
+}]
+
+const  Credentials = ({handleIsOpen}:IHandleIsOpen) => {
+
+  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)
+  const {avatarUrl,name,lastName }:any = contact[0]
+  return (
+    <ListItemButton onClick={() => handleIsOpen('credentials')}>
+      <ListItemIcon >
+        <Avatar alt={name} src={avatarUrl?avatarUrl:undefined}
+              sx={{ background: '#f0c712', width: 44, height: 44 }}>
+              {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
+          </Avatar>
+      </ListItemIcon> 
+      <ListItemText primary={`${firstLetter(name)}${slicedWord(name, 15, 1)}
+            ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`} secondary={data} />        
+    </ListItemButton>
+  );
+}
+
+export default Credentials

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

@@ -0,0 +1,32 @@
+import Stack from '@mui/material/Stack';
+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 '../../..'
+
+const useStyles = makeStyles({
+  container: {
+    borderLeft: 'solid 0.5px #9c9c9c',
+    paddingLeft: 10,
+    paddingBottom: 3,
+    width:482
+  },
+})
+
+const ToolBar = ({handleIsOpen}:IHandleIsOpen) => {
+  const classes = useStyles()
+  return (
+    <Stack className={classes.container} direction="row" spacing={21}>
+      <IconButton onClick={() => handleIsOpen(null)} aria-label="delete" size="medium">
+        <CloseIcon fontSize='medium'/>
+      </IconButton>
+      <Typography variant="h6" color="initial">Profile</Typography>
+      <IconButton  aria-label="delete" size="medium">
+        <PersonAddAltIcon fontSize='medium'/>
+      </IconButton>
+    </Stack>
+    )
+}
+
+export default ToolBar

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

@@ -0,0 +1,219 @@
+export  const chats = [
+    {
+        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/RightBar/HeaderBar/RightLists/CredentialsList/index.tsx

@@ -0,0 +1,32 @@
+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,
+        borderLeft: 'solid 0.5px #9c9c9c',
+        maxHeight: '905px',
+        minHeight: '905px',
+        overflowY: 'scroll',
+    }
+})
+
+const CredentialsList= ({handleIsOpen}:IHandleIsOpen) => {
+  const classes = useStyles()
+    return (
+<div>
+     <ToolBar handleIsOpen={handleIsOpen} />
+     <div className={classes.listAbsolute}>
+        {chats.map(() =>
+        <NotDone name='Profile credentials' />)}
+     </div>
+</div>
+    )
+}
+
+export default CredentialsList

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

@@ -0,0 +1,35 @@
+import { DatePicker } from "@material-ui/pickers";
+import { makeStyles } from '@material-ui/core'
+
+interface IStaticDatePicker {
+   date: Date,
+   changeDate: React.Dispatch<React.SetStateAction<any>>,
+}
+
+const useStyles = makeStyles({
+    container: {
+        position: 'absolute',
+        left: 1369,
+        top:1,
+        width: 30,
+        cursor: 'pointer',
+    }
+})
+
+const StaticDatePicker = ({ date, changeDate }: IStaticDatePicker) => {
+    const classes = useStyles()
+return (
+    <DatePicker
+        className={classes.container}
+        autoOk
+        inputVariant='outlined'
+        orientation="portrait"
+        variant="dialog"
+        openTo="date"
+        value={date}
+        onChange={changeDate}
+        />
+  );
+};
+
+export default StaticDatePicker;

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

@@ -0,0 +1,93 @@
+import { useState } from "react";
+import InputBase from '@mui/material/InputBase';
+import Stack from '@mui/material/Stack';
+import IconButton from '@mui/material/IconButton';
+import SearchIcon from '@mui/icons-material/Search';
+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 StaticDatePicker from './DataPicker'
+import { IHandleIsOpen } from '../../../'
+
+const SearchBar = styled('div')(({ theme }:any) => ({
+  position: 'relative',
+  borderRadius: '20px',
+  backgroundColor: '#f1f0f0',
+  '&:hover': {
+    backgroundColor: '#f5f5f5',
+    color:'#2184f7',
+  }, 
+  marginLeft: 0,
+  width: '100%',
+  [theme.breakpoints.up('sm')]: {
+    marginLeft: theme.spacing(1),
+    width: 'auto',
+  },
+}));
+
+const SearchIconWrapper = styled('div')(({ theme }) => ({
+  padding: theme.spacing(0, 2),
+  height: '100%',
+  position: 'absolute',
+  pointerEvents: 'none',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+}));
+
+const StyledInputBase = styled(InputBase)(({ theme }) => ({
+    color: 'inherit',
+  '& .MuiInputBase-input': { 
+    fontWeight: 500,
+    borderRadius: '20px',
+    padding: theme.spacing(1, 1, 1, 0),
+    paddingLeft: `calc(1em + ${theme.spacing(4)})`,
+    transition: theme.transitions.create('width'),
+    width: '100%',
+    [theme.breakpoints.up('sm')]: {
+      width: '35ch',
+      '&:focus': {
+        outline: '2px solid  #2184f7',
+        color: '#2184f7'
+      },
+    },
+  },
+}));
+
+const useStyles = makeStyles({
+  container: {
+    borderLeft: 'solid 0.5px #9c9c9c',
+    paddingLeft: 10,
+    paddingBottom:3
+  },
+})
+
+const Search = ({handleIsOpen}:IHandleIsOpen) => {
+  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">
+        <CloseIcon fontSize='medium'/>
+      </IconButton>
+      <SearchBar>
+          <SearchIconWrapper>
+              <SearchIcon />
+          </SearchIconWrapper>
+          <StyledInputBase
+             placeholder="Search"
+            inputProps={{ 'aria-label': 'search' }}
+          />
+      </SearchBar>      
+      <IconButton  aria-label="delete" size="medium">
+        <CalendarTodayIcon fontSize='medium'/>
+      </IconButton>
+      <StaticDatePicker date={date} changeDate={changeDate}  />
+    </Stack>
+    )
+}
+
+export default Search

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

@@ -0,0 +1,219 @@
+export  const chats = [
+    {
+        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/RightBar/HeaderBar/RightLists/SearchList/index.tsx

@@ -0,0 +1,34 @@
+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,
+        borderLeft: 'solid 0.5px #9c9c9c',
+        maxHeight: '905px',
+        minHeight: '905px',
+        overflowY: 'scroll',
+    }
+})
+
+const SearchList= ({handleIsOpen}:IHandleIsOpen) => {
+  const classes = useStyles()
+    return (
+<div>
+     <Search handleIsOpen={handleIsOpen} />
+     <div className={classes.listAbsolute}>
+        {chats.map(() =>
+        <NotDone name='Search List'/>)}
+     </div>
+</div>
+    )
+}
+
+export default SearchList

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

@@ -0,0 +1,14 @@
+import SearchList from './SearchList'
+import CredentialsList from './CredentialsList'
+import { IHandleOpen } from '../'
+
+const RightLists = ({ isOpen, handleIsOpen }: IHandleOpen) => {
+  return (
+    <div>
+      {isOpen === 'credentials' &&<CredentialsList handleIsOpen={handleIsOpen}/>}
+      {isOpen === 'search' && <SearchList handleIsOpen={handleIsOpen} />}
+  </div>
+   )
+}
+
+export default RightLists

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

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import Toolbar from '@mui/material/Toolbar'
+import AppBar from '@mui/material/AppBar';
+import { makeStyles } from '@material-ui/core'
+
+import RightLists from './RightLists'
+import Credentials from './Credentials'
+import Buttons from './Buttons'
+
+const useStyles = makeStyles({
+  toolBar: {
+    color: '#6e6d6d',
+    display: 'flex',
+    justifyContent: 'space-between',
+    backgroundColor: '#ffffff',
+  },
+})
+
+
+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}/>
+        </Toolbar>
+      </AppBar>        
+    )
+}
+
+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,20 +1,25 @@
-import Typography from '@mui/material/Typography'
+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'
+
 const useStyles = makeStyles({
-    chat: {
-        minHeight: '100%',
-        background: 'linear-gradient(to bottom right, #e7f097 , #b1e667,#f4f75e)',
-    },
+  container: {
+    minHeight: '100vh',
+    maxHeight: '100vh',
+    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>
+      <Grid item lg={9} className={classes.container}>
+          <HeaderBar/>
+      </Grid>
     )
 }
 

src/components/HomePage/index.tsx

@@ -1,10 +1,18 @@
 import Grid from '@mui/material/Grid'
 import LeftBar from './LeftBar'
 import RightBar from './RightBar'
+import { makeStyles } from '@material-ui/core'
 
+const useStyles = makeStyles({
+    container: {
+        minHeight: '100vh',
+        maxHeight: '100vh',
+    },
+})
 const HomePage = () => {
+   const classes = useStyles()
     return (
-       <Grid container spacing={0} >
+       <Grid className={classes.container} container spacing={0} >
           <LeftBar/>
           <RightBar/>
        </Grid>

src/components/reusableComponents/HasNotDoneComponentYet/index.tsx

@@ -1,21 +0,0 @@
-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/reusableComponents/NotDone/index.tsx

@@ -0,0 +1,17 @@
+import Alert from '@mui/material/Alert';
+import AlertTitle from '@mui/material/AlertTitle';
+import Stack from '@mui/material/Stack';
+
+
+const NotDone = ({ name }: { name: string }) => {
+return (
+    <Stack sx={{ width: '100%' }} spacing={2}>
+      <Alert severity="warning">
+        <AlertTitle>Warning</AlertTitle>
+        The component has not done yet — <strong>{`${name}!`}</strong>
+      </Alert>
+    </Stack>
+  );
+}
+
+export default NotDone

src/index.css

@@ -4,6 +4,7 @@ html {
 }
 
 body {
+  background-color: white;
   min-width: 100vw;
   min-height: 100vh;
   overflow: hidden;