add createPortal

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

@@ -0,0 +1,118 @@
+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'
+
+
+const useStyles = makeStyles({
+    container: {
+        position: 'absolute',
+        width: 270,
+        maxWidth: '100%',
+        top: 60,
+        left: 15,
+        zIndex: 10,
+        background: '#43a047',
+        visibility: 'visible',
+    },
+    list: {
+    background:'#fdfdfd'
+    },
+    listItemLast: {
+        textAlign: 'center',
+    },
+    listIcon: {
+        marginRight: 15,
+    },
+    listIconText: {
+        marginRight: 15,
+        paddingLeft:6
+    }
+})
+
+const MenuBar = () => {
+    const classes = useStyles()
+  return (
+    <Paper className={classes.container}>
+      <MenuList className={classes.list}>
+        <MenuItem>
+          <ListItemIcon className={classes.listIcon}>
+            <BookmarkBorderIcon fontSize="medium" />
+          </ListItemIcon>
+          <ListItemText>Saved Messages</ListItemText>
+        </MenuItem>
+        <MenuItem>
+          <ListItemIcon className={classes.listIcon}>
+            <ArchiveIcon fontSize="medium" />
+          </ListItemIcon>
+          <ListItemText>Archived Chats</ListItemText>
+        </MenuItem>
+        <MenuItem>
+          <ListItemIcon className={classes.listIcon}>
+            <PermContactCalendarIcon fontSize="medium" />
+          </ListItemIcon>
+          <ListItemText>Contacts</ListItemText>
+        </MenuItem>        
+        <MenuItem>
+          <ListItemIcon className={classes.listIcon}>
+            <SettingsIcon fontSize="medium" />
+          </ListItemIcon>
+          <ListItemText>Settings</ListItemText>
+        </MenuItem>
+        <MenuItem>
+          <ListItemIcon className={classes.listIcon}>
+            <Brightness3Icon fontSize="medium" />
+          </ListItemIcon>
+          <ListItemText>Night Mode</ListItemText>
+        </MenuItem>
+        <MenuItem>
+          <ListItemIcon className={classes.listIcon}>
+            <AnimationIcon fontSize="medium" />
+          </ListItemIcon>
+          <ListItemText>Animation</ListItemText>
+        </MenuItem>
+        <MenuItem>
+          <ListItemIcon className={classes.listIcon}>
+            <HelpOutlineIcon fontSize="medium" />
+          </ListItemIcon>
+          <ListItemText>Telegram Features</ListItemText>
+        </MenuItem>              
+        <MenuItem>
+          <ListItemIcon className={classes.listIcon}>
+            <BugReportIcon fontSize="medium" />
+          </ListItemIcon>
+          <ListItemText>Report bug</ListItemText>
+        </MenuItem>
+        <MenuItem>
+          <ListItemIcon className={classes.listIconText}>
+            K
+          </ListItemIcon>
+          <ListItemText>Switch to K Version</ListItemText>
+        </MenuItem>
+        <MenuItem>
+          <ListItemIcon className={classes.listIconText}>
+             W
+          </ListItemIcon>
+          <ListItemText>Switch to Old Version</ListItemText>
+        </MenuItem>
+        <Divider />
+        <MenuItem className={classes.listItemLast}>
+          <ListItemText>Telegram WebZ 1.32.3</ListItemText>
+        </MenuItem>
+      </MenuList>
+    </Paper>
+  );
+}
+
+export default MenuBar

src/components/HomePage/ContactsBar/index.tsx

@@ -6,10 +6,14 @@ import InputBase from '@mui/material/InputBase';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import { styled, alpha } from '@mui/material/styles';
 import { makeStyles } from '@material-ui/core'
-import React, { useState } from 'react';
+import { useState, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
 
 import SearchBar from './SearchBar'
 import ChatsList from './ChatsList'
+import MenuBar from './MenuBar'
+
+
 
 const Search = styled('div')(({ theme }:any) => ({
   position: 'relative',
@@ -78,10 +82,26 @@ const useStyles = makeStyles({
 const ContactsBar = () => {
     const classes = useStyles()
     const [isOpen, setIsOpen] = useState<boolean>(false)
-    const [value,setValue] = useState<string>('')
+    const [isMenu, setIsMenu] = useState<boolean>(false)
+    const [value, setValue] = useState<string>('')
+    const portalModal = useRef<HTMLDivElement|null>(null);
     const handleFocus = (): void => setIsOpen(true)
-    const handleClick = (): void => setIsOpen(false)
-    const handleSearch = (e:React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value)
+    const handleClick = (): void => {
+       if(!isOpen) return setIsMenu(!isMenu)
+       setIsOpen(false)
+       }
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value)
+  useEffect(() => {
+    const handleCloseModal = () => setIsMenu(false)
+    const modal = document.getElementById('modal') as HTMLDivElement
+    modal.addEventListener('click',handleCloseModal)
+    portalModal.current = modal
+    return () => {
+      portalModal.current?.removeEventListener('click',handleCloseModal)
+      portalModal.current = null
+    }
+  }, [])
+
     return (
     <>
         <Toolbar className={classes.toolBar}>
@@ -100,7 +120,8 @@ const ContactsBar = () => {
                 />
             </Search>
         </Toolbar>
-            {isOpen?<SearchBar />:<ChatsList/>}
+        {isOpen ? <SearchBar /> : <ChatsList />}
+        {isMenu&&portalModal.current&&createPortal(<MenuBar/>,portalModal.current)}
     </>
     )
 }

src/index.css

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

src/index.tsx

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