From c012c047290cafc040b3accbde1e758984f5e8ff Mon Sep 17 00:00:00 2001
From: Cian Hughes <chughes000@gmail.com>
Date: Fri, 10 Jan 2025 15:03:24 +0000
Subject: [PATCH] Added togglable title to header, for reusability of component

---
 src/LandingPage/LandingPage.svelte            |  7 ++---
 src/LandingPage/NavigationHeader.scss         | 11 +++-----
 src/shared_components/NavigationHeader.scss   | 26 ++++++++++++++++++
 src/shared_components/NavigationHeader.svelte | 27 ++++++++++++-------
 4 files changed, 52 insertions(+), 19 deletions(-)
 create mode 100644 src/shared_components/NavigationHeader.scss

diff --git a/src/LandingPage/LandingPage.svelte b/src/LandingPage/LandingPage.svelte
index 2dc6e27..2bccd14 100644
--- a/src/LandingPage/LandingPage.svelte
+++ b/src/LandingPage/LandingPage.svelte
@@ -10,15 +10,15 @@
     let className = "";
     export { className as class };
 
-    let useVideo = true;
+    let use_video = true;
     function handleVideoError() {
-        useVideo = false;
+        use_video = false;
     }
 </script>
 
 <div class={"landing-page " + className}>
     <div class="landing-zone-outer">
-        {#if useVideo}
+        {#if use_video}
             <video
                 class="background"
                 autoplay
@@ -42,6 +42,7 @@
                 link_class="navigation-header-link"
                 button_class="navigation-header-button"
                 button_text_class="navigation-header-button-text"
+                display_title={false}
             />
             <Splash />
         </div>
diff --git a/src/LandingPage/NavigationHeader.scss b/src/LandingPage/NavigationHeader.scss
index 93a6efd..aa267a0 100644
--- a/src/LandingPage/NavigationHeader.scss
+++ b/src/LandingPage/NavigationHeader.scss
@@ -6,14 +6,11 @@
 }
 
 .navigation-header-items {
-  display: flex;
-  flex-direction: row;
-  gap: var(--spacing-m, 48px);
+  gap: 48px;
   align-items: center;
-  justify-content: flex-end;
-  position: absolute;
-  right: 96px;
-  top: 28px;
+  position: relative;
+  padding-top: 28px;
+  padding-right: 96px;
 }
 
 .navigation-header-link {
diff --git a/src/shared_components/NavigationHeader.scss b/src/shared_components/NavigationHeader.scss
new file mode 100644
index 0000000..fb3b15e
--- /dev/null
+++ b/src/shared_components/NavigationHeader.scss
@@ -0,0 +1,26 @@
+.navigation-header-items-outer {
+  display: flex;
+  flex-direction: row-reverse;
+  width: 100%;
+  justify-content: space-between;
+}
+
+.navigation-header-site-name {
+  color: #000000;
+  text-align: left;
+  font-family: "Assistant", sans-serif;
+  font-size: 24px;
+  position: relative;
+  padding: 8px;
+}
+
+.flexrow-right {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+
+.flexrow-left {
+  @extend .flexrow-right;
+  justify-content: flex-start;
+}
diff --git a/src/shared_components/NavigationHeader.svelte b/src/shared_components/NavigationHeader.svelte
index 7b684b6..4abb7f8 100644
--- a/src/shared_components/NavigationHeader.svelte
+++ b/src/shared_components/NavigationHeader.svelte
@@ -3,20 +3,29 @@
     export let link_class;
     export let button_class;
     export let button_text_class;
+    export let display_title = true;
 
+    import "./NavigationHeader.scss";
     import Button from "./Button.svelte";
     import Link from "./Link.svelte";
 </script>
 
 <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 class="navigation-header-items-outer">
+        <div class="flexrow-right {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>
+        {#if display_title}
+            <div class="flexrow-left {items_class}">
+                <div class="navigation-header-site-name">AM-D-Model.eu</div>
+            </div>
+        {/if}
     </div>
 </div>