feat(header): create an opacity transition when scrolling

iqbalpa · Jul 11, 2024 · aead8e8 · aead8e8
1 parent a0df36e
commit aead8e8
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 5 deletions.
diff --git a/src/components/backdrop/backdrop.tsx b/src/components/backdrop/backdrop.tsx
@@ -12,7 +12,7 @@ const Backdrop: React.FC<IBackdrop> = ({ movie, backdrop }) => {
   const [isLoading, setIsLoading] = useState(true);
 
   return (
-    <div className="relative mt-16 h-[28rem] w-full">
+    <div className="relative h-[32rem] w-full">
       <div className="absolute inset-0 z-20 bg-black bg-opacity-30"></div>
       <div className="absolute bottom-0 left-0 z-20 p-4 px-60 text-white">
         <p className="mb-2 text-2xl font-bold">

diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
@@ -1,9 +1,30 @@
+'use client';
+
 import Link from 'next/link';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 const Header: React.FC = () => {
+  const [isScrolled, setIsScrolled] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY > 0) {
+        setIsScrolled(true);
+      } else {
+        setIsScrolled(false);
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
   return (
-    <div className="fixed top-0 z-30 h-16 w-full bg-slate-800 p-4">
+    <div
+      className={`fixed top-0 z-30 h-16 w-full p-4 transition-all duration-500 ${
+        isScrolled ? 'bg-opacity-100' : 'bg-opacity-10'
+      } bg-slate-800`}
+    >
       <Link href="/" className="text-2xl font-bold text-white">
         Movies Catalog
       </Link>

diff --git a/src/modules/detailMovie/detailMovie.tsx b/src/modules/detailMovie/detailMovie.tsx
@@ -35,10 +35,10 @@ const DetailMovieModule: React.FC<IDetailMovieModule> = ({ id }) => {
 
   return (
     <div className="">
-      <div className="relative mt-16 h-[32rem] w-full">
+      <div className="relative h-[36rem] w-full">
         <button
           onClick={handleBack}
-          className="absolute left-5 top-5 z-50 flex flex-row gap-2 rounded-full bg-slate-600 bg-opacity-80 px-5 py-3 text-white duration-100 hover:scale-105 hover:cursor-pointer hover:bg-slate-800 hover:bg-opacity-95"
+          className="absolute left-5 top-20 z-50 flex flex-row gap-2 rounded-full bg-slate-600 bg-opacity-80 px-5 py-3 text-white duration-100 hover:scale-105 hover:cursor-pointer hover:bg-slate-800 hover:bg-opacity-95"
         >
           <CircleArrowLeft />
           <p>Back</p>