Updated header to include ESAFORM logo and link

src/lib/components/NavigationHeader.svelte

@@ -3,11 +3,14 @@
     import Button from "$lib/components/Button.svelte";
     import Link from "$lib/components/Link.svelte";
 
+    import { CDN } from "$lib/constants";
+
     export let items_class = "";
     export let link_class = "";
     export let button_class = "";
     export let button_text_class = "";
-    export let display_title = true;
+    export let display_home = true;
+    export let display_logo = true;
 
     import { navigation } from "$lib/navigation";
 </script>
@@ -15,6 +18,14 @@
 <div class={$$props.class}>
     <div class="navigation-header">
         <div class="flexrow-right navigation-header-items {items_class}">
+            {#if display_home}
+                <Link
+                    class="navigation-header-link {link_class}"
+                    text="Home"
+                    hotkey="d"
+                    redirectFunc={navigation.toHome}
+                />
+            {/if}
             <Link
                 class="navigation-header-link {link_class}"
                 text="Data Repository"
@@ -35,14 +46,15 @@
                 redirectFunc={navigation.toContact}
             />
         </div>
-        {#if display_title}
+        {#if display_logo}
-            <div class="flexrow-left navigation-header-items {items_class}">
+            <div class="flexrow-left navigation-header-logo-link {items_class}">
-                <Link
+                <a href="https://esaform.org/">
-                    class="navigation-header-site-name"
+                    <img
-                    text="AM-D-Model.eu"
+                        class="navigation-header-logo"
-                    hotkey="a"
+                        src="{CDN}/ESAFORM_logo.webp"
-                    redirectFunc={navigation.toHome}
+                        alt="ESAFORM Logo"
                     />
+                </a>
             </div>
         {/if}
     </div>

src/lib/styles/NavigationHeader.scss

@@ -52,13 +52,21 @@
   text-decoration: none;
 }
 
-.navigation-header-site-name {
+.navigation-header-logo-link {
-    color: #000000;
+  @extend .navigation-header-items;
-    text-align: left;
+  min-width: 128px;
-    font-family: "Assistant", sans-serif;
+}
-    font-size: 24px;
+
-    position: relative;
+.navigation-header-logo {
-    padding: 8px;
+  height: 128px;
+  width: auto;
+  max-width: 128px;
+}
+
+.navigation-header-logo {
+  height: 128px;
+  width: auto;
+  padding-left: 28px;
 }
 
 .flexrow-right {

src/routes/+page.svelte

@@ -39,7 +39,8 @@
         <div class="landing-zone">
             <NavigationHeader
                 class="splash-navigation-header"
-                display_title={false}
+                display_home={false}
+                display_logo={false}
             />
             <Splash />
         </div>