feat: add page contents navigation

nr2f1 · Jan 14, 2025 · be2a509 · be2a509
1 parent 690c69b
commit be2a509
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 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
@@ -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
@@ -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
@@ -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
@@ -6,6 +6,7 @@
 
 html {
   font-size: 100%;
+  scroll-behavior: smooth;
 }
 
 body {
-Original file line number
+Diff line change
@@ Expand Up / @@ -6,6 +6,7 @@ @@
     html {
       font-size: 100%;
+      scroll-behavior: smooth;
     }
     body {
@@ Expand Down @@