Добавлено всплывающее меню с переходами (#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,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>
     );
 };
 

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