Implementar scroll-driven header

O header agora esconde para cima conforme a barra de rolagem desce, e reaparece quando a barra de rolagem sobe.

Author: lovable-dev[bot]

src/components/Header.tsx

@@ -6,6 +6,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { useIsMobile } from "@/hooks/use-mobile";
+import { useScrollDirection } from "@/hooks/use-scroll-direction";
 import { Github, Menu, Moon, Play, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
 import { Link, useLocation, useNavigate } from "react-router-dom";
@@ -15,6 +16,7 @@ const Header = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const isMobile = useIsMobile();
+  const scrollDirection = useScrollDirection();
 
   const isActiveLink = (path: string) => {
     return location.pathname === path || location.pathname.startsWith(path + "/");
@@ -26,7 +28,9 @@ const Header = () => {
 
   return (
     <header
-      className="border-b border-border backdrop-blur-sm sticky top-0 z-50"
+      className={`border-b border-border backdrop-blur-sm sticky top-0 z-50 transition-transform duration-300 ease-in-out ${
+        scrollDirection === "down" ? "-translate-y-full" : "translate-y-0"
+      }`}
       style={{ backgroundColor: "hsl(var(--header-bg))" }}
     >
       <div className="container mx-auto px-6 py-4">

src/hooks/use-scroll-direction.tsx

@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+
+export function useScrollDirection() {
+  const [scrollDirection, setScrollDirection] = useState<"up" | "down">("up");
+  const [lastScrollY, setLastScrollY] = useState(0);
+
+  useEffect(() => {
+    const updateScrollDirection = () => {
+      const scrollY = window.scrollY;
+      const direction = scrollY > lastScrollY ? "down" : "up";
+      
+      if (direction !== scrollDirection && Math.abs(scrollY - lastScrollY) > 10) {
+        setScrollDirection(direction);
+      }
+      
+      setLastScrollY(scrollY > 0 ? scrollY : 0);
+    };
+
+    window.addEventListener("scroll", updateScrollDirection);
+    return () => window.removeEventListener("scroll", updateScrollDirection);
+  }, [scrollDirection, lastScrollY]);
+
+  return scrollDirection;
+}