a tool for shared writing and social publishing
leaflet.pub
1"use client";
2import { useState, useEffect } from "react";
3import { useCardBorderHidden } from "./Pages/useCardBorderHidden";
4
5export const Header = (props: { children: React.ReactNode }) => {
6 let cardBorderHidden = useCardBorderHidden();
7 let [scrollPos, setScrollPos] = useState(0);
8
9 useEffect(() => {
10 const homeContent = document.getElementById("home-content");
11
12 const handleScroll = () => {
13 if (homeContent) {
14 setScrollPos(homeContent.scrollTop);
15 }
16 };
17
18 if (homeContent) {
19 homeContent.addEventListener("scroll", handleScroll);
20 return () => homeContent.removeEventListener("scroll", handleScroll);
21 }
22 }, []);
23
24 let headerBGColor = !cardBorderHidden
25 ? "var(--bg-leaflet)"
26 : "var(--bg-page)";
27
28 return (
29 <div
30 className={`
31 headerWrapper
32 sticky top-0 z-10
33 w-full bg-transparent
34 `}
35 >
36 <div
37 style={
38 scrollPos < 20
39 ? {
40 paddingLeft: `calc(${scrollPos / 20}*8px)`,
41 paddingRight: `calc(${scrollPos / 20}*8px)`,
42 }
43 : { paddingLeft: `8px`, paddingRight: `8px` }
44 }
45 >
46 <div
47 className={`
48 headerContent
49 border rounded-lg
50 ${scrollPos > 20 ? "border-border-light" : "border-transparent"}
51 py-1
52 w-full flex justify-between items-center gap-4`}
53 style={
54 scrollPos < 20
55 ? {
56 backgroundColor: !cardBorderHidden
57 ? `rgba(${headerBGColor}, ${scrollPos / 60 + 0.75})`
58 : `rgba(${headerBGColor}, ${scrollPos / 20})`,
59 paddingLeft: !cardBorderHidden
60 ? "4px"
61 : `calc(${scrollPos / 20}*4px)`,
62 paddingRight: !cardBorderHidden
63 ? "8px"
64 : `calc(${scrollPos / 20}*8px)`,
65 }
66 : {
67 backgroundColor: `rgb(${headerBGColor})`,
68 paddingLeft: "4px",
69 paddingRight: "8px",
70 }
71 }
72 >
73 {props.children}
74 </div>
75 </div>
76 </div>
77 );
78};