Added ToS/Privacy to footer

Roadmap fixed scroll when popup

Author: gtnardy

docusaurus.config.js

@@ -127,6 +127,14 @@ module.exports = {
       copyright: `© ${new Date().getFullYear()} Go Horse Studios.`,
       style: 'light',
       links: [
+        {
+          label: 'Terms of Service',
+          href: 'https://gohorsestudios.com/tos',
+        },
+        {
+          label: 'Privacy',
+          href: 'https://gohorsestudios.com/privacy',
+        },
         {
           label: 'Imprint',
           href: 'https://gohorsestudios.com/imprint',

src/pages/roadmap/index.js

@@ -60,9 +60,14 @@ const GetLabels = (labels) => (
 const Roadmap = () => {
 	const [item, setItem] = useState([]);
 
+	const setPopupOpen = (open) => {
+		document.getElementById("popup")?.classList.toggle(styles["popup-container-visible"], open);
+		document.documentElement.classList.toggle('roadmap-popup-open', open);
+	};
+
 	const Item = ({ title, image, video, description, labels, external_link, external_link_title }) => (
 		<button key={title} className={clsx("item", styles.item)} onClick={function() {
-				document.getElementById("popup").classList.add(styles["popup-container-visible"]);
+				setPopupOpen(true);
 				setItem({ title, image, video, description, labels, external_link, external_link_title });
 			}}>
 			{ image ? <ImageExternal path={image} /> : null }
@@ -94,7 +99,7 @@ const Roadmap = () => {
 		<>
 			<div id="popup" className={clsx("popup-container", styles["popup-container"])}>
 				<button className={clsx("popup-background", styles["popup-background"])} onClick={ function() {
-					document.getElementById("popup").classList.remove(styles["popup-container-visible"]);
+					setPopupOpen(false);
 				} }></button>
 				<div className={clsx("popup-content", styles["popup-content"])}>
 					{ item.image ? <ImageExternal className={clsx("popup-image", styles["popup-image"])} path={item.image} /> : null }
@@ -108,7 +113,7 @@ const Roadmap = () => {
 					<span id="popup-labels" className={clsx("popup-labels", styles["popup-labels"])}>{ GetLabels(item.labels) }</span>
 				</div>
 				<button className={clsx("popup-close", styles["popup-close"])} onClick={ function() {
-					document.getElementById("popup").classList.remove(styles["popup-container-visible"]);
+					setPopupOpen(false);
 				} }>x</button>
 			</div>
 			<Layout title="Roadmap" description="nanos world Roadmap">

src/pages/roadmap/styles.module.css

@@ -8,6 +8,10 @@ button {
 	outline: inherit;
 }
 
+:global(html.roadmap-popup-open) {
+	overflow: hidden;
+}
+
 .item-labels {
 	display: flex;
 	flex-wrap: wrap;
@@ -187,6 +191,7 @@ html[data-theme='light'] .label-text {
 	box-sizing: border-box;
 	justify-content: center;
 	overflow: auto;
+	overscroll-behavior: contain;
 	background: rgba(15, 15, 15, 0.85);
 	z-index: 20000;
 }