Modify logics for setting background of GlobalNavigation

apps/blog/src/components/GlobalNavigation/index.module.scss

@@ -4,10 +4,6 @@
     left: 0;
     width: 100%;
     padding: 0 12px;
-    background-color: color(navigation-background);
-    -webkit-backdrop-filter: blur(8px) saturate(180%);
-    backdrop-filter: blur(8px) saturate(180%);
-    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
     z-index: 1000;
 
     &__container {

apps/blog/src/components/GlobalNavigation/index.tsx

@@ -5,6 +5,7 @@ import Drawer from "#components/Drawer";
 import Logo from "#components/Logo";
 import ThemeToggle from "#components/ThemeToggle";
 import Typography from "#components/Typography";
+import GlobalNavigationBackground from "#components/GlobalNavigationBackground";
 import { getCategories } from "#utils/post";
 import styles from "./index.module.scss";
 
@@ -37,6 +38,7 @@ function GlobalNavigation() {
                     <ThemeToggle />
                 </div>
             </div>
+            <GlobalNavigationBackground />
         </nav>
     );
 }

apps/blog/src/components/GlobalNavigationBackground/index.module.scss

@@ -0,0 +1,14 @@
+.global-navigation-background {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: color(navigation-background);
+    -webkit-backdrop-filter: blur(8px) saturate(180%);
+    backdrop-filter: blur(8px) saturate(180%);
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
+    opacity: 0;
+    transition: opacity 0.25s $ease-in-out-cubic;
+    z-index: -1;
+}

apps/blog/src/components/GlobalNavigationBackground/index.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { classNames } from "@marshallku/utils";
+import styles from "./index.module.scss";
+
+const cx = classNames(styles, "global-navigation-background");
+
+function GlobalNavigationBackground() {
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const handleScroll = () => {
+            if (!containerRef.current) {
+                return;
+            }
+
+            const { scrollY } = window;
+            const { current: container } = containerRef;
+
+            container.style.opacity = scrollY > 0 ? "1" : "0";
+        };
+
+        window.addEventListener("scroll", handleScroll, { passive: true });
+
+        return () => {
+            window.removeEventListener("scroll", handleScroll);
+        };
+    }, []);
+
+    return <div className={cx()} ref={containerRef} />;
+}
+
+export default GlobalNavigationBackground;