mirror of
https://github.com/Lissy93/web-check.git
synced 2025-08-12 06:02:46 +02:00
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
This commit is contained in:
@ -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>
|
||||
|
@ -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>
|
||||
|
Reference in New Issue
Block a user