Edit sticky app bar & header (#583)

* edit_sticky_appBar_&_header * edit_sticky_appBar_&_header * edit_sticky_appBar_&_header * fixed typo
ita-social-projects · Sep 27, 2021 · 8d4e540 · 8d4e540
1 parent 7f367ab
commit 8d4e540
Show file tree

Hide file tree

Showing 10 changed files with 227 additions and 183 deletions.
diff --git a/src/components/AutoPaginationPostList/AutoPaginationPostList.tsx b/src/components/AutoPaginationPostList/AutoPaginationPostList.tsx
@@ -30,9 +30,9 @@ export const AutoPaginationPostList: React.FC<IAutoPaginationPostListProps> = ({
 
   return (
     <div>
-      <PostsList postsList={posts.slice(0, posts.length - 5)} />
+      <PostsList postsList={posts.slice(0, posts.length - 1)} />
       <div ref={lastElement}>
-        <PostsList postsList={posts.slice(-5)} />
+        <PostsList postsList={posts.slice(-1)} />
       </div>
     </div>
   );

diff --git a/src/components/Header/Header.styles.ts b/src/components/Header/Header.styles.ts
@@ -9,6 +9,10 @@ export const useStyles = makeStyles(
     headerMobile: {
       height: 85,
       backgroundColor: theme.palette.common.black,
+      position: 'sticky',
+      top: 0,
+      left: 0,
+      zIndex:1500,
     },
     container: {
       height: '100%',

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -1,14 +1,5 @@
 import React, { useContext, useState } from 'react';
-import {
-  Box,
-  Button,
-  Container,
-  Input,
-  Menu,
-  MenuItem,
-  Toolbar,
-  Typography,
-} from '@material-ui/core';
+import { Box, Button, Container, Input, Menu, MenuItem, Slide, Toolbar, Typography } from '@material-ui/core';
 import { Link, NavLink, Route } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import SearchIcon from '@material-ui/icons/Search';
@@ -21,6 +12,8 @@ import i18n, { langTokens } from '../../locales/localizationInit';
 import { IHeaderProps } from './types';
 import { ScreenContext } from '../../old/provider/MobileProvider/ScreenContext';
 import { BurgerMenu } from '../BurgerMenu/BurgerMenu';
+import { useActions } from '../../shared/hooks';
+import { makeHeaderInvisible, makeHeaderVisible } from '../../models/headerVisibility';
 
 export const navElems: IHeaderProps[] = [
   {
@@ -45,92 +38,120 @@ export const Header: React.FC = () => {
   const { t } = useTranslation();
   const { authenticated } = useContext(AuthContext);
 
+  const [visible, setVisible] = useState<boolean>(true);
+  const [oldPageOffsetY, setOldPageOffsetY] = useState<number>(0);
   const [searchInput, setSearchInput] = useState<null | Element>(null);
   const [mobileMenuOpen, setMobileMenuOpen] = useState<boolean>(false);
 
   const { mobile } = useContext(ScreenContext);
 
+  const [boundMakeHeaderVisible, boundMakeHeaderInvisible] = useActions([
+    makeHeaderVisible,
+    makeHeaderInvisible,
+  ]);
+
+  const transitionDuration = {
+    enter: 200,
+    exit: 200,
+  };
+
+  window.onscroll = () => {
+    setOldPageOffsetY(visualViewport.pageTop);
+    if (visualViewport.pageTop >= oldPageOffsetY) {
+      setVisible(false);
+      boundMakeHeaderInvisible();
+    } else {
+      setVisible(true);
+      boundMakeHeaderVisible();
+    }
+  };
+
   return (
-    <div id="header" className={mobile ? classes.headerMobile : classes.header}>
-      <Container className={classes.container}>
-        <Toolbar className={classes.toolbar}>
-          {mobile && (
-            <BurgerMenu
-              navigation={navElems}
-              mobileMenuOpen={mobileMenuOpen}
-              setMobileMenuOpen={(b) => setMobileMenuOpen(b)}
-            />
-          )}
-          <Box display="flex">
-            {!mobileMenuOpen && !searchInput && (
-              <Link to="/">
-                <Typography
-                  className={mobile ? classes.logoMobile : classes.logo}
-                  variant="h1"
-                >
-                  {t(langTokens.common.projectName)}
-                </Typography>
-              </Link>
+    <Slide in={!mobile || visible} timeout={transitionDuration}>
+      <div
+        id="header"
+        className={mobile ? classes.headerMobile : classes.header}
+      >
+        <Container className={classes.container}>
+          <Toolbar className={classes.toolbar}>
+            {mobile && (
+              <BurgerMenu
+                navigation={navElems}
+                mobileMenuOpen={mobileMenuOpen}
+                setMobileMenuOpen={(b) => setMobileMenuOpen(b)}
+              />
             )}
-            {!mobile && (
-              <Box className={classes.tabs}>
-                {navElems.map((item) => (
-                  <NavLink
-                    to={item.url}
-                    key={item.id}
-                    className={classes.tab}
-                    exact
+            <Box display="flex">
+              {!mobileMenuOpen && !searchInput && (
+                <Link to="/">
+                  <Typography
+                    className={mobile ? classes.logoMobile : classes.logo}
+                    variant="h1"
                   >
-                    <Typography variant="h5" className={classes.tabLabel}>
-                      {item.label}
-                    </Typography>
-                  </NavLink>
-                ))}
-              </Box>
-            )}
-          </Box>
-          {!mobile && (
-            <Box className={classes.actionsContainer}>
-              {authenticated && <PostCreationMenu />}
-              {authenticated ? (
-                <AccountMenu />
-              ) : (
-                <Route path="/opendoctorgate">
-                  <LoginModal />
-                </Route>
+                    {t(langTokens.common.projectName)}
+                  </Typography>
+                </Link>
+              )}
+              {!mobile && (
+                <Box className={classes.tabs}>
+                  {navElems.map((item) => (
+                    <NavLink
+                      to={item.url}
+                      key={item.id}
+                      className={classes.tab}
+                      exact
+                    >
+                      <Typography variant="h5" className={classes.tabLabel}>
+                        {item.label}
+                      </Typography>
+                    </NavLink>
+                  ))}
+                </Box>
               )}
             </Box>
-          )}
-          {mobile && (
-            <div>
-              <Button
-                aria-controls="simple-menu"
-                aria-haspopup="true"
-                onClick={(e) => setSearchInput(e.currentTarget)}
-              >
-                <SearchIcon className={classes.searchIcon} />
-              </Button>
-              <Menu
-                classes={{ list: classes.label, paper: classes.paper }}
-                id="simple-menu"
-                anchorEl={searchInput}
-                keepMounted
-                open={Boolean(searchInput)}
-                onClose={() => setSearchInput(null)}
-              >
-                <MenuItem className={classes.searchInputWrapper}>
-                  <Input
-                    disableUnderline
-                    className={classes.searchInput}
-                    placeholder={t(langTokens.common.inputSearchPlaceholder)}
-                  />
-                  <SearchIcon className={classes.searchInputIcon} />
-                </MenuItem>
-              </Menu>
-            </div>
-          )}
-        </Toolbar>
-      </Container>
-    </div>
+            {!mobile && (
+              <Box className={classes.actionsContainer}>
+                {authenticated && <PostCreationMenu />}
+                {authenticated ? (
+                  <AccountMenu />
+                ) : (
+                  <Route path="/opendoctorgate">
+                    <LoginModal />
+                  </Route>
+                )}
+              </Box>
+            )}
+            {mobile && (
+              <div>
+                <Button
+                  aria-controls="simple-menu"
+                  aria-haspopup="true"
+                  onClick={(e) => setSearchInput(e.currentTarget)}
+                >
+                  <SearchIcon className={classes.searchIcon} />
+                </Button>
+                <Menu
+                  classes={{ list: classes.label, paper: classes.paper }}
+                  id="simple-menu"
+                  anchorEl={searchInput}
+                  keepMounted
+                  open={Boolean(searchInput)}
+                  onClose={() => setSearchInput(null)}
+                >
+                  <MenuItem className={classes.searchInputWrapper}>
+                    <Input
+                      disableUnderline
+                      className={classes.searchInput}
+                      placeholder={t(langTokens.common.inputSearchPlaceholder)}
+                    />
+                    <SearchIcon className={classes.searchInputIcon} />
+                  </MenuItem>
+                </Menu>
+              </div>
+            )}
+          </Toolbar>
+        </Container>
+      </div>
+    </Slide>
   );
 };