Sticky

cohstats · Oct 2, 2024 · 1e65270 · 1e65270
1 parent 5ad4ca7
commit 1e65270
Showing 1 changed file with 28 additions and 38 deletions.
diff --git a/screens/about/index.tsx b/screens/about/index.tsx
@@ -11,9 +11,7 @@ import {
   Divider,
   Space,
   Text,
-  Affix,
 } from "@mantine/core";
-//import { createStyles } from '@mantine/emotion';
 import React, { useEffect } from "react";
 import { AnalyticsAboutAppPageView } from "../../src/firebase/analytics";
 import { generateKeywordsString } from "../../src/head-utils";
@@ -22,7 +20,6 @@ import DonateSection from "./DonateSection";
 import Link from "next/link";
 import config from "../../config";
 import DataSection from "./DataSection";
-import { useMediaQuery } from "@mantine/hooks";
 
 const BugReports = () => {
   return (
@@ -236,8 +233,6 @@ const About: NextPage = () => {
     AnalyticsAboutAppPageView();
   }, []);
 
-  const isMobile = useMediaQuery("(max-width: 768px)");
-
   return (
     <div>
       {/*This is custom HEAD overwrites the default one*/}
@@ -257,41 +252,36 @@ const About: NextPage = () => {
           {" "}
           <Grid>
             <Grid.Col span={3}>
-              <Affix
-                position={{
-                  top: isMobile ? 150 : 200,
-                  left: isMobile ? 15 : 80,
+              <div
+                style={{
+                  position: "sticky",
+                  top: 150,
+                  display: "block",
+                  height: "auto",
                 }}
               >
-                <div
-                  style={{
-                    display: "block",
-                    height: "auto",
-                  }}
-                >
-                  {sections.map((x) => {
-                    return (
-                      <Flex
-                        key={x.name}
-                        direction={{ base: "column" }}
-                        gap={{ base: "sm", sm: "lg" }}
-                      >
-                        <div>
-                          <Anchor
-                            href={`#${x.name}`}
-                            style={{
-                              color: "inherit",
-                            }}
-                          >
-                            {x.menuDisplayName}
-                          </Anchor>
-                          <Divider my="sm" />
-                        </div>
-                      </Flex>
-                    );
-                  })}
-                </div>
-              </Affix>
+                {sections.map((x) => {
+                  return (
+                    <Flex
+                      key={x.name}
+                      direction={{ base: "column" }}
+                      gap={{ base: "sm", sm: "lg" }}
+                    >
+                      <div>
+                        <Anchor
+                          href={`#${x.name}`}
+                          style={{
+                            color: "inherit",
+                          }}
+                        >
+                          {x.menuDisplayName}
+                        </Anchor>
+                        <Divider my="sm" />
+                      </div>
+                    </Flex>
+                  );
+                })}
+              </div>
             </Grid.Col>
 
             <Grid.Col span={9}>