Добавлено поле поиска в шапке (#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,58 +29,55 @@ 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
-            <AppBar
+            position="fixed"
-                color="primary"
+            color="primary"
-                className={classes.appBar}
+            className={classes.appBar}
-            >
+        >
-                <Toolbar>
+            <Toolbar>
-                    <IconButton
+                <IconButton
-                        className={classes.iconRight}
+                    className={classes.iconRight}
-                        edge="start"
+                    edge="start"
-                        color="inherit"
+                    color="inherit"
-                    >
+                >
-                        <NavLink to={ROUTES.CHAOS_BOX}>
+                    <MoveToInboxIcon />
-                            <MoveToInboxIcon />
+                </IconButton>
-                        </NavLink>
+                <IconButton
-                    </IconButton>
+                    edge="end"
-                    <IconButton
+                    color="inherit"
-                        edge="end"
+                >
-                        color="inherit"
+                    <ListAltIcon />
-                    >
+                </IconButton>
-                        <NavLink to={ROUTES.PROJECTS}>
+                <Fab
-                            <ListAltIcon />
+                    color="secondary"
-                        </NavLink>
+                    className={classes.fabButton}
-                    </IconButton>
+                >
-                    <Fab
+                    <AddIcon />
-                        color="secondary"
+                </Fab>
-                        className={classes.fabButton}
+                <div className={classes.grow} />
-                    >
+                <IconButton
-                        <AddIcon />
+                    className={classes.iconRight}
-                    </Fab>
+                    edge="start"
-                    <div className={classes.grow} />
+                    color="inherit"
-                    <IconButton
+                >
-                        className={classes.iconRight}
+                    <CalendarTodayIcon />
-                        edge="start"
+                </IconButton>
-                        color="inherit"
+                <IconButton
-                    >
+                    edge="end"
-                        <NavLink to={ROUTES.CALENDAR}>
+                    color="inherit"
-                            <CalendarTodayIcon />
+                >
-                        </NavLink>
+                    <MoreIcon />
-                    </IconButton>
+                </IconButton>
-                    <IconButton
+            </Toolbar>
-                        edge="end"
+        </AppBar>
-                        color="inherit"
-                    >
-                        <MoreIcon />
-                    </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 && (
-                        <IconButton
+                        <>
-                            edge="start"
+                            {isShowSearch ? (
-                            color="inherit"
+                                <ClickAwayListener onClickAway={handleClickAway}>
-                        >
+                                    <TextField
-                            <SearchIcon />
+                                        label={LABELS.SEACRH}
-                        </IconButton>
+                                        id="outlined-size-small"
+                                        defaultValue=""
+                                        variant="outlined"
+                                        size="small"
+                                        className={classes.searchInput}
+                                    />
+                                </ClickAwayListener>
+                            ) : (
+                                    <IconButton
+                                        edge="start"
+                                        color="inherit"
+                                    >
+                                        <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;