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

@@ -1,80 +1,88 @@
 .navigation-header {
-    display: flex;
+  display: flex;
-    flex-direction: row-reverse;
+  flex-direction: row-reverse;
-    width: 100%;
+  width: 100%;
-    justify-content: space-between;
+  justify-content: space-between;
 }
 
 .navigation-header {
-    position: relative;
+  position: relative;
-    height: 128px;
+  height: 128px;
-    width: 100%;
+  width: 100%;
-    padding-bottom: 120px;
+  padding-bottom: 120px;
 }
 
 .navigation-header-items {
-    gap: 48px;
+  gap: 48px;
-    align-items: center;
+  align-items: center;
-    position: relative;
+  position: relative;
-    padding-top: 28px;
+  padding-top: 28px;
-    padding-right: 96px;
+  padding-right: 96px;
-    padding-left: 32px;
+  padding-left: 32px;
 }
 
 .navigation-header-link {
-    color: #000000;
+  color: #000000;
-    font-family: var(--navigation-header-font-family);
+  font-family: var(--navigation-header-font-family);
-    text-align: left;
+  text-align: left;
-    font-size: var(--navigation-header-font-size);
+  font-size: var(--navigation-header-font-size);
-    position: relative;
+  position: relative;
-    display: flex;
+  display: flex;
-    align-items: center;
+  align-items: center;
-    justify-content: flex-start;
+  justify-content: flex-start;
 }
 
 .navigation-header-button {
-    background: #000000;
+  background: #000000;
-    border-radius: 8px;
+  border-radius: 8px;
-    padding: 14px 24px 14px 24px;
+  padding: 14px 24px 14px 24px;
-    display: flex;
+  display: flex;
-    flex-direction: row;
+  flex-direction: row;
-    gap: 8px;
+  gap: 8px;
-    align-items: center;
+  align-items: center;
-    justify-content: center;
+  justify-content: center;
-    flex-shrink: 0;
+  flex-shrink: 0;
-    position: relative;
+  position: relative;
-    box-shadow: var(--button-shadow-box-shadow, 0px 1px 2px 0px rgba(0, 0, 0, 0.05));
+  box-shadow: var(--button-shadow-box-shadow, 0px 1px 2px 0px rgba(0, 0, 0, 0.05));
 }
 
 .navigation-header-button-text {
-    @extend .navigation-header-link;
+  @extend .navigation-header-link;
-    color: var(--cpalettecomplimentary);
+  color: var(--cpalettecomplimentary);
-    text-decoration: none;
+  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 {
-    display: flex;
+  display: flex;
-    flex-direction: row;
+  flex-direction: row;
-    flex-wrap: wrap;
+  flex-wrap: wrap;
-    justify-content: flex-end;
+  justify-content: flex-end;
 }
 
 .flexrow-left {
-    @extend .flexrow-right;
+  @extend .flexrow-right;
-    justify-content: flex-start;
+  justify-content: flex-start;
 }
 
 @media (max-width: 750px) {
-    .navigation-header-items {
+  .navigation-header-items {
-        display: none;
+    display: none;
-    }
+  }
 }

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>