From 59c9bd47c0216f74cf7b1b915de807d9f332fdee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=92=D0=B8=D0=B3=D0=B4=D0=BE=D1=80=D0=BE=D0=B2=D0=B0=20?=
 =?UTF-8?q?=D0=90=D0=BB=D0=B8=D0=BD=D0=B0?=
 <61090329+Metanka@users.noreply.github.com>
Date: Sat, 9 Jan 2021 20:41:26 +0300
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D0=B4=D0=B8=D0=B0=D0=BB=D0=BE=D0=B3=D0=BE?=
 =?UTF-8?q?=D0=B2=D0=BE=D0=B3=D0=BE=20=D0=BE=D0=BA=D0=BD=D0=B0=20=D0=BF?=
 =?UTF-8?q?=D0=BE=20=D0=BA=D0=BB=D0=B8=D0=BA=D1=83=20=D0=BD=D0=B0=20+=20(#?=
 =?UTF-8?q?59)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/components/both-menu/BothMenu.tsx   |  8 ++++-
 src/app/components/popup-list/PopupList.tsx | 38 +++++++++++++++++++++
 src/app/components/popup-list/index.ts      |  0
 src/app/consts.ts                           |  5 +++
 4 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 src/app/components/popup-list/PopupList.tsx
 create mode 100644 src/app/components/popup-list/index.ts

diff --git a/src/app/components/both-menu/BothMenu.tsx b/src/app/components/both-menu/BothMenu.tsx
index 0d6f237..7d8dffe 100644
--- a/src/app/components/both-menu/BothMenu.tsx
+++ b/src/app/components/both-menu/BothMenu.tsx
@@ -10,6 +10,7 @@ import {NavLink} from 'react-router-dom';
 import {ROUTES} from '_consts/common';
 import ToggleMenu from '../toggle-menu';
 import {BOTH_MENU_LINKS} from '../../consts';
+import PopupList from '../popup-list/PopupList';
 
 const useStyles = makeStyles((theme: Theme) =>
     createStyles({
@@ -31,6 +32,9 @@ const useStyles = makeStyles((theme: Theme) =>
             right: 0,
             margin: '0 auto',
         },
+        addButton: {
+            paddingTop: '5px'
+        },
     }),
 );
 
@@ -70,7 +74,9 @@ const BothMenu: React.FC<Props> = ({trigger}) => {
                         color="secondary"
                         className={classes.fabButton}
                     >
-                        <AddIcon />
+                        <PopupList>
+                            <AddIcon className={classes.addButton} />
+                        </PopupList>
                     </Fab>
                     <div className={classes.grow} />
                     <IconButton
diff --git a/src/app/components/popup-list/PopupList.tsx b/src/app/components/popup-list/PopupList.tsx
new file mode 100644
index 0000000..1828e96
--- /dev/null
+++ b/src/app/components/popup-list/PopupList.tsx
@@ -0,0 +1,38 @@
+import {Dialog, List, ListItem, ListItemText} from '@material-ui/core';
+import React, {Fragment, memo, PropsWithChildren, useCallback} from 'react';
+import {v4} from 'uuid';
+import {MENU_ADDS} from '../../consts';
+
+type Props = PropsWithChildren<{
+}>;
+
+const PopupList: React.FC<Props> = ({children}) => {
+    const [open, setOpen] = React.useState(false);
+
+    const handleClickOpen = useCallback(() => {
+        setOpen(true);
+    }, [setOpen]);
+
+    const handleClose = useCallback(() => {
+        setOpen(false);
+    }, [setOpen]);
+
+    return (
+        <Fragment>
+            <Dialog onClose={handleClose} aria-labelledby="simple-dialog-title" open={open}>
+                <List>
+                    {MENU_ADDS.map(item => (
+                        <ListItem button onClick={handleClose} key={v4()}>
+                            <ListItemText primary={item} />
+                        </ListItem>
+                    ))}
+                </List>
+            </Dialog>
+            <div onClick={handleClickOpen}>
+                {children}
+            </div>
+        </Fragment>
+    );
+};
+
+export default memo(PopupList);
diff --git a/src/app/components/popup-list/index.ts b/src/app/components/popup-list/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/consts.ts b/src/app/consts.ts
index 35770a4..5d763fb 100644
--- a/src/app/consts.ts
+++ b/src/app/consts.ts
@@ -2,6 +2,9 @@ import {ROUTES} from '_consts/common';
 
 export const LABELS = {
     SEACRH: 'Поиск',
+    ADD_TASK: 'Добавить задачу',
+    ADD_FOLDER: 'Добавить папку',
+    ADD_TAG: 'Добавить тег',
 } as const;
 
 export const BOTH_MENU_LINKS = [
@@ -18,3 +21,5 @@ export const BOTH_MENU_LINKS = [
         url: ROUTES.INFORMATION
     }
 ];
+
+export const MENU_ADDS = [LABELS.ADD_TASK, LABELS.ADD_FOLDER, LABELS.ADD_TAG];