Implemented navigation through website

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>

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
-            <Link class={link_class} text="How to Contribute" hotkey="h" />
+                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>

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');
+    }
+};

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>
 

src/routes/+page.svelte

@@ -51,3 +51,4 @@
     <BottomCall />
     <NavigationFooter />
 </div>
+

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>

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>