Merge pull request #3 from bonuz-market:develop

fix(header): hide mobile nav on item click
fix(header): make header sticky not fixed

src/components/atoms/Navigation/Navigation.tsx

@@ -1,14 +1,24 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 import React, { FC } from 'react';
 import './Navigation.scss';
 
-export const Navigation: FC<React.PropsWithChildren<unknown>> = ({
+interface NavigationProps {
+  onItemClick: () => void;
+}
+export const Navigation: FC<React.PropsWithChildren<NavigationProps>> = ({
   children,
+  onItemClick,
 }) => {
   const childrenModified = React.Children.map(children, (child) => {
     if (!React.isValidElement(child)) {
       return null;
     }
-    return <li className="nav-item">{child}</li>;
+    return (
+      <li className="nav-item" onClick={onItemClick}>
+        {child}
+      </li>
+    );
   });
   return <ul className="nav">{childrenModified}</ul>;
 };

src/components/molecules/Header/Header.scss

@@ -16,8 +16,6 @@ header {
       display: flex;
       width: 100%;
       justify-content: center;
-      position: fixed;
-      z-index: 1000;
       padding: 40px 0;
       transition: all 0.2s ease-in-out;
     }

src/components/molecules/Header/Header.tsx

@@ -52,9 +52,9 @@ export const Header: FC<React.PropsWithChildren<HeaderProps>> = ({
 
     setIsVisible((prevState) => !prevState);
   };
-
+  
   return (
-    <header>
+    <header className="sticky">
       <div
         className={classnames('header-outer', {
           header__fixed: isScrolled,
@@ -95,7 +95,7 @@ export const Header: FC<React.PropsWithChildren<HeaderProps>> = ({
                 active: isVisible,
               })}
             >
-              <Navigation>
+              <Navigation onItemClick={handleChangeIsVisible}>
                 {NavigationElements}
                 {SignInElement}
               </Navigation>