From 5414bf3c6042dca3526d91774c286eef36d0c42c Mon Sep 17 00:00:00 2001
From: Cian Hughes <chughes000@gmail.com>
Date: Fri, 10 Jan 2025 14:03:06 +0000
Subject: [PATCH] Created dynamic navigation header component

---
 src/LandingPage/LandingPage.svelte            |  9 ++++++-
 .../NavigationHeader.scss                     |  8 +++---
 src/shared_components/Link.svelte             | 27 +++++++++++++++++++
 src/shared_components/NavigationHeader.svelte | 25 +++++++++++------
 src/vars.css                                  |  6 ++---
 5 files changed, 59 insertions(+), 16 deletions(-)
 rename src/{shared_components => LandingPage}/NavigationHeader.scss (83%)
 create mode 100644 src/shared_components/Link.svelte

diff --git a/src/LandingPage/LandingPage.svelte b/src/LandingPage/LandingPage.svelte
index b7578f1..2dc6e27 100644
--- a/src/LandingPage/LandingPage.svelte
+++ b/src/LandingPage/LandingPage.svelte
@@ -1,6 +1,7 @@
 <script>
     import "./LandingPage.scss";
     import NavigationHeader from "../shared_components/NavigationHeader.svelte";
+    import "./NavigationHeader.scss";
     import NavigationFooter from "../shared_components/NavigationFooter.svelte";
     import Splash from "./Splash.svelte";
     import InfoScroll from "./InfoScroll.svelte";
@@ -35,7 +36,13 @@
             />
         {/if}
         <div class="landing-zone">
-            <NavigationHeader />
+            <NavigationHeader
+                class="navigation-header"
+                items_class="navigation-header-items"
+                link_class="navigation-header-link"
+                button_class="navigation-header-button"
+                button_text_class="navigation-header-button-text"
+            />
             <Splash />
         </div>
     </div>
diff --git a/src/shared_components/NavigationHeader.scss b/src/LandingPage/NavigationHeader.scss
similarity index 83%
rename from src/shared_components/NavigationHeader.scss
rename to src/LandingPage/NavigationHeader.scss
index 48449f9..93a6efd 100644
--- a/src/shared_components/NavigationHeader.scss
+++ b/src/LandingPage/NavigationHeader.scss
@@ -18,10 +18,10 @@
 
 .navigation-header-link {
   color: var(--cpalettelight);
+  font-family: var(--navigation-header-font-family);
   text-align: left;
-  font-family: var(--navigation-header-link-font-family);
-  font-size: var(--navigation-header-link-font-size);
-  font-weight: var(--navigation-header-link-font-weight);
+  font-size: var(--navigation-header-font-size);
+  font-weight: var(--navigation-header-font-weight);
   text-decoration: underline;
   position: relative;
   display: flex;
@@ -44,7 +44,7 @@
       0px 1px 2px 0px rgba(0, 0, 0, 0.05));
 }
 
-.navigation-header-contact-us {
+.navigation-header-button-text {
   @extend .navigation-header-link;
   color: var(--background);
   text-decoration: none;
diff --git a/src/shared_components/Link.svelte b/src/shared_components/Link.svelte
new file mode 100644
index 0000000..4a80736
--- /dev/null
+++ b/src/shared_components/Link.svelte
@@ -0,0 +1,27 @@
+<script>
+    export let text = "Link_Text";
+    export let redirectFunc = () => {};
+    export let hotkey = "";
+
+    function handleKeypress(event) {
+        if (
+            event.key === hotkey ||
+            event.key === "Enter" ||
+            event.key === " "
+        ) {
+            event.preventDefault();
+            redirectFunc();
+        }
+    }
+</script>
+
+<div
+    class="cursor-pointer select-none {$$props.class}"
+    style="cursor: pointer;"
+    on:click={redirectFunc}
+    on:keydown={handleKeypress}
+    tabindex="0"
+    role="link"
+>
+    {text}
+</div>
diff --git a/src/shared_components/NavigationHeader.svelte b/src/shared_components/NavigationHeader.svelte
index cdaa2cf..0bf18fc 100644
--- a/src/shared_components/NavigationHeader.svelte
+++ b/src/shared_components/NavigationHeader.svelte
@@ -1,13 +1,22 @@
 <script>
-    import "./NavigationHeader.scss";
+    export let items_class;
+    export let link_class;
+    export let button_class;
+    export let button_text_class;
+
+    import Button from "../shared_components/Button.svelte";
+    import Link from "../shared_components/Link.svelte";
 </script>
 
-<div class="navigation-header">
-    <div class="navigation-header-items">
-        <div class="navigation-header-link">Data Repository</div>
-        <div class="navigation-header-link">How to Contribute</div>
-        <div class="navigation-header-button">
-            <div class="navigation-header-contact-us">Contact Us</div>
-        </div>
+<div class={$$props.class}>
+    <div class={items_class}>
+        <Link class={link_class} text="Data Repository" hotkey="d" />
+        <Link class={link_class} text="How to Contribute" hotkey="h" />
+        <Button
+            class={button_class}
+            text="Contact Us"
+            inner_class={button_text_class}
+            hotkey="c"
+        />
     </div>
 </div>
diff --git a/src/vars.css b/src/vars.css
index 557926d..3db858e 100644
--- a/src/vars.css
+++ b/src/vars.css
@@ -9,9 +9,9 @@
     --cpalettecomplimentary: #ffffff;
 
     /* For the navigation header on the landing page */
-    --navigation-header-link-font-family: "Assistant", sans-serif;
-    --navigation-header-link-font-size: 24px;
-    --navigation-header-link-font-weight: 700;
+    --navigation-header-font-family: "Assistant", sans-serif;
+    --navigation-header-font-size: 24px;
+    --navigation-header-font-weight: 700;
     /* For the splash on the landing page */
     --splash-title-font-family: "Martel", sans-serif;
     --splash-title-font-size-large: 64px;