Fix Header

src/components/Header/Header.scss

@@ -6,9 +6,7 @@
   top: 0;
   z-index: 10;
   display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  padding: 0 1rem;
+  flex-flow: column nowrap;
   background-color: color(dark-blue);
   transition: all 200ms ease-out;
 
@@ -16,6 +14,14 @@
     transition: all 200ms ease-in;
     transform: translateY(-100%);
   }
+}
+
+.nav-container {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  width: 100%;
+  padding: 0 1rem;
 
   @media screen and (max-width: 600px - 1px) {
     flex-flow: column nowrap;

src/components/Header/Header.tsx

@@ -7,6 +7,7 @@ import Navigation from "../Navigation";
 import TitleImage from "../../assets/img/SIK_RGB_W_side.png";
 import classNames from "classnames";
 import throttle from "lodash/throttle";
+import { tr } from "date-fns/locale";
 
 export interface HeaderProps { }
 export interface HeaderState {
@@ -49,31 +50,32 @@ const renderNavigationMobileItems = () => {
   );
 }
 
+const PREVENT_IS_HIDDEN_Y = 150;
+
 const Header: FC<HeaderProps> = () => {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const [isHidden, setHidden] = useState(false);
-
   const yCoord = useRef(0);
-  const preventIsHiddenWhenYBelow = 150;
 
   const handleScroll = () => {
     const newCoord = window.pageYOffset;
-    if (newCoord > yCoord.current && newCoord > preventIsHiddenWhenYBelow) {
-      yCoord.current = newCoord;
+    if (!mobileMenuOpen && newCoord > yCoord.current && newCoord > PREVENT_IS_HIDDEN_Y) {
       setHidden(true);
-    } else if (newCoord < yCoord.current) {
-      yCoord.current = newCoord;
+    } else {
       setHidden(false);
     }
+    yCoord.current = newCoord;
   };
 
+  const handleMobileMenuClick = () => setMobileMenuOpen(!mobileMenuOpen);
+
   useEffect(() => {
     const func = throttle(handleScroll, 200);
+    // Prevents hide when clicking mobileMenuOpen
+    handleScroll();
     window.addEventListener("scroll", func);
     return () => window.removeEventListener("scroll", func);
-  }, []);
-
-  const handleMobileMenuClick = () => setMobileMenuOpen(!mobileMenuOpen);
+  }, [isHidden, mobileMenuOpen]);
 
   const desktopItems = renderNavigationDesktopItems();
   const mobileItems = renderNavigationMobileItems();
@@ -85,13 +87,15 @@ const Header: FC<HeaderProps> = () => {
 
   return (
     <header className={classes}>
-      <Link to="/">
-        <img className="logo" src={TitleImage} />
-      </Link>
-      <Navigation
-        onMobileMenuOpen={handleMobileMenuClick}
-        items={desktopItems}
-      />
+      <div className="nav-container">
+        <Link to="/">
+          <img className="logo" src={TitleImage} />
+        </Link>
+        <Navigation
+          onMobileMenuOpen={handleMobileMenuClick}
+          items={desktopItems}
+        />
+      </div>
       <div className="navigation-mobile-menu" hidden={!mobileMenuOpen}>
         {mobileItems}
       </div>