From 55c7478a24dd4bb04d8171a07b64d404236c3503 Mon Sep 17 00:00:00 2001
From: Cian Hughes <chughes000@gmail.com>
Date: Thu, 17 Apr 2025 11:42:16 +0100
Subject: [PATCH] Changed nav header display configuration to improve phone
 experience

---
 src/lib/components/NavigationHeader.svelte |  4 +-
 src/lib/styles/NavigationHeader.scss       | 43 ++++++++++++++++------
 2 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/src/lib/components/NavigationHeader.svelte b/src/lib/components/NavigationHeader.svelte
index 1ba7176..1d41993 100644
--- a/src/lib/components/NavigationHeader.svelte
+++ b/src/lib/components/NavigationHeader.svelte
@@ -23,7 +23,7 @@
 
 <div class={$$props.class}>
     <div class="navigation-header">
-        <div class="flexrow-right navigation-header-items {items_class}">
+        <div class="navigation-header-items {items_class}">
             {#if display_home}
                 <Link
                     class="navigation-header-link {link_class}"
@@ -48,7 +48,7 @@
             />
         </div>
         {#if display_logo}
-            <div class="flexrow-left navigation-header-logo-link {items_class}">
+            <div class="navigation-header-logo-link {items_class}">
                 <a href="https://esaform.org/">
                     <img
                         class="navigation-header-logo"
diff --git a/src/lib/styles/NavigationHeader.scss b/src/lib/styles/NavigationHeader.scss
index e29864b..854e7c9 100644
--- a/src/lib/styles/NavigationHeader.scss
+++ b/src/lib/styles/NavigationHeader.scss
@@ -1,3 +1,20 @@
+.flexrow-right {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.flexrow-left {
+  @extend .flexrow-right;
+  justify-content: flex-start;
+}
+
+.flexrow-center {
+  @extend .flexrow-right;
+  justify-content: center;
+}
+
 .navigation-header {
   display: flex;
   flex-direction: row-reverse;
@@ -13,6 +30,7 @@
 }
 
 .navigation-header-items {
+  @apply flexrow-right;
   gap: 48px;
   align-items: center;
   position: relative;
@@ -54,6 +72,7 @@
 
 .navigation-header-logo-link {
   @extend .navigation-header-items;
+  @apply flexrow-left;
   min-width: 128px;
 }
 
@@ -69,20 +88,20 @@
   padding-left: 28px;
 }
 
-.flexrow-right {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-}
-
-.flexrow-left {
-  @extend .flexrow-right;
-  justify-content: flex-start;
-}
-
 @media (max-width: 760px) {
   .navigation-header-items {
     display: none;
   }
+
+  .navigation-header-logo-link {
+    @apply flexrow-center;
+    width: 100%;
+    display: flex;
+  }
+}
+
+@media (max-width: 254px) {
+  .navigation-header {
+    display: none;
+  }
 }