Compare commits
3 Commits
7c8d613799
...
8cb3a38beb
Author | SHA1 | Date | |
---|---|---|---|
8cb3a38beb | |||
b7a5665036 | |||
6e46732bcc |
@ -1,11 +1,16 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { ReactElement, useEffect, useRef, useState } from "react";
|
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 Link from "next/link";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
import { truncateText } from "@/lib/string";
|
import { truncateText } from "@/lib/string";
|
||||||
import { motion, useInView } from "framer-motion";
|
import { motion, useInView } from "framer-motion";
|
||||||
|
import { Separator } from "@/components/ui/separator";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
|
||||||
type Header = {
|
type Header = {
|
||||||
id: string;
|
id: string;
|
||||||
@ -77,7 +82,7 @@ const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
|
|||||||
return (
|
return (
|
||||||
<motion.div
|
<motion.div
|
||||||
ref={ref}
|
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 }}
|
initial={{ opacity: 0 }}
|
||||||
animate={{ opacity: inView ? 1 : 0 }}
|
animate={{ opacity: inView ? 1 : 0 }}
|
||||||
transition={{ duration: 0.2 }}
|
transition={{ duration: 0.2 }}
|
||||||
@ -117,12 +122,65 @@ const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
|
|||||||
draggable={false}
|
draggable={false}
|
||||||
className="block py-1"
|
className="block py-1"
|
||||||
>
|
>
|
||||||
{truncateText(header.text, 26)}
|
{truncateText(header.text, 24)}
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<div>
|
||||||
|
<Separator className="mt-1 mb-3.5" />
|
||||||
|
<Footer page={page} />
|
||||||
|
</div>
|
||||||
</motion.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;
|
export default OnThisPage;
|
||||||
|
Reference in New Issue
Block a user