Kezdőlap Felfedezés Súgó
Bejelentkezés
Hryhorii
/
FINAL-PROJECT-FRONT
Figyelés 1
Kedvenc 1
Másolás 0
Fájlok Problémák 0 Beolvasztási kérések 0 Wiki
Forráskód Böngészése

done

unknown 3 éve
szülő
a42fb32f85
commit
915411cfd8
13 módosított fájl, 620 hozzáadás és 157 törlés
Osztott Nézet Diff Statisztika Mutatása
  1. 1 1
      .eslintcache
  2. 1 23
      public/index.html
  3. 0 3
      src/components/AuthPage/SMSCode/index.tsx
  4. 9 7
      src/components/HomePage/ContactsBar/MenuBar/index.tsx
  5. 38 0
      src/components/HomePage/ContactsBar/ChatsList/Modal/index.tsx
  6. 106 0
      src/components/HomePage/ContactsBar/ChatsList/SmallMenuBar/index.tsx
  7. 189 53
      src/components/HomePage/ContactsBar/ChatsList/chats.tsx
  8. 17 6
      src/components/HomePage/ContactsBar/ChatsList/index.tsx
  9. 6 5
      src/components/HomePage/ContactsBar/SearchBar/ChatListRecent/index.tsx
  10. 205 21
      src/components/HomePage/ContactsBar/SearchBar/ChatListRecent/user.tsx
  11. 48 29
      src/components/HomePage/ContactsBar/index.tsx
  12. 0 8
      src/index.css
  13. 0 1
      src/index.tsx

A különbségek nem kerülnek megjelenítésre, a fájl túl nagy
+ 1 - 1
.eslintcache


+ 1 - 23
public/index.html
Fájl Megtekintése 

@@ -10,34 +10,12 @@
 
       content="Web site created using create-react-app"
 
     />
 
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 
-    <!--
 
-      manifest.json provides metadata used when your web app is installed on a
 
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
 
-    -->
 
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
-    <!--
 
-      Notice the use of %PUBLIC_URL% in the tags above.
 
-      It will be replaced with the URL of the `public` folder during the build.
 
-      Only files inside the `public` folder can be referenced from the HTML.
 
-
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
 
-      work correctly both with client-side routing and a non-root public URL.
 
-      Learn how to configure a non-root public URL by running `npm run build`.
 
-    -->
 
     <title>Telegram</title>
 
   </head>
 
   <body>
 
     <noscript>You need to enable JavaScript to run this app.</noscript>
 
     <div id="root"></div>
 
-    <!--
 
-      This HTML file is a template.
 
-      If you open it directly in the browser, you will see an empty page.
 
-
 
-      You can add webfonts, meta tags, or analytics to this file.
 
-      The build step will place the bundled scripts into the <body> tag.
 
-
 
-      To begin the development, run `npm start` or `yarn start`.
 
-      To create a production bundle, use `npm run build` or `yarn build`.
 
-    -->
 
+    <div id='modal-root'></div>
 
   </body>
 
 </html>

+ 0 - 3
src/components/AuthPage/SMSCode/index.tsx
Fájl Megtekintése 

@@ -4,9 +4,6 @@ import ModeEditOutlineOutlinedIcon from '@mui/icons-material/ModeEditOutlineOutl
 
 import React from 'react';
 
 
 
-
 
-
 
-
 
 const useStyles = makeStyles({
 
   container: {
 
     display: 'flex',

+ 9 - 7
src/components/HomePage/ContactsBar/MenuBar/index.tsx
Fájl Megtekintése 

@@ -14,6 +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'
 
 
 const useStyles = makeStyles({
 
     container: {
 
@@ -23,14 +24,13 @@ const useStyles = makeStyles({
 
         top: 60,
 
         left: 15,
 
         zIndex: 10,
 
-        background: '#43a047',
 
         visibility: 'visible',
 
     },
 
     list: {
 
-    background:'#fdfdfd'
 
+      background:'#fdfdfd'
 
     },
 
     listItemLast: {
 
-        textAlign: 'center',
 
+      textAlign: 'center',
 
     },
 
     listIcon: {
 
         marginRight: 15,
 
@@ -44,7 +44,8 @@ const useStyles = makeStyles({
 
 const MenuBar = () => {
 
     const classes = useStyles()
 
   return (
 
-    <Paper className={classes.container}>
 
+    <Modal> 
+      <Paper className={classes.container}>
 
       <MenuList className={classes.list}>
 
         <MenuItem>
 
           <ListItemIcon className={classes.listIcon}>
 
@@ -107,11 +108,12 @@ const MenuBar = () => {
 
           <ListItemText>Switch to Old Version</ListItemText>
 
         </MenuItem>
 
         <Divider />
 
-        <MenuItem className={classes.listItemLast}>
 
-          <ListItemText>Telegram WebZ 1.32.3</ListItemText>
 
+        <MenuItem >
 
+          <ListItemText secondary='Telegram WebZ 1.32.3' className={classes.listItemLast}/>
 
         </MenuItem>
 
       </MenuList>
 
-    </Paper>
 
+      </Paper>
 
+    </Modal> 
   );
 
 }

+ 38 - 0
src/components/HomePage/ContactsBar/ChatsList/Modal/index.tsx
Fájl Megtekintése 

@@ -0,0 +1,38 @@
 
+import Divider from '@mui/material/Divider';
 
+import Paper from '@mui/material/Paper';
 
+import MenuList from '@mui/material/MenuList';
 
+import MenuItem from '@mui/material/MenuItem';
 
+import ListItemText from '@mui/material/ListItemText';
 
+import ListItemIcon from '@mui/material/ListItemIcon';
 
+import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder';
 
+import ArchiveIcon from '@mui/icons-material/Archive';
 
+import PermContactCalendarIcon from '@mui/icons-material/PermContactCalendar';
 
+import SettingsIcon from '@mui/icons-material/Settings';
 
+import Brightness3Icon from '@mui/icons-material/Brightness3';
 
+import AnimationIcon from '@mui/icons-material/Animation';
 
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 
+import BugReportIcon from '@mui/icons-material/BugReport';
 
+import { makeStyles } from '@material-ui/core'
 
+import React from 'react';
 
+
 
+const useStyles = makeStyles({
 
+    overlay: {
 
+        position: 'fixed',
 
+        top: 0,
 
+        left: 0,
 
+        width: '100vw',
 
+        height: '100vh',
 
+        zIndex:100
 
+    }
 
+})
 
+
 
+const Modal = ({children}:{children:React.ReactNode}) => {
 
+    const classes = useStyles()
 
+  return (
 
+    <div className={classes.overlay} id='overlay'>
 
+         {children} 
+    </div>
 
+  );
 
+}
 
+
 
+export default Modal

+ 106 - 0
src/components/HomePage/ContactsBar/ChatsList/SmallMenuBar/index.tsx
Fájl Megtekintése 

@@ -0,0 +1,106 @@
 
+import { makeStyles } from '@material-ui/core'
 
+import React, { useState } from 'react';
 
+import { styled } from '@mui/material/styles';
 
+import Avatar from '@mui/material/Avatar';
 
+import Menu from '@mui/material/Menu';
 
+import MenuItem from '@mui/material/MenuItem';
 
+import PersonIcon from '@mui/icons-material/Person';
 
+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';
 
+
 
+
 
+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}
 
+    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  SmallMenuBar = () => {
 
+  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)
 
+    setAnchorEl(null)
 
+  }
 
+
 
+  return (
 
+    <div className={classes.container}>
 
+        <Avatar  onClick={handleClick} sx={{
 
+            bgcolor: 'rgb(41, 139, 231)',
 
+            width: 56, height: 56 }}>
 
+          {!anchorEl?<ModeEditOutlineOutlinedIcon />:<CloseIcon/>}
 
+      </Avatar>
 
+      <StyledMenu
 
+        id="demo-positioned-menu"
 
+        aria-labelledby="demo-positioned-button"
 
+        anchorEl={anchorEl}
 
+        open={open}
 
+        onClose={handleClose}
 
+      >
 
+          <MenuItem onClick={() => handleClose(0)}>
 
+            <GroupsIcon />
 
+            New Channel
 
+          </MenuItem>
 
+          <MenuItem onClick={() => handleClose(1)}>
 
+            <GroupIcon />
 
+            New Group
 
+          </MenuItem>
 
+          <MenuItem onClick={() => handleClose(2)}>
 
+            <PersonIcon  />
 
+            New Message
 
+          </MenuItem>
 
+        </StyledMenu>
 
+    </div>
 
+  );
 
+}
 
+
 
+export default SmallMenuBar

+ 189 - 53
src/components/HomePage/ContactsBar/ChatsList/chats.tsx
Fájl Megtekintése 

@@ -1,83 +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: '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: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
 
-        name: 'gh',
 
-        message: 'dddddddddddddd'
 
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
 
+        lastName:'Wedrr',
 
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
 
     },
 
-        {
 
-        avatarUrl: null,
 
-        name: 'jjjjj',
 
-        message: 'dddddddddddddd'
 
+    {
 
+        avatarUrl: '',
 
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
 
+        lastName:'Wedrr',
 
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
 
+    },
 
+    {
 
+        avatarUrl: '',
 
+        name: 'hrigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
 
+        lastName:'uedrr',
 
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
 
+    },
 
+    {
 
+        avatarUrl: '',
 
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
 
+        lastName:'kjedrr',
 
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
 
     },
 
-            {
 
-        avatarUrl: null,
 
-        name: 'gh',
 
-        message: 'dddddddddddddd'
 
+    {
 
+        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: null,
 
-        name: 'jlllll',
 
-        message: 'dddddddddddddd'        
+    {
 
+        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: 'oooooo',
 
-        message: 'dddddddddddddd'
 
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
 
+        lastName:'Wedrr',
 
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
 
     },
 
-                        {
 
-        avatarUrl: null,
 
-        name: 'ee',
 
-        message: 'dddddddddddddd'
 
+    {
 
+        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: null,
 
-        name: 'v',
 
-        message: 'dddddddddddddd'
 
+    {
 
+        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: 'gh',
 
-        message: 'dddddddddddddd'
 
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
 
+        lastName:'Wedrr',
 
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
 
     },
 
-        {
 
-        avatarUrl: null,
 
-        name: 'jjjjj',
 
-        message: 'dddddddddddddd'
 
+    {
 
+        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: null,
 
-        name: 'gh',
 
-        message: 'dddddddddddddd'
 
+    {
 
+        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: null,
 
-        name: 'jlllll',
 
-        message: 'dddddddddddddd'        
+    {
 
+        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: 'oooooo',
 
-        message: 'dddddddddddddd'
 
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
 
+        lastName:'Wedrr',
 
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
 
     },
 
-                        {
 
-        avatarUrl: null,
 
-        name: 'ee',
 
-        message: 'dddddddddddddd'
 
+    {
 
+        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: null,
 
-        name: 'v',
 
-        message: 'dddddddddddddd'
 
-    }                            
+    {
 
+        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'
 
+    },    
 ]

+ 17 - 6
src/components/HomePage/ContactsBar/ChatsList/index.tsx
Fájl Megtekintése 

@@ -79,7 +79,11 @@ const useStyles = makeStyles({
 
   }
 
 })
 
 
-const  ChatsList = () => {
 
+interface IChatListP{
 
+  handleEnterOpenMenuSm: (e: any) => void,
 
+  handleLeaveCloseMenuSm: (e: any) => void,
 
+}
 
+const  ChatsList = ({handleEnterOpenMenuSm,handleLeaveCloseMenuSm}:IChatListP) => {
 
   const [selectedIndex, setSelectedIndex] = useState<number>(1);
 
 
   const classes = useStyles()
 
@@ -100,10 +104,15 @@ const  ChatsList = () => {
 
     day: 'numeric'
 
   });
 
 
+  const firstLetter = (word: string) => word.slice(0, 1).toUpperCase()
 
+  const slicedWord = (word:string,max: number) => word.length < max?word:`${word.slice(0,max)}...`
 
   return (
 
-    <List className={classes.list} component="nav"
 
+    <List
 
+      onMouseEnter={handleEnterOpenMenuSm}
 
+      onMouseLeave={handleLeaveCloseMenuSm}
 
+      className={classes.list} component="nav"
 
         aria-label="main mailbox folders">
 
-         {chats && chats.map((chat: any,i:number) =>
 
+         {chats && chats.map(({name,lastName,avatarUrl,message}: any,i:number) =>
 
           <ListItemButton
 
           className={classes.listItem}
 
           key={shortid.generate()}
 
@@ -111,10 +120,12 @@ const  ChatsList = () => {
 
           onClick={(e) => handleListItemClick(e, i)}
 
           >
 
           <ListItemIcon className={classes.listItem_iconAvatar}>
 
-            <Avatar alt={chat.name} src={chat.avatarUrl?chat.avatarUrl:undefined}
 
-              sx={{ background: randomColor(), width: 54, height: 54 }}/>
 
+            <Avatar alt={name} src={avatarUrl?avatarUrl:undefined}
 
+                 sx={{ background: '#2ab307', width: 54, height: 54 }}>
 
+                 {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
 
+              </Avatar>
 
           </ListItemIcon> 
-            <ListItemText primary={chat.name.slice(0,50)} secondary={chat.message.slice(0,35)} />
 
+            <ListItemText primary={slicedWord(name,50)} secondary={slicedWord(message,35)} />
 
           <ListItemIcon className={classes.listItem_iconRight}>
 
                <div className={classes.listItem_iconTimeChecked}>
 
                  <img alt='double check' width="16" height='16' src={doubleCheck} />

+ 6 - 5
src/components/HomePage/ContactsBar/SearchBar/ChatListRecent/index.tsx
Fájl Megtekintése 

@@ -2,7 +2,7 @@ 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 {users} from './user'
 
 
 const useStyles = makeStyles({
 
@@ -31,15 +31,16 @@ 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 }) => <div key={shortid.generate()} className={classes.stackItem}>
 
+      {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 }}>{name.slice(0, 1).toUpperCase()}</Avatar>
 
-        <Typography variant="h6" className={classes.titleName} >{name}</Typography>
 
+              sx={{ background: randomColor(), 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>   
     )

+ 205 - 21
src/components/HomePage/ContactsBar/SearchBar/ChatListRecent/user.tsx
Fájl Megtekintése 

@@ -1,35 +1,219 @@
 
 export  const users = [
 
+    {
 
+        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: '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: 'Grig',
 
+        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: 'gh',
 
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
 
+        lastName:'Wedrr',
 
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
 
     },
 
-        {
 
-        avatarUrl: null,
 
-        name: 'jjjjj',
 
+    {
 
+        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: null,
 
-        name: 'gh',
 
+    {
 
+        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: null,
 
-        name: 'jlllll',
 
+    {
 
+        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: 'oooooo',
 
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
 
+        lastName:'Wedrr',
 
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
 
     },
 
-                        {
 
-        avatarUrl: null,
 
-        name: 'ee',
 
+    {
 
+        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: null,
 
-        name: 'v',
 
-    }
 
+    {
 
+        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'
 
+    },    
 ]

+ 48 - 29
src/components/HomePage/ContactsBar/index.tsx
Fájl Megtekintése 

@@ -4,24 +4,26 @@ import MenuIcon from '@mui/icons-material/Menu';
 
 import SearchIcon from '@mui/icons-material/Search';
 
 import InputBase from '@mui/material/InputBase';
 
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 
-import { styled, alpha } from '@mui/material/styles';
 
+import { styled } from '@mui/material/styles';
 
 import { makeStyles } from '@material-ui/core'
 
-import { useState, useRef, useEffect } from 'react';
 
+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 './MenuBar'
 
+import MenuBar from './ChatsList/MenuBar'
 
 
 
 
 const Search = styled('div')(({ theme }:any) => ({
 
   position: 'relative',
 
-  borderRadius: theme.shape.borderRadius,
 
-  backgroundColor: alpha(theme.palette.common.white, 0.15),
 
+  borderRadius: '20px',
 
+  backgroundColor: '#f1f0f0',
 
   '&:hover': {
 
-    backgroundColor: alpha(theme.palette.common.white, 0.25),
 
-  },
 
+    backgroundColor: '#f5f5f5',
 
+    color:'#2184f7',
 
+  }, 
   marginLeft: 0,
 
   width: '100%',
 
   [theme.breakpoints.up('sm')]: {
 
@@ -42,8 +44,8 @@ const SearchIconWrapper = styled('div')(({ theme }) => ({
 
 
 const StyledInputBase = styled(InputBase)(({ theme }) => ({
 
     color: 'inherit',
 
-    '& .MuiInputBase-input': {
 
-    background: '#f1f0f0',
 
+  '& .MuiInputBase-input': { 
+    fontWeight: 500,
 
     borderRadius: '20px',
 
     padding: theme.spacing(1, 1, 1, 0),
 
     paddingLeft: `calc(1em + ${theme.spacing(4)})`,
 
@@ -52,18 +54,15 @@ const StyledInputBase = styled(InputBase)(({ theme }) => ({
 
     [theme.breakpoints.up('sm')]: {
 
       width: '35ch',
 
       '&:focus': {
 
-          color: '#2184f7',
 
-          outline: '2px solid  #2184f7',
 
-          background: '#f5f5f5'
 
+        outline: '2px solid  #2184f7',
 
       },
 
     },
 
   },
 
 }));
 
 
 const useStyles = makeStyles({
 
-    toolBar: {
 
-        background: '#ffffff',
 
-        color: 'rgba(0, 0, 0, 0.87)'
 
+  toolBar: {
 
+    color:'#b1aeae',
 
   },
 
   iconBtn: {
 
     '&:hover': {
 
@@ -83,32 +82,49 @@ 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 portalModal = useRef<HTMLDivElement|null>(null);
 
+    const modalRoot = useRef<HTMLDivElement|null>(null);
 
     const handleFocus = (): void => setIsOpen(true)
 
     const handleClick = (): void => {
 
-       if(!isOpen) return setIsMenu(!isMenu)
 
+    if(!isOpen) return setIsMenu(!isMenu)
 
        setIsOpen(false)
 
-       }
 
-  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value)
 
+    }
 
+    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 = () => setIsMenu(false)
 
-    const modal = document.getElementById('modal') as HTMLDivElement
 
-    modal.addEventListener('click',handleCloseModal)
 
-    portalModal.current = modal
 
+    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 () => {
 
-      portalModal.current?.removeEventListener('click',handleCloseModal)
 
-      portalModal.current = null
 
+      if (modalRoot.current) {
 
+      modalRoot.current.removeEventListener('click',handleCloseModal)
 
+      modalRoot.current = null        
+      }
 
     }
 
   }, [])
 
 
     return (
 
     <>
 
         <Toolbar className={classes.toolBar}>
 
-            <IconButton aria-label="" onClick={handleClick}>
 
+            <IconButton  onClick={handleClick}>
 
                 {isOpen ? <ArrowBackIcon className={classes.iconArrow} /> : <MenuIcon className={classes.iconBtn} />}
 
             </IconButton>
 
-            <Search>
 
+          <Search>
 
                 <SearchIconWrapper>
 
                     <SearchIcon />
 
                 </SearchIconWrapper>
 
@@ -120,8 +136,11 @@ const ContactsBar = () => {
 
                 />
 
             </Search>
 
         </Toolbar>
 
-        {isOpen ? <SearchBar /> : <ChatsList />}
 
-        {isMenu&&portalModal.current&&createPortal(<MenuBar/>,portalModal.current)}
 
+        {isOpen ? <SearchBar /> :
 
+          <ChatsList handleEnterOpenMenuSm={handleEnterOpenMenuSm}
 
+            handleLeaveCloseMenuSm={handleLeaveCloseMenuSm} />}
 
+        {isMenu && modalRoot.current && createPortal(<MenuBar />, modalRoot.current)}
 
+        {isMenuSm&&<SmallMenuBar />}
 
     </>
 
     )
 
 }

+ 0 - 8
src/index.css
Fájl Megtekintése 

@@ -50,12 +50,4 @@ ul {
 
   margin: 0;
 
 }
 
 
-#modal {
 
-  position: fixed;
 
-  top: 0;
 
-  left: 0;
 
-  width: 100vw;
 
-  height: 100vh;
 
-}
 
-
 
 @import 'https://fonts.googleapis.com/css?family=Mountains+of+Christmas';

+ 0 - 1
src/index.tsx
Fájl Megtekintése 

@@ -13,7 +13,6 @@ ReactDOM.render(
 
   <React.StrictMode>
 
     <PersistGate loading={null} persistor={persistor}>
 
       <Provider store={store}>
 
-        <div id='modal'></div>
 
         <App />
 
       </Provider>
 
     </PersistGate>