on this page indentation

Took 13 minutes

src/components/navbar/navbar.tsx

@@ -1,7 +1,6 @@
 import { ReactElement } from "react";
 import Link from "next/link";
 import Image from "next/image";
-import { cn } from "@/lib/utils";
 import QuickSearchDialog from "@/components/navbar/search-dialog";
 import { getDocsContent } from "@/lib/mdx";
 import Sidebar from "@/components/sidebar/sidebar";

src/components/on-this-page.tsx

@@ -4,6 +4,7 @@ import { ReactElement, useEffect, useRef, useState } from "react";
 import { Bars3CenterLeftIcon } from "@heroicons/react/24/outline";
 import Link from "next/link";
 import { cn } from "@/lib/utils";
+import { truncateText } from "@/lib/string";
 
 type Header = {
     id: string;
@@ -78,20 +79,35 @@ const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
             </div>
 
             {/* Headers */}
-            <ul>
+            <ul className="relative">
                 {headers.map((header: Header) => (
                     <li
                         key={header.id}
                         className={cn(
-                            "hover:opacity-80 transition-all transform-gpu",
+                            "hover:opacity-80 transition-all transform-gpu relative",
                             activeHeader === header.id
                                 ? "font-semibold text-primary"
                                 : "opacity-65"
                         )}
-                        style={{ marginLeft: `${(header.level - 1) * 16}px` }}
+                        style={{ paddingLeft: `${(header.level - 1) * 16}px` }}
                     >
-                        <Link href={`#${header.id}`} draggable={false}>
-                            {header.text}
+                        {/* Indentation */}
+                        {header.level > 1 && (
+                            <div
+                                className="absolute left-0 top-0 bottom-0 border-l border-muted"
+                                style={{
+                                    left: `${(header.level - 2) * 16 + 4}px`,
+                                }}
+                            />
+                        )}
+
+                        {/* Header */}
+                        <Link
+                            href={`#${header.id}`}
+                            draggable={false}
+                            className="block py-1"
+                        >
+                            {truncateText(header.text, 26)}
                         </Link>
                     </li>
                 ))}

src/lib/string.ts

@@ -8,3 +8,11 @@
 export const capitalizeWords = (str: string | undefined): string | undefined =>
     str &&
     str.toLowerCase().replace(/\b\w/g, (char: string) => char.toUpperCase());
+
+export const truncateText = (
+    text: string | undefined,
+    maxLength: number
+): string | undefined =>
+    text && text.length > maxLength
+        ? text.slice(0, maxLength - 3).trim() + "..."
+        : text;