Добавлено поле поиска в шапке (#43)

* Добавлено поле поиска в шапке

* Исправлены недочеты после ревью

* Rebase

* Исправлен баг после rebase

src/app/components/both-menu/BothMenu.tsx

@@ -1,17 +1,10 @@
 import {AppBar, createStyles, Fab, IconButton, makeStyles, Theme, Toolbar} from '@material-ui/core';
 import React, {memo} from 'react';
-import Slide from '@material-ui/core/Slide';
 import MoreIcon from '@material-ui/icons/MoreVert';
 import AddIcon from '@material-ui/icons/Add';
 import MoveToInboxIcon from '@material-ui/icons/MoveToInbox';
 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';
-
-type Props = {
-    trigger: boolean;
-}
 
 const useStyles = makeStyles((theme: Theme) =>
     createStyles({
@@ -36,12 +29,16 @@ const useStyles = makeStyles((theme: Theme) =>
     }),
 );
 
+type Props = {
+    trigger: boolean;
+};
+
 const BothMenu: React.FC<Props> = ({trigger}) => {
     const classes = useStyles();
 
     return (
-        <Slide appear={false} direction="up" in={!trigger}>
         <AppBar
+            position="fixed"
             color="primary"
             className={classes.appBar}
         >
@@ -51,17 +48,13 @@ const BothMenu: React.FC<Props> = ({trigger}) => {
                     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"
@@ -75,9 +68,7 @@ const BothMenu: React.FC<Props> = ({trigger}) => {
                     edge="start"
                     color="inherit"
                 >
-                        <NavLink to={ROUTES.CALENDAR}>
                     <CalendarTodayIcon />
-                        </NavLink>
                 </IconButton>
                 <IconButton
                     edge="end"
@@ -87,7 +78,6 @@ const BothMenu: React.FC<Props> = ({trigger}) => {
                 </IconButton>
             </Toolbar>
         </AppBar>
-        </Slide>
     );
 };
 

src/app/components/top-menu/TopMenu.tsx

@@ -1,18 +1,21 @@
-import React, {memo} from 'react';
+import React, {memo, useState} from 'react';
 import {useHistory} from 'react-router-dom';
-import {createStyles, makeStyles} from '@material-ui/core/styles';
+import {createStyles, makeStyles, Theme} from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import Slide from '@material-ui/core/Slide';
 import Typography from '@material-ui/core/Typography';
 import IconButton from '@material-ui/core/IconButton';
+import TextField from '@material-ui/core/TextField';
 import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
 import SearchIcon from '@material-ui/icons/Search';
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
 import {Avatar} from '@material-ui/core';
 import {PageType} from '_enums/common';
 import {PAGE_TITLE} from '_consts/common';
 import {usePageType} from '_hooks/usePageType';
 import {buildPath} from '_utils/buildPath';
+import {LABELS} from '../../consts';
 
 type Props = {
     trigger: boolean;
@@ -20,17 +23,21 @@ type Props = {
 
 const NO_NAME_AVATAR = 'https://d.newsweek.com/en/full/425257/02-10-putin-economy.jpg';
 
-const useStyles = makeStyles(() =>
+const useStyles = makeStyles((theme: Theme) =>
     createStyles({
         title: {
             flexGrow: 1,
             display: 'flex',
             justifyContent: 'center',
         },
+        searchInput: {
+            backgroundColor: theme.palette.background.default,
+        },
     }),
 );
 
 const TopMenu: React.FC<Props> = ({trigger}) => {
+    const [isShowSearch, setShowSearch] = useState(false);
     const classes = useStyles();
     const pageType = usePageType();
     const history = useHistory();
@@ -39,18 +46,42 @@ const TopMenu: React.FC<Props> = ({trigger}) => {
         history.push(buildPath({pageType: PageType.Main}));
     };
 
+    const handleToggleSearch = () => {
+        setShowSearch(!isShowSearch);
+    };
+
+    const handleClickAway = () => {
+        setShowSearch(false);
+    };
+
     const title = PAGE_TITLE[pageType];
     return (
         <Slide appear={false} direction="down" in={!trigger}>
             <AppBar position="sticky">
                 <Toolbar>
                     {pageType === PageType.Main && (
+                        <>
+                            {isShowSearch ? (
+                                <ClickAwayListener onClickAway={handleClickAway}>
+                                    <TextField
+                                        label={LABELS.SEACRH}
+                                        id="outlined-size-small"
+                                        defaultValue=""
+                                        variant="outlined"
+                                        size="small"
+                                        className={classes.searchInput}
+                                    />
+                                </ClickAwayListener>
+                            ) : (
                                     <IconButton
                                         edge="start"
                                         color="inherit"
                                     >
-                            <SearchIcon />
+                                        <SearchIcon onClick={handleToggleSearch} />
                                     </IconButton>
+                                )
+                            }
+                        </>
                     )}
                     {pageType !== PageType.Main && (
                         <IconButton
@@ -61,14 +92,12 @@ const TopMenu: React.FC<Props> = ({trigger}) => {
                             <ArrowBackIosIcon />
                         </IconButton>
                     )}
-
                     <Typography
                         variant="h6"
                         className={classes.title}
                     >
-                        {title}
+                        {isShowSearch ? '' : title}
                     </Typography>
-
                     <Avatar src={NO_NAME_AVATAR} />
                 </Toolbar>
             </AppBar>

src/app/consts.ts

@@ -0,0 +1,3 @@
+export const LABELS = {
+    SEACRH: 'Поиск',
+} as const;