From be2a509ea015aa5c769e5de5b56c0cd0ce17b43d Mon Sep 17 00:00:00 2001
From: Pedro Martin <pataruco@gmail.com>
Date: Tue, 14 Jan 2025 17:03:46 +0000
Subject: [PATCH] feat: add page contents navigation

---
 .../[lang]/register-a-patient/page-body.tsx   | 13 +++++---
 .../src/components/page-contents/index.tsx    | 33 +++++++++++++++----
 website/src/shared/utils/hash-links.ts        |  2 +-
 website/src/styles/_global.scss               |  1 +
 4 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/website/src/app/[lang]/register-a-patient/page-body.tsx b/website/src/app/[lang]/register-a-patient/page-body.tsx
index fe24918..1843ed3 100644
--- a/website/src/app/[lang]/register-a-patient/page-body.tsx
+++ b/website/src/app/[lang]/register-a-patient/page-body.tsx
@@ -1,9 +1,10 @@
-import PageContents from '@components/page-contents';
 import styles from './page-body.module.scss';
 
+import PageContents from '@components/page-contents';
 import PageLatestNews from '@components/page-latest-news';
 import SignupForm from '@components/signup-form';
 import type { AvailableLocale } from '@i18n/locales';
+import { createHashLink } from '@shared/utils/hash-links';
 
 interface RegisterPageBodyProps {
   lang: AvailableLocale;
@@ -36,7 +37,7 @@ const RegisterPageBody: React.FC<RegisterPageBodyProps> = ({ lang }) => {
             </li>
           </ul>
           <section>
-            <h2>Register with us</h2>
+            <h2 id={createHashLink('Register with us')}>Register with us</h2>
             <p>
               We want to keep track of the number of diagnosed cases around the
               world, so that we can share this with you and our community of
@@ -47,7 +48,9 @@ const RegisterPageBody: React.FC<RegisterPageBodyProps> = ({ lang }) => {
             <SignupForm lang={lang} registerPatient />
           </section>
           <section>
-            <h2>Register with the NR2F1 Patient Registry</h2>
+            <h2 id={createHashLink('Register with the NR2F1 Patient Registry')}>
+              Register with the NR2F1 Patient Registry
+            </h2>
             <p>
               The Patient Registry collects information through surveys on how a
               disease affects a person over a lifetime to better understand
@@ -172,7 +175,9 @@ const RegisterPageBody: React.FC<RegisterPageBodyProps> = ({ lang }) => {
           </section>
 
           <section>
-            <h2>Register for a Clinical Research ID</h2>
+            <h2 id={createHashLink('Register for a Clinical Research ID')}>
+              Register for a Clinical Research ID
+            </h2>
             <p>
               The Clinical Research ID (CRID) is a free patient-generated
               service specifically for use in clinical research. The parent or
diff --git a/website/src/components/page-contents/index.tsx b/website/src/components/page-contents/index.tsx
index 31c66e3..e9cf879 100644
--- a/website/src/components/page-contents/index.tsx
+++ b/website/src/components/page-contents/index.tsx
@@ -1,3 +1,4 @@
+import { createHashLink } from '@shared/utils/hash-links';
 import styles from './index.module.scss';
 
 import type { AvailableLocale, LocalisedString } from '@i18n/locales';
@@ -23,13 +24,23 @@ const PageContents: React.FC<PageContentsProps> = ({ lang }) => {
         <nav>
           <ul>
             <li>
-              <a href="/">Register with us</a>
+              <a href={`#${createHashLink('Register with us')}`}>
+                Register with us
+              </a>
             </li>
             <li>
-              <a href="/">Register with the NR2F1 Patient Registry</a>
+              <a
+                href={`#${createHashLink('Register with the NR2F1 Patient Registry')}`}
+              >
+                Register with the NR2F1 Patient Registry
+              </a>
             </li>
             <li>
-              <a href="/">Register for a Clinical Research ID</a>
+              <a
+                href={`#${createHashLink('Register for a Clinical Research ID')}`}
+              >
+                Register for a Clinical Research ID
+              </a>
             </li>
           </ul>
         </nav>
@@ -39,13 +50,23 @@ const PageContents: React.FC<PageContentsProps> = ({ lang }) => {
         <nav>
           <ul>
             <li>
-              <a href="/">Register with us</a>
+              <a href={`#${createHashLink('Register with us')}`}>
+                Register with us
+              </a>
             </li>
             <li>
-              <a href="/">Register with the NR2F1 Patient Registry</a>
+              <a
+                href={`#${createHashLink('Register with the NR2F1 Patient Registry')}`}
+              >
+                Register with the NR2F1 Patient Registry
+              </a>
             </li>
             <li>
-              <a href="/">Register for a Clinical Research ID</a>
+              <a
+                href={`#${createHashLink('Register for a Clinical Research ID')}`}
+              >
+                Register for a Clinical Research ID
+              </a>
             </li>
           </ul>
         </nav>
diff --git a/website/src/shared/utils/hash-links.ts b/website/src/shared/utils/hash-links.ts
index 148d5ae..272d255 100644
--- a/website/src/shared/utils/hash-links.ts
+++ b/website/src/shared/utils/hash-links.ts
@@ -1,4 +1,4 @@
-const createHashLink = (text: string): string => {
+export const createHashLink = (text: string): string => {
   return text
     .toLowerCase()
     .replace(/ /g, '-')
diff --git a/website/src/styles/_global.scss b/website/src/styles/_global.scss
index 012e840..3b16152 100644
--- a/website/src/styles/_global.scss
+++ b/website/src/styles/_global.scss
@@ -6,6 +6,7 @@
 
 html {
   font-size: 100%;
+  scroll-behavior: smooth;
 }
 
 body {