Добавлено всплывающее меню с переходами (#45)

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

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

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

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

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,6 +42,7 @@ const BothMenu: React.FC<Props> = ({trigger}) => {
     const classes = useStyles();
 
     return (
+        <Slide appear={false} direction="up" in={!trigger}>
             <AppBar
                 position="fixed"
                 color="primary"
@@ -78,14 +82,17 @@ const BothMenu: React.FC<Props> = ({trigger}) => {
                             <CalendarTodayIcon />
                         </NavLink>
                     </IconButton>
+                    <ToggleMenu items={BOTH_MENU_LINKS}>
                         <IconButton
                             edge="end"
                             color="inherit"
                         >
                             <MoreIcon />
                         </IconButton>
+                    </ToggleMenu>
                 </Toolbar>
             </AppBar>
+        </Slide>
     );
 };
 

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);

src/app/components/toggle-menu/index.ts

@@ -0,0 +1 @@
+export {default} from './ToggleMenu';

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
+    }
+];