feat: updated docs layout wrt side navigation

This commit is contained in:
bitroy
2024-06-11 22:49:53 +05:30
parent b2b6d09a9e
commit e8fd9106e5
3 changed files with 6 additions and 8 deletions

View File

@@ -3,7 +3,6 @@
import { navigation } from "@/lib/navigation";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Button } from "./Button";
import { DiscordIcon } from "./icons/DiscordIcon";
import { GithubIcon } from "./icons/GithubIcon";
@@ -116,7 +115,7 @@ const SmallPrint = () => {
export const Footer = () => {
return (
<footer className="mx-auto w-full max-w-2xl space-y-10 pb-16 lg:max-w-5xl">
<footer className="mx-auto max-w-2xl space-y-10 pb-16 lg:w-[calc(100%-20rem)]">
<PageNavigation />
<SmallPrint />
</footer>

View File

@@ -6,7 +6,6 @@ import SideNavigation from "@/components/SideNavigation";
import { motion } from "framer-motion";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Footer } from "./Footer";
import { Header } from "./Header";
import { type Section, SectionProvider } from "./SectionProvider";
@@ -18,7 +17,7 @@ export const Layout = ({
children: React.ReactNode;
allSections: Record<string, Array<Section>>;
}) => {
let pathname = usePathname();
const pathname = usePathname();
return (
<SectionProvider sections={allSections[pathname || ""] ?? []}>

View File

@@ -9,7 +9,7 @@ type Heading = {
const SideNavigation = ({ pathname }) => {
const [headings, setHeadings] = useState<Heading[]>([]);
const [activeId, setActiveId] = useState<string | null>(null);
const [selectedId, setSelectedId] = useState<string | null>(null);
useEffect(() => {
const getHeadings = () => {
@@ -41,9 +41,9 @@ const SideNavigation = ({ pathname }) => {
className={`mb-4 ml-4 text-slate-900 dark:text-white ml-${heading.level === 2 ? 0 : heading.level === 3 ? 4 : 6}`}>
<Link
href={`#${heading.id}`}
onClick={() => setActiveId(heading.id)}
onClick={() => setSelectedId(heading.id)}
className={`${
heading.id === activeId
heading.id === selectedId
? "font-semibold text-blue-800 dark:text-amber-300"
: "font-normal text-slate-900 dark:text-white"
}`}>
@@ -60,7 +60,7 @@ const SideNavigation = ({ pathname }) => {
if (headings.length) {
return (
<aside className="fixed right-0 top-0 hidden h-[calc(100%-2.5rem)] w-80 overflow-hidden overflow-y-auto pt-16 lg:mt-10 lg:block">
<aside className="fixed right-0 top-0 hidden h-[calc(100%-2.5rem)] w-80 overflow-hidden overflow-y-auto pt-16 [scrollbar-width:none] lg:mt-10 lg:block">
<div className="border-l-2 border-gray-700">
<h3 className="ml-2 mt-1">On this page</h3>
{renderHeading(headings, 2)}