{label} diff --git a/src/tsx/components/sections/Faq.tsx b/src/tsx/components/sections/Faq.tsx index ee4c150..0f1116c 100644 --- a/src/tsx/components/sections/Faq.tsx +++ b/src/tsx/components/sections/Faq.tsx @@ -9,7 +9,7 @@ function Faq() {
- Das Forschungsprojekt Green-Ecolution ist aus einem
+ Das Forschungsprojekt Green Ecolution ist aus einem
Master-Forschungsprojekt der Hochschule-Flensburg
hervorgegangen und beschäftigt sich mit der smarten
Bewässerung von Bäumen und Beeten.
diff --git a/src/tsx/layout/Header.tsx b/src/tsx/layout/Header.tsx
index 19375f8..a42c595 100644
--- a/src/tsx/layout/Header.tsx
+++ b/src/tsx/layout/Header.tsx
@@ -1,16 +1,17 @@
-import * as React from 'react';
+import { useState, useEffect } from 'react';
import Lottie from "lottie-react";
import MainNavigation from '../components/navigation/MainNavigation';
import logoAnimation from '../../json/logoAnimation.json'
function Header() {
- const [open, setOpen] = React.useState(false);
+ const [open, setOpen] = useState(false);
+ const [isScrolled, setIsScrolled] = useState(false);
function toggleNavigation(state: boolean) {
setOpen(state);
}
- React.useEffect(() => {
+ useEffect(() => {
function handleResize() {
if (window.matchMedia('(min-width: 1024px)').matches) {
setOpen(false);
@@ -22,7 +23,7 @@ function Header() {
return () => { window.removeEventListener('resize', handleResize) };
}, []);
- React.useEffect(() => {
+ useEffect(() => {
open
? document.body.classList.add('overflow-hidden')
: document.body.classList.remove('overflow-hidden');
@@ -30,14 +31,28 @@ function Header() {
return () => { document.body.classList.remove('overflow-hidden') };
}, [open]);
+ useEffect(() => {
+ const handleScroll = () => {
+ const scrollTop = window.scrollY;
+ scrollTop > 50 ? setIsScrolled(true) : setIsScrolled(false);
+ };
+
+ window.addEventListener("scroll", handleScroll);
+
+ return () => window.removeEventListener("scroll", handleScroll);
+ }, []);
+
return (
-
+
Green Ecolution