#10. Добавление localStorage сервиса, добавлены верхнее и нижнее меню приложения (#11)

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

@@ -0,0 +1,80 @@
+import {AppBar, createStyles, Fab, IconButton, makeStyles, Theme, Toolbar} from '@material-ui/core';
+import React, {memo} from 'react';
+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';
+
+const useStyles = makeStyles((theme: Theme) =>
+    createStyles({
+        iconRight: {
+            marginRight: theme.spacing(2),
+        },
+        appBar: {
+            top: 'auto',
+            bottom: 0,
+        },
+        grow: {
+            flexGrow: 1,
+        },
+        fabButton: {
+            position: 'absolute',
+            zIndex: 1,
+            top: -30,
+            left: 0,
+            right: 0,
+            margin: '0 auto',
+        },
+    }),
+);
+
+const BothMenu: React.FC = () => {
+    const classes = useStyles();
+
+    return (
+        <AppBar
+            position="fixed"
+            color="primary"
+            className={classes.appBar}
+        >
+            <Toolbar>
+                <IconButton
+                    className={classes.iconRight}
+                    edge="start"
+                    color="inherit"
+                >
+                    <MoveToInboxIcon />
+                </IconButton>
+                <IconButton
+                    edge="end"
+                    color="inherit"
+                >
+                    <ListAltIcon />
+                </IconButton>
+                <Fab
+                    color="secondary"
+                    className={classes.fabButton}
+                >
+                    <AddIcon />
+                </Fab>
+                <div className={classes.grow} />
+                <IconButton
+                    className={classes.iconRight}
+                    edge="start"
+                    color="inherit"
+                >
+                    <CalendarTodayIcon />
+                </IconButton>
+                <IconButton
+                    edge="end"
+                    color="inherit"
+                >
+                    <MoreIcon />
+                </IconButton>
+            </Toolbar>
+        </AppBar>
+    );
+};
+
+export default memo(BothMenu);

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

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

src/app/components/page/Page.tsx

@@ -1,5 +1,5 @@
-import React, {memo} from 'react';
-import {HashRouter, Route, Switch} from 'react-router-dom';
+import React, {Fragment, memo} from 'react';
+import {Route, Switch} from 'react-router-dom';
 import mainPageRouter from '_pages/main/routing';
 import chaosBoxPageRouter from '_pages/chaos-box/routing';
 import calendarPageRouter from '_pages/calendar/routing';
@@ -8,28 +8,32 @@ import projectsPageRouter from '_pages/projects/routing';
 import settingsPageRouter from '_pages/settings/routing';
 import signInPageRouter from '_pages/sign-in/routing';
 import tagsPageRouter from '_pages/tags/routing';
-import NotFoundPage from '_pages/not-found/components/page/Page';
-import TopMenu from '../top-menu/TopMenu';
+import NotFoundPage from '_pages/not-found/components/page';
+import TopMenu from '../top-menu';
 import './Page.scss';
+import BothMenu from '../both-menu';
 
 const Page: React.FC = () => {
     return (
-        <HashRouter>
+        <Fragment>
             <TopMenu />
-            <Switch>
-                {mainPageRouter}
-                {chaosBoxPageRouter}
-                {calendarPageRouter}
-                {informationPageRouter}
-                {projectsPageRouter}
-                {settingsPageRouter}
-                {signInPageRouter}
-                {tagsPageRouter}
-                <Route>
-                    <NotFoundPage />
-                </Route>
-            </Switch>
-        </HashRouter>
+            <div>
+                <Switch>
+                    {mainPageRouter}
+                    {chaosBoxPageRouter}
+                    {calendarPageRouter}
+                    {informationPageRouter}
+                    {projectsPageRouter}
+                    {settingsPageRouter}
+                    {signInPageRouter}
+                    {tagsPageRouter}
+                    <Route>
+                        <NotFoundPage />
+                    </Route>
+                </Switch>
+            </div>
+            <BothMenu />
+        </Fragment>
     );
 };
 

src/app/components/page/index.ts

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

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

@@ -1,28 +0,0 @@
-import {List, ListItem as MaterialListItem, ListItemIcon, ListItemText} from '@material-ui/core';
-import React, {memo} from 'react';
-import {Link} from 'react-router-dom';
-import InboxIcon from '@material-ui/icons/MoveToInbox';
-import {ListItem} from '_types/common';
-
-type Props = {
-    list: ListItem[];
-};
-
-const MenuList: React.FC<Props> = ({list}) => {
-    return (
-        <List>
-            {list.map(({title, url}) => (
-                <Link to={url} key={url}>
-                    <MaterialListItem button key={url}>
-                        <ListItemIcon>
-                            <InboxIcon />
-                        </ListItemIcon>
-                        <ListItemText primary={title} />
-                    </MaterialListItem>
-                </Link>
-            ))}
-        </List>
-    );
-};
-
-export default memo(MenuList);

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

@@ -1,32 +1,72 @@
 import React, {memo} from 'react';
-import {createStyles, makeStyles, Theme} from '@material-ui/core/styles';
+import {useHistory} from 'react-router-dom';
+import {createStyles, makeStyles} from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
+import IconButton from '@material-ui/core/IconButton';
+import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
+import SearchIcon from '@material-ui/icons/Search';
+import {Avatar} from '@material-ui/core';
+import {useParams} from '_hooks/useParams';
+import {PageType} from '_enums/common';
+import {PAGE_TITLE, ROUTES} from '_consts/common';
 
-const useStyles = makeStyles((theme: Theme) =>
+const NO_NAME_AVATAR = 'https://d.newsweek.com/en/full/425257/02-10-putin-economy.jpg';
+
+const useStyles = makeStyles(() =>
     createStyles({
         root: {
             flexGrow: 1,
         },
-        menuButton: {
-            marginRight: theme.spacing(2),
-        },
         title: {
             flexGrow: 1,
+            display: 'flex',
+            justifyContent: 'center',
         },
     }),
 );
 
 const TopMenu: React.FC = () => {
     const classes = useStyles();
+    const {pageType} = useParams();
+    const history = useHistory();
+
+    const handleGoRoot = () => {
+        history.push(ROUTES.MAIN);
+    };
+
+    const title = PAGE_TITLE[pageType];
     return (
         <div className={classes.root}>
             <AppBar position="static">
                 <Toolbar>
-                    <Typography variant="h6" className={classes.title}>
-                        Free your brain
+                    {pageType === PageType.Main && (
+                        <IconButton
+                            edge="start"
+                            color="inherit"
+                        >
+                            <SearchIcon />
+                        </IconButton>
+                    )}
+                    {pageType !== PageType.Main && (
+                        <IconButton
+                            onClick={handleGoRoot}
+                            edge="start"
+                            color="inherit"
+                        >
+                            <ArrowBackIosIcon />
+                        </IconButton>
+                    )}
+
+                    <Typography
+                        variant="h6"
+                        className={classes.title}
+                    >
+                        {title}
                     </Typography>
+
+                    <Avatar src={NO_NAME_AVATAR} />
                 </Toolbar>
             </AppBar>
         </div>

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

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

src/app/index.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './components/page/Page';
+import {HashRouter} from 'react-router-dom';
+import App from './components/page';
 
 ReactDOM.render(
     <React.StrictMode>
-        <App />
+        <HashRouter >
+            <App />
+        </HashRouter>
     </React.StrictMode>,
     document.getElementById('root')
 );