From 314325c647a65bb2011b2f071f8b91e9542b888e Mon Sep 17 00:00:00 2001
From: Tabish Naqvi <tabish.naqvi2003@gmail.com>
Date: Sun, 10 Mar 2024 09:40:23 +0530
Subject: [PATCH] fix(#83): side nav links (#84)

---
 app/components/doc-route.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/app/components/doc-route.tsx b/app/components/doc-route.tsx
index ea38320..04aefa5 100644
--- a/app/components/doc-route.tsx
+++ b/app/components/doc-route.tsx
@@ -20,6 +20,7 @@ import { useDelegatedReactRouterLinks } from "./delegate-markdown-links";
 import iconsHref from "~/icons.svg";
 import { type loader as rootLoader } from "~/root";
 import { type loader as langRefLoader } from "~/routes/$lang.$ref";
+import { Link } from "react-router-dom";
 
 export let loader = async ({ params, request }: LoaderFunctionArgs) => {
   await whyDoWeNotHaveGoodMiddleWareYetRyan(request);
@@ -131,8 +132,8 @@ function LargeOnThisPage({ doc }: { doc: SerializeFrom<Doc> }) {
       <ul>
         {doc.headings.map((heading, i) => (
           <li key={i}>
-            <a
-              href={`#${heading.slug}`}
+            <Link
+              to={`#${heading.slug}`}
               dangerouslySetInnerHTML={{ __html: heading.html || "" }}
               className="block py-1 text-sm text-gray-400 hover:text-gray-900 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand"
             />
@@ -160,8 +161,8 @@ function SmallOnThisPage({ doc }: { doc: SerializeFrom<Doc> }) {
       <ul className="pl-9">
         {doc.headings.map((heading, i) => (
           <li key={i}>
-            <a
-              href={`#${heading.slug}`}
+            <Link
+              to={`#${heading.slug}`}
               dangerouslySetInnerHTML={{ __html: heading.html || "" }}
               className="block py-2 text-sm text-gray-400 hover:text-gray-900 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand"
             />