Skip to content

Commit

Permalink
Merge pull request #310 from celestiaorg/hotfix/sidepanel-update-on-s…
Browse files Browse the repository at this point in the history 
…croll

Hotfix/sidepanel update on scroll
  • Loading branch information
@alex-beckett
alex-beckett authored Dec 12, 2023
2 parents f0b97da + 187b4a8 commit af7757d
Show file tree
Hide file tree
Showing 2 changed files with 82 additions and 24 deletions.
97 changes: 78 additions & 19 deletions src/pages/what-is-celestia.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState } from "react";
import React, { useState, useEffect, useRef } from "react";
import Layout from "../components/layout";
import { FooterBoxes2 } from "../datas/what-is-celestia/content";
import { tableOfContent } from "../datas/what-is-celestia/toc";
Expand All @@ -19,9 +19,32 @@ import celestia_connections from "../images/what-is-celestia/celestia-connection
const WhatIsCelestia = () => {
const [showTocCategories, setShowTocCategories] = useState(false);
const [selectedItem, setSelectedItem] = useState(0);
const handleItemClick = (index) => {
setSelectedItem(index);
};
const sectionRefs = useRef([]);
// const handleItemClick = (index) => {
// setSelectedItem(index);
// };

useEffect(() => {
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const sectionIndex = sectionRefs.current.indexOf(entry.target);
setSelectedItem(sectionIndex);
}
});
},
{ rootMargin: "-30% 0px -30% 0px", threshold: 0 }
);

sectionRefs.current.forEach((ref) => observer.observe(ref));

return () => {
if (sectionRefs.current) {
sectionRefs.current.forEach((ref) => observer.unobserve(ref));
}
};
}, []);

return (
<Layout footerBoxes2={FooterBoxes2}>
Expand Down Expand Up @@ -74,16 +97,19 @@ const WhatIsCelestia = () => {
<div
key={index}
className={selectedItem === index ? "selected" : ""}
onClick={() => handleItemClick(index)}
onKeyDown={(event) => {
if (event.key === "Enter") {
handleItemClick(index);
}
}}
// onClick={() => handleItemClick(index)}
// onKeyDown={(event) => {
// if (event.key === "Enter") {
// handleItemClick(index);
// }
// }}
tabIndex={0}
role='button'
>
<AnchorLink to={`/what-is-celestia/#${item.id.replace(/\s+/g, "-").toLowerCase()}`}>
<AnchorLink
to={`/what-is-celestia/#${item.id.replace(/\s+/g, "-").toLowerCase()}`}
stripHash
>
{item.value}
</AnchorLink>
</div>
Expand All @@ -95,7 +121,11 @@ const WhatIsCelestia = () => {
</div>
</div>
<div className='col-lg-9 ps-lg-4 p-xl-5'>
<section className={"tell-me-about-celestia"} id={`${tableOfContent[0].id.replace(/\s+/g, "-").toLowerCase()}`}>
<section
ref={(el) => (sectionRefs.current[0] = el)}
className={"tell-me-about-celestia"}
id={`${tableOfContent[0].id.replace(/\s+/g, "-").toLowerCase()}`}
>
<div className={"row justify-content-between align-items-center"}>
<div className={"col-12 col-lg-6 mb-2 mb-lg-0"}>
<h2 className='title'>Tell me about Celestia</h2>
Expand All @@ -121,7 +151,11 @@ const WhatIsCelestia = () => {
</div>
</section>

<section className={"what-is-data-availability"} id={`${tableOfContent[1].id.replace(/\s+/g, "-").toLowerCase()}`}>
<section
ref={(el) => (sectionRefs.current[1] = el)}
className={"what-is-data-availability"}
id={`${tableOfContent[1].id.replace(/\s+/g, "-").toLowerCase()}`}
>
<div className={"row justify-content-between align-items-center"}>
<div className={"image-box--analogy order-2 order-lg-1 col-12 col-lg-6"}>
<div className='image-wrapper'>
Expand All @@ -145,7 +179,11 @@ const WhatIsCelestia = () => {
</div>
</section>

<section className={"data-availability-sampling"} id={`${tableOfContent[2].id.replace(/\s+/g, "-").toLowerCase()}`}>
<section
ref={(el) => (sectionRefs.current[2] = el)}
className={"data-availability-sampling"}
id={`${tableOfContent[2].id.replace(/\s+/g, "-").toLowerCase()}`}
>
<h2 className='title'>Now what's data availability sampling?</h2>
<div className={"image-box--different"}>
<div className='image-wrapper'>
Expand All @@ -163,7 +201,11 @@ const WhatIsCelestia = () => {
</p>
</section>

<section className={"what-are-rollups"} id={`${tableOfContent[3].id.replace(/\s+/g, "-").toLowerCase()}`}>
<section
ref={(el) => (sectionRefs.current[3] = el)}
className={"what-are-rollups"}
id={`${tableOfContent[3].id.replace(/\s+/g, "-").toLowerCase()}`}
>
<div className={"row justify-content-between align-items-center"}>
<div className={"order-2 order-lg-1 col-12 col-lg-6"}>
<h2 className='title'>What are rollups and how do they work with Celestia?</h2>
Expand All @@ -187,7 +229,11 @@ const WhatIsCelestia = () => {
</div>
</section>

<section className={"what-is-a-modular-blockchain"} id={`${tableOfContent[4].id.replace(/\s+/g, "-").toLowerCase()}`}>
<section
ref={(el) => (sectionRefs.current[4] = el)}
className={"what-is-a-modular-blockchain"}
id={`${tableOfContent[4].id.replace(/\s+/g, "-").toLowerCase()}`}
>
<h2 className='title'>And what is a modular blockchain?</h2>
<div className={"image-box--different"}>
<div className='image-wrapper'>
Expand All @@ -203,6 +249,7 @@ const WhatIsCelestia = () => {
</section>

<section
ref={(el) => (sectionRefs.current[5] = el)}
className={"whats-it-like-to-build-on-Celestia"}
id={`${tableOfContent[5].id.replace(/\s+/g, "-").toLowerCase()}`}
>
Expand Down Expand Up @@ -274,7 +321,11 @@ const WhatIsCelestia = () => {
</section>

<section className='celestia-community'>
<div className={"modularism-not-maximalism"} id={`${tableOfContent[6].id.replace(/\s+/g, "-").toLowerCase()}`}>
<div
ref={(el) => (sectionRefs.current[6] = el)}
className={"modularism-not-maximalism"}
id={`${tableOfContent[6].id.replace(/\s+/g, "-").toLowerCase()}`}
>
<h2 className='section-title'>What the Celestia community stands for</h2>
<div className={"row justify-content-between align-items-center"}>
<div className={"col-12 col-lg-6"}>
Expand All @@ -299,7 +350,11 @@ const WhatIsCelestia = () => {
</div>
</div>

<div className={"layer-0-social-consensus"} id={`${tableOfContent[7].id.replace(/\s+/g, "-").toLowerCase()}`}>
<div
ref={(el) => (sectionRefs.current[7] = el)}
className={"layer-0-social-consensus"}
id={`${tableOfContent[7].id.replace(/\s+/g, "-").toLowerCase()}`}
>
<div className={"row justify-content-between align-items-center"}>
<div className={"order-2 order-lg-1 image-box--rollups col-12 col-lg-6"}>
<div className='image-wrapper'>
Expand All @@ -318,7 +373,11 @@ const WhatIsCelestia = () => {
</div>
</div>
</section>
<section className={"start-using-celestia"} id={`${tableOfContent[8].id.replace(/\s+/g, "-").toLowerCase()}`} />
<section
ref={(el) => (sectionRefs.current[8] = el)}
className={"start-using-celestia"}
id={`${tableOfContent[8].id.replace(/\s+/g, "-").toLowerCase()}`}
/>
</div>
</div>
</div>
Expand Down
9 changes: 4 additions & 5 deletions src/scss/pages/page-what-is-celestia.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,6 @@
}
}

.sticky-container {
position: relative;
z-index: 10;
}

.lead-text {
font-family: $inter;
font-size: 18px;
Expand Down Expand Up @@ -478,6 +473,7 @@
display: none;
cursor: pointer;
background: rgba(246, 246, 246, 0.7);
backdrop-filter: blur(10px);
border-radius: 6px;
padding: 25px;
margin-bottom: 10px;
Expand Down Expand Up @@ -680,6 +676,9 @@
}

.what-is-celestia + footer {
@include media-breakpoint-down(lg) {
padding-top: 400px;
}
@include media-breakpoint-down(md) {
padding-top: 600px;
}
Expand Down

0 comments on commit af7757d

Please sign in to comment.