almost done left menu

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

@@ -53,7 +53,7 @@ const  ContactsList = ({value,handleClick} : IContactList) => {
     dispatch(asyncStartChatById(companionId))
   }
 
-  const filteredContacts = () => contacts.filter((el) => {
+  const filteredContacts = () => [...contacts].sort((a, b) => (a.name > b.name) ? 1 : -1).filter((el) => {
     const credentials = el.name + ' ' + el.lastName
     if(credentials.toLowerCase().includes(value.toLowerCase())) return el
   })

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

@@ -73,39 +73,51 @@ const MenuBar = ({handleSelectedMenu}:IContactsList) => {
           </ListItemIcon>
           <ListItemText>Settings</ListItemText>
         </MenuItem>
-        <MenuItem onClick={() => handleSelectedMenu(3)}>
+        <MenuItem>
           <ListItemIcon className={classes.listIcon}>
             <Brightness3Icon fontSize="medium" />
           </ListItemIcon>
           <ListItemText>Night Mode</ListItemText>
           <Switch onClick={handleSwitch} {...label} />
         </MenuItem>
-        <MenuItem onClick={() => handleSelectedMenu(4)}>
-          <ListItemIcon className={classes.listIcon}>
-            <HelpOutlineIcon fontSize="medium" />
-          </ListItemIcon>
-          <ListItemText>Telegram Features</ListItemText>
-        </MenuItem>              
-        <MenuItem onClick={() => handleSelectedMenu(5)}>
-          <ListItemIcon className={classes.listIcon}>
-            <BugReportIcon fontSize="medium" />
-          </ListItemIcon>
-          <ListItemText>Report bug</ListItemText>
-        </MenuItem>
-        <MenuItem onClick={() => handleSelectedMenu(6)}>
-          <ListItemIcon className={classes.listIconText}>
-            K
-          </ListItemIcon>
-          <ListItemText>Switch to K Version</ListItemText>
-        </MenuItem>
-        <MenuItem onClick={() => handleSelectedMenu(7)}>
-          <ListItemIcon className={classes.listIconText}>
-             W
-          </ListItemIcon>
-          <ListItemText>Switch to Old Version</ListItemText>
-        </MenuItem >
+        <a style={{ textDecoration: 'none', color: 'inherit' }} target='blank'
+          href='https://www.makeuseof.com/tag/useful-telegram-features/'>
+          <MenuItem>
+            <ListItemIcon className={classes.listIcon}>
+              <HelpOutlineIcon fontSize="medium" />
+            </ListItemIcon>
+            <ListItemText>Telegram Features</ListItemText>
+          </MenuItem>
+        </a>
+        <a style={{ textDecoration: 'none', color: 'inherit' }} target='blank'
+          href='https://bugs.telegram.org/?tag_ids=41&sort=time'>
+          <MenuItem>
+            <ListItemIcon className={classes.listIcon}>
+              <BugReportIcon fontSize="medium" />
+            </ListItemIcon>
+            <ListItemText>Report bug</ListItemText>
+          </MenuItem>
+        </a>
+        <a style={{ textDecoration: 'none', color: 'inherit' }} target='blank'
+          href='https://www.msn.com/en-in/money/tech/telegram-webk-and-webz-web-apps-launched-whats-the-difference/ar-BB1fOwLR'>
+          <MenuItem>
+            <ListItemIcon className={classes.listIconText}>
+              K
+            </ListItemIcon>
+            <ListItemText>Switch to K Version</ListItemText>
+          </MenuItem>
+        </a>
+        <a style={{ textDecoration: 'none', color: 'inherit' }} target='blank'
+          href='https://desktop.telegram.org/changelog'>
+          <MenuItem>
+            <ListItemIcon className={classes.listIconText}>
+              W
+            </ListItemIcon>
+            <ListItemText>Switch to Old Version</ListItemText>
+          </MenuItem>
+        </a>            
         <Divider />
-        <MenuItem onClick={() => handleSelectedMenu(8)}>
+        <MenuItem style={{cursor:'default'}}>
           <ListItemText secondary='Telegram WebZ 1.32.3' className={classes.listItemLast}/>
         </MenuItem>
       </MenuList>

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

@@ -88,14 +88,14 @@ const  SmallMenuBar = ({handleSelectedMenu,setIsMenuSm}:ISmallMenuBar) => {
       >
         <MenuItem  onClick={() => {
           handleClose();
-          handleSelectedMenu(9)
+          handleSelectedMenu(1)
         }}>
             <PersonIcon/>
             New Message
         </MenuItem>
         <MenuItem  onClick={() => {
           handleClose();
-          handleSelectedMenu(10)
+          handleSelectedMenu(3)
         }}>
             <PersonAddAltIcon/>
             New Contact

src/components/HomePage/LeftBar/index.tsx

@@ -74,14 +74,7 @@ const LeftBar = () => {
           createPortal(<MenuBar handleSelectedMenu={handleSelectedMenu} />, modalRoot.current)}
         {iMenu === 1 && <ContactsList handleClick={handleClick} value={value}/>}
         {iMenu === 2 && <NotDone name='Settings' />}
-        {iMenu === 3 && <NotDone name='Night Mode' />}
-        {iMenu === 4 && <NotDone name='Telegram Feature' />}
-        {iMenu === 5 && <NotDone name='Report Bag' />}
-        {iMenu === 6 && <NotDone name='Switch to K Version' />}
-        {iMenu === 7 && <NotDone name='Switch to Old Version' />}
-        {iMenu === 8 && <NotDone name='Telegram WebZ 1.33.4' />}
-        {iMenu === 9 && <ContactsList handleClick={handleClick} value={value}/>}
-        {iMenu === 10 && <AddContact setIMenu={setIMenu}/>}
+        {iMenu === 3 && <AddContact setIMenu={setIMenu}/>}
     </Grid>
     )
 }

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

@@ -50,7 +50,15 @@ const useStyles = makeStyles({
         bottom: "-1px",
         left: "-17px"
       }      
+  },
+  copyIcon: {
+    color: '#b56ff7',
+    cursor: 'pointer',
+    marginRight: 7,
+    '&:hover': {
+      color: '#9c3bf8',
     },
+  },  
   time: {
       position: "absolute",
       fontSize: ".65em",
@@ -78,7 +86,7 @@ const MessageLeftText = ({message,name,lastName,updatedAt}:IMessageLeftText) =>
   <div className={classes.container}>
      <div className={classes.wrapper}>
         <CopyToClipboard onCopy={() => copied('Message')} text={message}>
-          <ContentCopyIcon fontSize='large' style={{ color: '#b56ff7',cursor: 'pointer',marginRight:7}} />
+          <ContentCopyIcon className={classes.copyIcon} fontSize='large'/>
         </CopyToClipboard>
         <ListItemText className={classes.message}
           primary={`${firstLetter(name)}${slicedWord(name, 15, 1)} 

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

@@ -50,7 +50,15 @@ const useStyles = makeStyles({
         bottom: "-1px",
         right: "-17px"
       }
+  },
+  copyIcon: {
+    color: '#b56ff7',
+    cursor: 'pointer',
+    marginRight: 7,
+    '&:hover': {
+      color: '#9c3bf8',
     },
+  },
   time: {
       position: "absolute",
       fontSize: ".65em",
@@ -77,7 +85,7 @@ const MessageRightText = ({message,name,lastName,updatedAt}:IMessageRightText) =
   <div className={classes.container}>
      <div className={classes.wrapper}>
         <CopyToClipboard onCopy={() => copied('Message')} text={message}>
-          <ContentCopyIcon fontSize='large' style={{ color: '#b56ff7',cursor: 'pointer',marginRight:7}} />
+          <ContentCopyIcon className={classes.copyIcon} fontSize='large'/>
         </CopyToClipboard>
         <ListItemText className={classes.message}
           primary={`${firstLetter(name)}${slicedWord(name, 15, 1)} 

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

@@ -64,14 +64,15 @@ const ChatBar = () => {
      })
   }
 
-  const handleScroll = ({ target }: any) => {
+  const handleScroll = useCallback(({ target }: any) => {
     isScroll&&setIsScroll(false)
     const different = target.scrollHeight - target.scrollTop
     if (different < 900) seenChat(companionId)
     setIsArrow(different < 1500 ? false : true)
-  }
-  const debouncedHandleScroll = useCallback(debounce(handleScroll, 300), []);
-
+  }, [isScroll, companionId])
+  
+  const debouncedHandleScroll = debounce(handleScroll, 300)
+  
   useEffect(() => {
     if (scroll) {
       dispatch(asyncGetMessagesById(companionId, handleScrollTo))