on this page scroll to top button

Took 11 minutes

src/components/on-this-page.tsx

@@ -1,11 +1,16 @@
 "use client";
 
 import { ReactElement, useEffect, useRef, useState } from "react";
-import { Bars3CenterLeftIcon } from "@heroicons/react/24/outline";
+import {
+    ArrowLongRightIcon,
+    Bars3CenterLeftIcon,
+} from "@heroicons/react/24/outline";
 import Link from "next/link";
 import { cn } from "@/lib/utils";
 import { truncateText } from "@/lib/string";
 import { motion, useInView } from "framer-motion";
+import { Separator } from "@/components/ui/separator";
+import { Button } from "@/components/ui/button";
 
 type Header = {
     id: string;
@@ -77,7 +82,7 @@ const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
     return (
         <motion.div
             ref={ref}
-            className="w-44 flex flex-col gap-2 text-sm select-none"
+            className="sticky top-[5.5rem] w-44 max-h-[calc(100vh-3.5rem)] flex flex-col gap-2 text-sm select-none"
             initial={{ opacity: 0 }}
             animate={{ opacity: inView ? 1 : 0 }}
             transition={{ duration: 0.2 }}
@@ -117,12 +122,65 @@ const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
                             draggable={false}
                             className="block py-1"
                         >
-                            {truncateText(header.text, 26)}
+                            {truncateText(header.text, 24)}
                         </Link>
                     </li>
                 ))}
             </ul>
+
+            {/* Footer */}
+            <div>
+                <Separator className="mt-1 mb-3.5" />
+                <Footer page={page} />
+            </div>
         </motion.div>
     );
 };
+
+const Footer = ({ page }: { page: DocsContentMetadata }): ReactElement => {
+    const [hasScrolled, setHasScrolled] = useState<boolean>(false);
+
+    useEffect(() => {
+        const handleScroll = () => setHasScrolled(window.scrollY > 400);
+        window.addEventListener("scroll", handleScroll);
+        return () => window.removeEventListener("scroll", handleScroll);
+    }, []);
+
+    return (
+        <footer className="flex flex-col opacity-75">
+            {/* Edit on Git */}
+            <Link
+                className="flex gap-1.5 items-center text-xs hover:opacity-75 transition-all transform-gpu group"
+                href={`https://git.rainnny.club/PulseApp/docs/src/branch/master/docs/${page.slug}.md`}
+                target="_blank"
+                draggable={false}
+            >
+                <span>Edit this page on GitHub</span>
+                <ArrowLongRightIcon className="w-4 h-4 group-hover:translate-x-0.5 transition-all transform-gpu" />
+            </Link>
+
+            {/* Scroll to Top */}
+            <div
+                className={cn(
+                    "transition-opacity transform-gpu",
+                    hasScrolled
+                        ? "opacity-100"
+                        : "opacity-0 pointer-events-none"
+                )}
+            >
+                <Button
+                    className="p-0 justify-start flex gap-1.5 items-center text-xs hover:bg-transparent hover:opacity-75 transition-all transform-gpu group"
+                    variant="ghost"
+                    onClick={() =>
+                        window.scrollTo({ top: 0, behavior: "smooth" })
+                    }
+                >
+                    <span>Scroll to Top</span>
+                    <ArrowLongRightIcon className="w-4 h-4 group-hover:translate-x-0.5 transition-all transform-gpu" />
+                </Button>
+            </div>
+        </footer>
+    );
+};
+
 export default OnThisPage;