leaflet.pub
a tool for shared writing and social publishing
simplied the scroll logic, fixed a boo boo
cozylittle.house
+16
-13
+14
-9
app/p/[didOrHandle]/(profile)/ProfileTabs.tsx
+14
-9
app/p/[didOrHandle]/(profile)/ProfileTabs.tsx
···
22
22
const profileContent = document.getElementById("profile-content");
23
23
const handleScroll = () => {
24
24
if (profileContent) {
25
-
setScrollPosWithinTabContent(profileContent.scrollTop - headerHeight);
25
+
setScrollPosWithinTabContent(
26
+
profileContent.scrollTop - headerHeight > 0
27
+
? profileContent.scrollTop - headerHeight
28
+
: 0,
29
+
);
26
30
}
27
31
};
32
+
console.log("content: " + profileContent);
33
+
console.log("header: " + headerHeight);
28
34
29
35
if (profileContent) {
30
36
profileContent.addEventListener("scroll", handleScroll);
···
34
40
35
41
const baseUrl = `/p/${props.didOrHandle}`;
36
42
const bgColor = !cardBorderHidden ? "var(--bg-leaflet)" : "var(--bg-page)";
43
+
37
44
console.log(scrollPosWithinTabContent);
38
45
39
46
return (
40
47
<div className="flex flex-col w-full sticky top-3 sm:top-4 z-10 sm:px-4 px-3">
41
48
<div
42
49
style={
43
-
scrollPosWithinTabContent < 0
44
-
? { paddingLeft: "0", paddingRight: "0" }
45
-
: scrollPosWithinTabContent > 0 && scrollPosWithinTabContent < 20
46
-
? {
47
-
paddingLeft: `calc(${scrollPosWithinTabContent / 20} * 12px )`,
48
-
paddingRight: `calc(${scrollPosWithinTabContent / 20} * 12px )`,
49
-
}
50
-
: { paddingLeft: "12px", paddingRight: "12px" }
50
+
scrollPosWithinTabContent < 20
51
+
? {
52
+
paddingLeft: `calc(${scrollPosWithinTabContent / 20} * 12px )`,
53
+
paddingRight: `calc(${scrollPosWithinTabContent / 20} * 12px )`,
54
+
}
55
+
: { paddingLeft: "12px", paddingRight: "12px" }
51
56
}
52
57
>
53
58
<div
+2
-4
app/p/[didOrHandle]/(profile)/layout.tsx
+2
-4
app/p/[didOrHandle]/(profile)/layout.tsx
···
48
48
<ProfileDashboardLayout did={did}>
49
49
<div className="h-full">
50
50
<div
51
+
id="profile-content"
51
52
className={`
52
53
max-w-prose mx-auto w-full h-full
53
54
flex flex-col
···
57
58
>
58
59
<ProfileHeader profile={profile} publications={publications || []} />
59
60
<ProfileTabs didOrHandle={params.didOrHandle} />
60
-
<div
61
-
className="h-full pt-3 pb-4 px-3 sm:px-4 flex flex-col"
62
-
id="profileContent"
63
-
>
61
+
<div className="h-full pt-3 pb-4 px-3 sm:px-4 flex flex-col">
64
62
{props.children}
65
63
</div>
66
64
</div>