From 822fbcbba3b95df2c10336c5d2d2faee91c4dd9c Mon Sep 17 00:00:00 2001
From: Cian Hughes <chughes000@gmail.com>
Date: Fri, 10 Jan 2025 16:37:12 +0000
Subject: [PATCH] Implemented navigation through website

---
 src/lib/components/NavigationFooter.svelte | 18 ++++++++++++++--
 src/lib/components/NavigationHeader.svelte | 24 +++++++++++++++++++---
 src/lib/navigation.js                      | 11 ++++++++++
 src/routes/+layout.svelte                  |  1 +
 src/routes/+page.svelte                    |  1 +
 src/routes/BottomCall.svelte               |  4 ++++
 src/routes/Splash.svelte                   |  3 +++
 7 files changed, 57 insertions(+), 5 deletions(-)
 create mode 100644 src/lib/navigation.js

diff --git a/src/lib/components/NavigationFooter.svelte b/src/lib/components/NavigationFooter.svelte
index 32b9c51..b318277 100644
--- a/src/lib/components/NavigationFooter.svelte
+++ b/src/lib/components/NavigationFooter.svelte
@@ -2,11 +2,18 @@
     import "$lib/styles/NavigationFooter.scss";
     import ScrollToTop from "$lib/components/ScrollToTop.svelte";
     import Link from "$lib/components/Link.svelte";
+
+    import { navigation } from "$lib/navigation";
 </script>
 
 <div class="navigation-footer">
     <div class="navigation-footer-column-left">
-        <div class="navigation-footer-site-name">AM-D-Model.eu</div>
+        <Link
+            class="navigation-footer-site-name"
+            text="AM-D-Model.eu"
+            hotkey="a"
+            redirectFunc={navigation.toHome}
+        />
         <div class="navigation-footer-social-media">
             <div class="navigation-footer-buttons-icon">
                 <img
@@ -51,13 +58,20 @@
                 class="navigation-footer-link"
                 text="Data Repository"
                 hotkey="d"
+                redirectFunc={navigation.to404}
             />
             <Link
                 class="navigation-footer-link"
                 text="How to Contribute"
                 hotkey="h"
+                redirectFunc={navigation.toAbout}
+            />
+            <Link
+                class="navigation-footer-link"
+                text="Contact us"
+                hotkey="c"
+                redirectFunc={navigation.toContact}
             />
-            <Link class="navigation-footer-link" text="Contact us" hotkey="c" />
         </div>
     </div>
 </div>
diff --git a/src/lib/components/NavigationHeader.svelte b/src/lib/components/NavigationHeader.svelte
index 337b174..16a30e9 100644
--- a/src/lib/components/NavigationHeader.svelte
+++ b/src/lib/components/NavigationHeader.svelte
@@ -8,23 +8,41 @@
     import "$lib/styles/NavigationHeader.scss";
     import Button from "$lib/components/Button.svelte";
     import Link from "$lib/components/Link.svelte";
+
+    import { navigation } from "$lib/navigation";
 </script>
 
 <div class={$$props.class}>
     <div class="navigation-header-items-outer">
         <div class="flexrow-right {items_class}">
-            <Link class={link_class} text="Data Repository" hotkey="d" />
-            <Link class={link_class} text="How to Contribute" hotkey="h" />
+            <Link
+                class={link_class}
+                text="Data Repository"
+                hotkey="d"
+                redirectFunc={navigation.to404}
+            />
+            <Link
+                class={link_class}
+                text="How to Contribute"
+                hotkey="h"
+                redirectFunc={navigation.toAbout}
+            />
             <Button
                 class={button_class}
                 text="Contact Us"
                 inner_class={button_text_class}
                 hotkey="c"
+                redirectFunc={navigation.toContact}
             />
         </div>
         {#if display_title}
             <div class="flexrow-left {items_class}">
-                <div class="navigation-header-site-name">AM-D-Model.eu</div>
+                <Link
+                    class="navigation-header-site-name"
+                    text="AM-D-Model.eu"
+                    hotkey="a"
+                    redirectFunc={navigation.toHome}
+                />
             </div>
         {/if}
     </div>
diff --git a/src/lib/navigation.js b/src/lib/navigation.js
new file mode 100644
index 0000000..a799ff2
--- /dev/null
+++ b/src/lib/navigation.js
@@ -0,0 +1,11 @@
+import { goto } from "$app/navigation";
+import { error } from '@sveltejs/kit';
+
+export const navigation = {
+    toHome: () => goto("/"),
+    toAbout: () => goto("/about"),
+    toContact: () => goto("/contact"),
+    to404: () => {
+        throw error(404, 'Page not found');
+    }
+};
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 9e26bfd..f88d797 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,6 +2,7 @@
     import "$lib/styles/styles.css";
     import "$lib/styles/vars.css";
     import "../app.css";
+
     let { children } = $props();
 </script>
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 1fd11b4..f1f9f04 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -51,3 +51,4 @@
     <BottomCall />
     <NavigationFooter />
 </div>
+
diff --git a/src/routes/BottomCall.svelte b/src/routes/BottomCall.svelte
index 8009e59..cc753f9 100644
--- a/src/routes/BottomCall.svelte
+++ b/src/routes/BottomCall.svelte
@@ -1,6 +1,8 @@
 <script>
     import "./BottomCall.scss";
     import Button from "$lib/components/Button.svelte";
+
+    import { navigation } from "$lib/navigation";
 </script>
 
 <div class="btmcall">
@@ -11,12 +13,14 @@
             text="Get Involved!"
             inner_class="btmcall-get-involved"
             hotkey="g"
+            redirectFunc={navigation.toAbout}
         />
         <Button
             class="btmcall-button2"
             text="Contact Us"
             inner_class="btmcall-contact-us"
             hotkey="c"
+            redirectFunc={navigation.toContact}
         />
     </div>
 </div>
diff --git a/src/routes/Splash.svelte b/src/routes/Splash.svelte
index 6c4d7f9..e9cf263 100644
--- a/src/routes/Splash.svelte
+++ b/src/routes/Splash.svelte
@@ -1,6 +1,8 @@
 <script>
     import "./Splash.scss";
     import Button from "$lib/components/Button.svelte";
+
+    import { navigation } from "$lib/navigation";
 </script>
 
 <div class="splash">
@@ -24,6 +26,7 @@
             text="Get Involved!"
             inner_class="splash-get-involved"
             hotkey="g"
+            redirectFunc={navigation.toAbout}
         />
     </div>
 </div>