From 7e51bb10ef6fc0b97856cd3e123914fec5aa49bd Mon Sep 17 00:00:00 2001
From: adipginting <adi@adipginting.com>
Date: Tue, 25 Apr 2023 19:55:45 +0700
Subject: [PATCH 1/2] fix: fixing menu when scrolling up

---
 .husky/post-merge         | 0
 .husky/pre-commit         | 0
 src/components/NavBar.tsx | 7 ++++---
 3 files changed, 4 insertions(+), 3 deletions(-)
 mode change 100644 => 100755 .husky/post-merge
 mode change 100644 => 100755 .husky/pre-commit

diff --git a/.husky/post-merge b/.husky/post-merge
old mode 100644
new mode 100755
diff --git a/.husky/pre-commit b/.husky/pre-commit
old mode 100644
new mode 100755
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index 91d783c..f5efbef 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -28,7 +28,7 @@ export default function NavBar() {
   const { t } = useTranslation();
 
   return (
-    <div>
+    <div className="sticky top-0 z-30">
       <ToastContainer
         position="bottom-right"
         autoClose={2500}
@@ -110,8 +110,9 @@ export default function NavBar() {
             </div>
           </div>
           <div
-            className={`justify-self-center pb-3 mt-8 md:block md:pb-0 md:mt-0 ${navbar ? 'block' : 'hidden'
-              }`}
+            className={`justify-self-center pb-3 mt-8 md:block md:pb-0 md:mt-0 ${
+              navbar ? 'block' : 'hidden'
+            }`}
           >
             <div className="items-center justify-center space-y-8 md:flex md:space-x-6 md:space-y-0">
               <Link

From 8228a770a022ca1658d585b64c00a86768813f2c Mon Sep 17 00:00:00 2001
From: adipginting <apg.foss@gmail.com>
Date: Thu, 13 Jul 2023 17:16:19 +0700
Subject: [PATCH 2/2] fix: added a useEffect hook to allow navigation bar to
 appear when scrolling up and to hide when scrolling down

---
 src/components/NavBar.tsx | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index f5efbef..987cb53 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
@@ -15,6 +15,23 @@ import { useTranslation } from 'next-i18next';
 export default function NavBar() {
   const router = useRouter();
   const [navbar, setNavbar] = useState(false);
+  const [navBarHideScrollY, setNavBarHideScrollY] = useState(0);
+  const [isHidden, setIsHidden] = useState(false);
+
+  useEffect(() => {
+    const scrollHandler = () => {
+      if (navBarHideScrollY > window.scrollY) {
+        setIsHidden(false);
+      } else {
+        setIsHidden(true);
+      }
+      setNavBarHideScrollY(window.scrollY);
+    };
+    window.addEventListener('scroll', scrollHandler);
+    return () => {
+      window.removeEventListener('scroll', scrollHandler);
+    };
+  }, [navBarHideScrollY]);
 
   const onToggleLanguageClick = (newLocale: string) => {
     const { pathname, asPath, query } = router;
@@ -28,7 +45,7 @@ export default function NavBar() {
   const { t } = useTranslation();
 
   return (
-    <div className="sticky top-0 z-30">
+    <div className={'sticky top-0 z-30 ' + (isHidden ? 'hidden' : '')}>
       <ToastContainer
         position="bottom-right"
         autoClose={2500}