update code and styles

src/components/layout/Header.tsx

@@ -7,7 +7,7 @@
  * Menu open/close + sidebar state is read from HeaderUIProvider so BodyOverlay (sibling at body level) can react.
  */
 
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useState } from "react";
 import Link from "next/link";
 import Image from "next/image";
 import { usePathname } from "next/navigation";
@@ -48,7 +48,7 @@ export default function Header() {
   //   - on doc.ready: $('.header-hide-until-scroll').addClass('header-visible-scrolled')
   //   - on scroll:   toggleClass('dm-header-scrolled', scrollTop > 50)
   const [visibleScrolled, setVisibleScrolled] = useState(false);
-  const isScrolledRef = useRef(false);
+  const [isScrolled, setIsScrolled] = useState(false);
 
   useEffect(() => {
     const handle = requestAnimationFrame(() => {
@@ -63,17 +63,7 @@ export default function Header() {
       if (rafId !== null) return;
       rafId = requestAnimationFrame(() => {
         const scrolled = window.scrollY > 50;
-        if (isScrolledRef.current !== scrolled) {
-          isScrolledRef.current = scrolled;
-          const headerEl = document.querySelector(".header-hide-until-scroll");
-          if (headerEl) {
-            if (scrolled) {
-              headerEl.classList.add("dm-header-scrolled");
-            } else {
-              headerEl.classList.remove("dm-header-scrolled");
-            }
-          }
-        }
+        setIsScrolled(scrolled);
         rafId = null;
       });
     };
@@ -99,7 +89,7 @@ export default function Header() {
     "e-parent",
     "header-hide-until-scroll",
     visibleScrolled ? "header-visible-scrolled" : "",
-    isScrolledRef.current ? "dm-header-scrolled" : "",
+    isScrolled ? "dm-header-scrolled" : "",
   ]
     .filter(Boolean)
     .join(" ");