From d4a7caec47f70659eb9373dff901016660bde806 Mon Sep 17 00:00:00 2001
From: Alvaro <pursuance@gmail.com>
Date: Mon, 28 Oct 2024 10:14:45 +0100
Subject: [PATCH] Hero: lines should be visible through the header

---
 src/components/header/index.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
index abb47e0..b794026 100644
--- a/src/components/header/index.tsx
+++ b/src/components/header/index.tsx
@@ -12,6 +12,7 @@ import { useState, useEffect, useRef } from "react";
 export default function Header() {
   const [, setOpenedMenu] = useRecoilState(menuAtom);
   const [isVisible, setIsVisible] = useState(true);
+  const [isAtTop, setIsAtTop] = useState(true);
   const lastScrollY = useRef(0);
 
   const handleScroll = () => {
@@ -24,7 +25,7 @@ export default function Header() {
       // Scrolling up
       setIsVisible(true);
     }
-
+    setIsAtTop(currentScrollY === 0);
     lastScrollY.current = currentScrollY;
   };
 
@@ -51,10 +52,12 @@ export default function Header() {
   );
 
   return (
-    <header className={cn("fixed inset-0 w-full h-[90px] py-6 flex z-40 transition-transform duration-500 bg-blue-900",
+    <header className={cn("fixed inset-0 w-full h-[90px] py-6 flex z-40 transition-transform duration-500",
       {
         "translate-y-0": isVisible,
-        "-translate-y-full": !isVisible
+        "-translate-y-full": !isVisible,
+        "bg-blue-900": !isAtTop,
+        "bg-transparent": isAtTop
       })
     }>
       <div className="container flex justify-between items-center">