diff --git a/components/Footer.jsx b/components/Footer.jsx
index eed8bc80..b1b17cdb 100644
--- a/components/Footer.jsx
+++ b/components/Footer.jsx
@@ -77,7 +77,7 @@ function Footer() {
- 
+
diff --git a/components/navbar-components/NavBarProjects.jsx b/components/navbar-components/NavBarProjects.jsx
new file mode 100644
index 00000000..c4fdebd4
--- /dev/null
+++ b/components/navbar-components/NavBarProjects.jsx
@@ -0,0 +1,93 @@
+import React, { useState, useEffect } from 'react';
+import NavHeader from './NavHeader';
+import NavMenu from './NavMenu';
+import style from 'styles/NavBarProjects.module.css';
+import { Button } from '@mui/material';
+
+function NavBarProjects(props) {
+ const [menu, setMenuState] = useState(false);
+ const [scrollDir, setScrollDir] = useState('top');
+
+ const toggleMenu = (open) => {
+ setMenuState(open);
+ };
+
+ useEffect(() => {
+ const closeMenu = () => {
+ toggleMenu(false);
+ };
+
+ window.addEventListener('resize', closeMenu);
+
+ return () => window.removeEventListener('resize', closeMenu);
+ }, []);
+
+ useEffect(() => {
+ toggleMenu(false);
+ const threshold = 5;
+ const topThreshHold = 90;
+
+ let lastYPos = window.pageYOffset;
+ let ticking = false;
+
+ const updateScrollDir = () => {
+ const currYPos = window.pageYOffset;
+
+ if (currYPos > topThreshHold) {
+ if (Math.abs(currYPos - lastYPos) < threshold) {
+ ticking = false;
+ return;
+ }
+ setScrollDir(currYPos > lastYPos ? 'down' : 'up');
+ lastYPos = currYPos > 0 ? currYPos : 0;
+ } else {
+ setScrollDir('top');
+ }
+ ticking = false;
+ };
+
+ const onScroll = () => {
+ if (!ticking) {
+ window.requestAnimationFrame(updateScrollDir);
+ ticking = true;
+ }
+ };
+
+ window.addEventListener('scroll', onScroll);
+
+ return () => window.removeEventListener('scroll', onScroll);
+ }, [scrollDir]);
+
+ return (
+
+
+
+
+
+
+
+