From c669504137a4f304f3afc5d400f45f5f91f4369c 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: Wed, 6 Jan 2021 00:23:56 +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=BE=20=D0=B2=D1=81=D0=BF=D0=BB=D1=8B=D0=B2=D0=B0=D1=8E?=
 =?UTF-8?q?=D1=89=D0=B5=D0=B5=20=D0=BC=D0=B5=D0=BD=D1=8E=20=D1=81=20=D0=BF?=
 =?UTF-8?q?=D0=B5=D1=80=D0=B5=D1=85=D0=BE=D0=B4=D0=B0=D0=BC=D0=B8=20(#45)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Добавлено всплывающее меню с переходами

* Исправлены косяки моего труда

* Исправлены косяки моего труда-часть вторая

* Исправлены косяки моего труда-часть третья
---
 src/app/components/both-menu/BothMenu.tsx     | 101 ++++++++++--------
 src/app/components/toggle-menu/ToggleMenu.tsx |  48 +++++++++
 src/app/components/toggle-menu/index.ts       |   1 +
 src/app/consts.ts                             |  17 +++
 4 files changed, 120 insertions(+), 47 deletions(-)
 create mode 100644 src/app/components/toggle-menu/ToggleMenu.tsx
 create mode 100644 src/app/components/toggle-menu/index.ts

diff --git a/src/app/components/both-menu/BothMenu.tsx b/src/app/components/both-menu/BothMenu.tsx
index b0913c2..0d6f237 100644
--- a/src/app/components/both-menu/BothMenu.tsx
+++ b/src/app/components/both-menu/BothMenu.tsx
@@ -1,4 +1,5 @@
 import {AppBar, createStyles, Fab, IconButton, makeStyles, Theme, Toolbar} from '@material-ui/core';
+import Slide from '@material-ui/core/Slide';
 import React, {memo} from 'react';
 import MoreIcon from '@material-ui/icons/MoreVert';
 import AddIcon from '@material-ui/icons/Add';
@@ -7,6 +8,8 @@ import CalendarTodayIcon from '@material-ui/icons/CalendarToday';
 import ListAltIcon from '@material-ui/icons/ListAlt';
 import {NavLink} from 'react-router-dom';
 import {ROUTES} from '_consts/common';
+import ToggleMenu from '../toggle-menu';
+import {BOTH_MENU_LINKS} from '../../consts';
 
 const useStyles = makeStyles((theme: Theme) =>
     createStyles({
@@ -39,53 +42,57 @@ const BothMenu: React.FC<Props> = ({trigger}) => {
     const classes = useStyles();
 
     return (
-        <AppBar
-            position="fixed"
-            color="primary"
-            className={classes.appBar}
-        >
-            <Toolbar>
-                <IconButton
-                    className={classes.iconRight}
-                    edge="start"
-                    color="inherit"
-                >
-                    <NavLink to={ROUTES.CHAOS_BOX}>
-                        <MoveToInboxIcon />
-                    </NavLink>
-                </IconButton>
-                <IconButton
-                    edge="end"
-                    color="inherit"
-                >
-                    <NavLink to={ROUTES.PROJECTS}>
-                        <ListAltIcon />
-                    </NavLink>
-                </IconButton>
-                <Fab
-                    color="secondary"
-                    className={classes.fabButton}
-                >
-                    <AddIcon />
-                </Fab>
-                <div className={classes.grow} />
-                <IconButton
-                    className={classes.iconRight}
-                    edge="start"
-                    color="inherit"
-                >
-                    <NavLink to={ROUTES.CALENDAR}>
-                        <CalendarTodayIcon />
-                    </NavLink>
-                </IconButton>
-                <IconButton
-                    edge="end"
-                    color="inherit"
-                >
-                    <MoreIcon />
-                </IconButton>
-            </Toolbar>
-        </AppBar>
+        <Slide appear={false} direction="up" in={!trigger}>
+            <AppBar
+                position="fixed"
+                color="primary"
+                className={classes.appBar}
+            >
+                <Toolbar>
+                    <IconButton
+                        className={classes.iconRight}
+                        edge="start"
+                        color="inherit"
+                    >
+                        <NavLink to={ROUTES.CHAOS_BOX}>
+                            <MoveToInboxIcon />
+                        </NavLink>
+                    </IconButton>
+                    <IconButton
+                        edge="end"
+                        color="inherit"
+                    >
+                        <NavLink to={ROUTES.PROJECTS}>
+                            <ListAltIcon />
+                        </NavLink>
+                    </IconButton>
+                    <Fab
+                        color="secondary"
+                        className={classes.fabButton}
+                    >
+                        <AddIcon />
+                    </Fab>
+                    <div className={classes.grow} />
+                    <IconButton
+                        className={classes.iconRight}
+                        edge="start"
+                        color="inherit"
+                    >
+                        <NavLink to={ROUTES.CALENDAR}>
+                            <CalendarTodayIcon />
+                        </NavLink>
+                    </IconButton>
+                    <ToggleMenu items={BOTH_MENU_LINKS}>
+                        <IconButton
+                            edge="end"
+                            color="inherit"
+                        >
+                            <MoreIcon />
+                        </IconButton>
+                    </ToggleMenu>
+                </Toolbar>
+            </AppBar>
+        </Slide>
     );
 };
 
diff --git a/src/app/components/toggle-menu/ToggleMenu.tsx b/src/app/components/toggle-menu/ToggleMenu.tsx
new file mode 100644
index 0000000..d7a8f7d
--- /dev/null
+++ b/src/app/components/toggle-menu/ToggleMenu.tsx
@@ -0,0 +1,48 @@
+import React, {Fragment, memo, PropsWithChildren, useCallback, useMemo, useState} from 'react';
+import {v4} from 'uuid';
+import {Menu, MenuItem} from '@material-ui/core';
+import {NavLink} from 'react-router-dom';
+
+type Props = PropsWithChildren<{
+    items: {
+        url: string,
+        name: string
+    }[],
+}>;
+
+const ToggleMenu: React.FC<Props> = ({items, children}) => {
+    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+
+    const handleClick = useCallback((event: React.MouseEvent<HTMLDivElement>) => {
+        setAnchorEl(event.currentTarget);
+    }, [setAnchorEl]);
+
+    const handleClose = useCallback(() => {
+        setAnchorEl(null);
+    }, [setAnchorEl]);
+
+    const isOpenMenu = useMemo(() => Boolean(anchorEl), [anchorEl]);
+
+    return (
+        <Fragment>
+            <Menu
+                id="simple-menu"
+                anchorEl={anchorEl}
+                keepMounted
+                open={isOpenMenu}
+                onClose={handleClose}
+            >
+                {items.map(item => (
+                    <NavLink to={item.url} key={v4()}>
+                        <MenuItem onClick={handleClose}>{item.name}</MenuItem>
+                    </NavLink>)
+                )}
+            </Menu>
+            <div onClick={handleClick}>
+                {children}
+            </div>
+        </Fragment>
+    );
+};
+
+export default memo(ToggleMenu);
diff --git a/src/app/components/toggle-menu/index.ts b/src/app/components/toggle-menu/index.ts
new file mode 100644
index 0000000..c26d522
--- /dev/null
+++ b/src/app/components/toggle-menu/index.ts
@@ -0,0 +1 @@
+export {default} from './ToggleMenu';
diff --git a/src/app/consts.ts b/src/app/consts.ts
index 1ddbfa7..35770a4 100644
--- a/src/app/consts.ts
+++ b/src/app/consts.ts
@@ -1,3 +1,20 @@
+import {ROUTES} from '_consts/common';
+
 export const LABELS = {
     SEACRH: 'Поиск',
 } as const;
+
+export const BOTH_MENU_LINKS = [
+    {
+        name: 'Tags',
+        url: ROUTES.TAGS
+    },
+    {
+        name: 'Settings',
+        url: ROUTES.SETTINGS
+    },
+    {
+        name: 'Information',
+        url: ROUTES.INFORMATION
+    }
+];