Created dynamic navigation header component

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>

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-font-size);
-  font-size: var(--navigation-header-link-font-size);
+  font-weight: var(--navigation-header-font-weight);
-  font-weight: var(--navigation-header-link-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;

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>

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={$$props.class}>
-    <div class="navigation-header-items">
+    <div class={items_class}>
-        <div class="navigation-header-link">Data Repository</div>
+        <Link class={link_class} text="Data Repository" hotkey="d" />
-        <div class="navigation-header-link">How to Contribute</div>
+        <Link class={link_class} text="How to Contribute" hotkey="h" />
-        <div class="navigation-header-button">
+        <Button
-            <div class="navigation-header-contact-us">Contact Us</div>
+            class={button_class}
-        </div>
+            text="Contact Us"
+            inner_class={button_text_class}
+            hotkey="c"
+        />
     </div>
 </div>

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-font-family: "Assistant", sans-serif;
-    --navigation-header-link-font-size: 24px;
+    --navigation-header-font-size: 24px;
-    --navigation-header-link-font-weight: 700;
+    --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;