From 1f67f7c32f8d9c7476bbe517751a7e9e5efaddc4 Mon Sep 17 00:00:00 2001
From: Mostafa Talaat <mostafatalaat770@gmail.com>
Date: Wed, 20 Jul 2022 13:23:28 +0200
Subject: [PATCH 1/2] fix(header): make header sticky not fixed

---
 src/components/molecules/Header/Header.scss | 2 --
 src/components/molecules/Header/Header.tsx  | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/molecules/Header/Header.scss b/src/components/molecules/Header/Header.scss
index 3448cfdd..2bb77b27 100644
--- a/src/components/molecules/Header/Header.scss
+++ b/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;
     }
diff --git a/src/components/molecules/Header/Header.tsx b/src/components/molecules/Header/Header.tsx
index fca557f5..e5964bf0 100644
--- a/src/components/molecules/Header/Header.tsx
+++ b/src/components/molecules/Header/Header.tsx
@@ -54,7 +54,7 @@ export const Header: FC<React.PropsWithChildren<HeaderProps>> = ({
   };
 
   return (
-    <header>
+    <header className="sticky">
       <div
         className={classnames('header-outer', {
           header__fixed: isScrolled,

From a2c3b7280282ebc1945a25dcd87b215c53a4fb3b Mon Sep 17 00:00:00 2001
From: Mostafa Talaat <mostafatalaat770@gmail.com>
Date: Wed, 20 Jul 2022 13:48:19 +0200
Subject: [PATCH 2/2] fix(header): hide mobile nav on item click

---
 src/components/atoms/Navigation/Navigation.tsx | 14 ++++++++++++--
 src/components/molecules/Header/Header.tsx     |  4 ++--
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/atoms/Navigation/Navigation.tsx b/src/components/atoms/Navigation/Navigation.tsx
index b659e10a..980a96be 100644
--- a/src/components/atoms/Navigation/Navigation.tsx
+++ b/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>;
 };
diff --git a/src/components/molecules/Header/Header.tsx b/src/components/molecules/Header/Header.tsx
index e5964bf0..2a19d912 100644
--- a/src/components/molecules/Header/Header.tsx
+++ b/src/components/molecules/Header/Header.tsx
@@ -52,7 +52,7 @@ export const Header: FC<React.PropsWithChildren<HeaderProps>> = ({
 
     setIsVisible((prevState) => !prevState);
   };
-
+  
   return (
     <header className="sticky">
       <div
@@ -95,7 +95,7 @@ export const Header: FC<React.PropsWithChildren<HeaderProps>> = ({
                 active: isVisible,
               })}
             >
-              <Navigation>
+              <Navigation onItemClick={handleChangeIsVisible}>
                 {NavigationElements}
                 {SignInElement}
               </Navigation>