blob: f9dddf9d22905ac9284e39c15ac6feed6e6814b8 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
import { ChevronLeftIcon, 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 "../elements/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);
};
}, []);
const handleBackButtonClick = (event) => {
event.currentTarget.disabled = true;
router.back();
}
return (
<>
<Head>
<title>{ title } - Indoteknik</title>
</Head>
<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={handleBackButtonClick} className="text-gray_r-12 px-4 py-5">
<ChevronLeftIcon className="w-6 stroke-2"/>
</button>
<h1 className="text-h-md">{ title }</h1>
</div>
{/* --- End Title */}
{/* --- Start Icons */}
<div className="flex gap-x-4 items-center">
<Link href="/">
<HeartIcon className="w-6 stroke-2 text-gray_r-12"/>
</Link>
<Link href="/">
<HomeIcon className="w-6 stroke-2 text-gray_r-12"/>
</Link>
</div>
{/* --- End Icons */}
</div>
</>
);
};
export default AppBar;
|
