+
+
diff --git a/components/navbar-components/NavBar.jsx b/components/navbar-components/NavBar.jsx
index 09380ceb..f71e0040 100644
--- a/components/navbar-components/NavBar.jsx
+++ b/components/navbar-components/NavBar.jsx
@@ -2,81 +2,93 @@ import React, { useState, useEffect } from 'react';
import NavHeader from './NavHeader';
import NavMenu from './NavMenu';
import style from 'styles/NavBar.module.css';
+import { Button } from '@mui/material';
+import useTranslation from 'next-translate/useTranslation';
function NavBar(props) {
- const [menu, setMenuState] = useState(false);
- const [scrollDir, setScrollDir] = useState('top');
+ const [menu, setMenuState] = useState(false);
+ const [scrollDir, setScrollDir] = useState('top');
- const toggleMenu = (open) => {
- setMenuState(open);
- };
+ const { t } = useTranslation();
+ const projectPageLabel = t('common:navigation.backToProjects');
+ const projectPageHref = t('common:navigation.projectsPageLink');
- useEffect(() => {
- const closeMenu = () => {
- toggleMenu(false);
+ const toggleMenu = (open) => {
+ setMenuState(open);
};
- 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;
- };
+ useEffect(() => {
+ const closeMenu = () => {
+ toggleMenu(false);
+ };
- const onScroll = () => {
- if (!ticking) {
- window.requestAnimationFrame(updateScrollDir);
- ticking = true;
- }
- };
+ 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;
+ };
- window.addEventListener('scroll', onScroll);
-
- return () => window.removeEventListener('scroll', onScroll);
- }, [scrollDir]);
-
- return (
- 
-
-
+