From cdf7875ddbfd0ba46b914ceb447b3261d0e6e12a Mon Sep 17 00:00:00 2001
From: tnga <devtnga@gmail.com>
Date: Thu, 12 Jun 2025 14:09:52 +0100
Subject: [PATCH] fix: Fix navigation links and add smooth scrolling to hash
 fragments

- Update Link components in Home.tsx to use correct /check prefix for routing
- Add useEffect hook in About.tsx to handle smooth scrolling to hash fragments
- Add delay to ensure page renders before scrolling to target element
---
 src/web-check-live/views/About.tsx | 17 +++++++++++++++++
 src/web-check-live/views/Home.tsx  |  4 ++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/web-check-live/views/About.tsx b/src/web-check-live/views/About.tsx
index 7c10aac..2704d32 100644
--- a/src/web-check-live/views/About.tsx
+++ b/src/web-check-live/views/About.tsx
@@ -1,4 +1,6 @@
 import styled from '@emotion/styled';
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
 
 import colors from 'web-check-live/styles/colors';
 import Heading from 'web-check-live/components/Form/Heading';
@@ -118,6 +120,21 @@ const makeAnchor = (title: string): string => {
 };
 
 const About = (): JSX.Element => {
+  const location = useLocation();
+
+  useEffect(() => {
+    // Scroll to hash fragment if present
+    if (location.hash) {
+      // Add a small delay to ensure the page has fully rendered
+      setTimeout(() => {
+        const element = document.getElementById(location.hash.slice(1));
+        if (element) {
+          element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        }
+      }, 100);
+    }
+  }, [location]);
+
   return (
     <div>
     <AboutContainer>
diff --git a/src/web-check-live/views/Home.tsx b/src/web-check-live/views/Home.tsx
index 7389821..ce22f5a 100644
--- a/src/web-check-live/views/Home.tsx
+++ b/src/web-check-live/views/Home.tsx
@@ -278,7 +278,7 @@ const Home = (): JSX.Element => {
           <Heading as="h2" size="small" color={colors.primary}>Supported Checks</Heading>
           <ul>
             {docs.map((doc, index) => (<li key={index}>{doc.title}</li>))}
-            <li><Link to="/about">+ more!</Link></li>
+            <li><Link to="/check/about">+ more!</Link></li>
           </ul>
         </div>
         <div className="links">
@@ -288,7 +288,7 @@ const Home = (): JSX.Element => {
           <a target="_blank" rel="noreferrer" href="https://app.netlify.com/start/deploy?repository=https://github.com/lissy93/web-check" title="Deploy your own private or public instance of Web-Check to Netlify">
             <Button>Deploy your own</Button>
           </a>
-          <Link to="/about#api-documentation" title="View the API documentation, to use Web-Check programmatically">
+          <Link to="/check/about#api-documentation" title="View the API documentation, to use Web-Check programmatically">
             <Button>API Docs</Button>
           </Link>
         </div>