diff options
| author | Rafi Zadanly <rafizadanly@gmail.com> | 2022-12-29 16:05:43 +0700 |
|---|---|---|
| committer | Rafi Zadanly <rafizadanly@gmail.com> | 2022-12-29 16:05:43 +0700 |
| commit | ba6eca41f673f8db4d9f686fb7dab2358a4dc5eb (patch) | |
| tree | 2a92d5ec3ffd132862e69b9ad32129ce5d70105e /src/components | |
| parent | a3ec730b64199dd179ff9fd29216bf0d479fa952 (diff) | |
no message
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/AppBar.js | 17 |
1 files changed, 16 insertions, 1 deletions
diff --git a/src/components/AppBar.js b/src/components/AppBar.js index 55af9f1a..1da2510a 100644 --- a/src/components/AppBar.js +++ b/src/components/AppBar.js @@ -1,17 +1,32 @@ import { ArrowLeftIcon, HeartIcon, HomeIcon } from "@heroicons/react/24/outline"; import Head from "next/head"; import { useRouter } from "next/router"; +import { useEffect, useState } from "react"; import Link from "./Link"; const AppBar = ({ title }) => { const router = useRouter(); + const [scrollPosition, setScrollPosition] = useState(0); + const handleScrollPosition = () => { + const position = window.pageYOffset; + setScrollPosition(position); + } + + useEffect(() => { + window.addEventListener('scroll', handleScrollPosition, { passive: true }); + + return () => { + window.addEventListener('scroll', handleScrollPosition); + }; + }, []); + return ( <> <Head> <title>{ title } - Indoteknik</title> </Head> - <div className="flex justify-between pr-4 border-b border-gray_r-6 bg-gray_r-1"> + <div className={"sticky-header flex justify-between !p-0 !pr-4 idt-transition " + (scrollPosition > 0 && "shadow border-b-transparent" ) }> {/* --- Start Title */} <div className="flex items-center"> <button type="button" onClick={() => router.back()} className="text-gray_r-12 px-4 py-5"> |