From 51cfd7da1606064578a6fba1adef76680f67c399 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dorien=20Gr=C3=B6nwald?=
 <dorien.groenwald@visuellverstehen.de>
Date: Mon, 16 Sep 2024 08:35:06 +0200
Subject: [PATCH] feat: add background to header while scrolling down

---
 src/tsx/components/navigation/NavItem.tsx |  2 +-
 src/tsx/layout/Header.tsx                 | 27 ++++++++++++++++++-----
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/tsx/components/navigation/NavItem.tsx b/src/tsx/components/navigation/NavItem.tsx
index 095586e..73edc4a 100644
--- a/src/tsx/components/navigation/NavItem.tsx
+++ b/src/tsx/components/navigation/NavItem.tsx
@@ -12,7 +12,7 @@ const NavItem: React.FC<NavItemProps> = ({ label, url, isExternalLink = false })
             <a
                 href={url}
                 target={isExternalLink ? '_blank' : '_self'}
-                className="text-lg md:text-2xl font-bold flex justify-between items-center group lg:text-lg"
+                className="text-lg md:text-2xl font-bold flex justify-between items-center group lg:text-lg lg:leading-none lg:mb-2"
             >
                 <p className="transition-color ease-in-out duration-300 group-hover:text-green-light-900 lg:group-hover:text-green-middle-900">
                     {label}
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 (
-        <header className={`fixed w-screen inset-x-0 top-0 z-50 before:w-screen before:transition-all before:ease-in-out before:duration-300 before:h-screen before:absolute before:bg-grey-900 before:-z-10 lg:before:transition-none ${open ? 'before:visible before:opacity-60' : 'before:opacity-0 before:invisible'}`}>
+        <header className={`fixed w-screen inset-x-0 top-0 z-50 transition-all ease-in-out duration-300 before:w-screen before:transition-all before:ease-in-out before:duration-300 before:h-screen before:absolute before:bg-grey-900 before:-z-10 lg:before:transition-none
+            ${open ? 'before:visible before:opacity-60' : 'before:opacity-0 before:invisible'}
+            ${isScrolled ? 'bg-white shadow-md' : 'bg-transparent'}`
+        }>
             <div className="relative px-4 py-5 max-w-screen-lg mx-auto flex justify-between items-center md:px-6 xl:max-w-screen-xl">
                 <a href="/" aria-label="Zur Startseite navigieren" className={`flex items-center gap-x-4 xl:gap-x-5 ${open ? 'opacity-0' : ''}`}>
                     <figure className="w-24 xl:w-28">
                         <Lottie animationData={logoAnimation} />
                     </figure>
-                    <p className="hidden text-green-dark-900 font-lato font-semibold text-xl md:block xl:text-3xl">
+                    <p className="hidden text-green-dark-900 font-lato font-semibold text-xl md:block xl:text-2xl">
                         Green Ecolution
                     </p>
                 </a>