From eda4715f9bab289195e19c93153d8576b9c8f952 Mon Sep 17 00:00:00 2001
From: "Federico Pasqua (eisterman)" <federico.pasqua.96@gmail.com>
Date: Wed, 11 Sep 2024 20:44:57 +0200
Subject: [PATCH] Changing Logo with scroll. Centering Home/About in Desktop
 menu

---
 src/routes/+layout.svelte | 71 ++++++++++++++++++++++++++-------------
 1 file changed, 47 insertions(+), 24 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 0be4dd8..59469fa 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,37 +1,60 @@
 <script lang="ts">
   import "../app.css";
   import { assets } from '$app/paths';
-  import { slide } from 'svelte/transition';
+  import { slide, fade } from 'svelte/transition';
+  import { onMount } from 'svelte';
 
   let mobileMenuOpen: boolean = false;
+  let isScrolled: boolean = false;
+
+  function handleScroll() {
+    // Check if the page is scrolled down more than 0px
+    isScrolled = window.scrollY > 0;
+  }
+
+  onMount(() => {
+    window.addEventListener('scroll', handleScroll);
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  });
 </script>
 
 <div class="bg-white">
-  <header class="absolute inset-x-0 top-0 z-50">
-    <nav class="flex items-center justify-between p-6 lg:px-8" aria-label="Global">
-      <div class="flex lg:flex-1">
-        <a href="/" class="-m-1.5 p-1.5">
-          <span class="sr-only">Your Company</span>
-          <img class="h-8 w-auto" src={`${assets}/RossiniEnergy-Logo-White.png`} alt="">
+  <header class="absolute inset-x-0 top-0 start-0 z-50 ">
+    <nav class="fixed w-full bg-gradient-to-b from-[rgba(0,0,0,0.8)]" aria-label="Global">
+      <div class="max-w-screen-xl flex flex-wrap lg:flex-1 items-center justify-between mx-auto p-4">
+        <a href="/" class="flex items-center space-x-3">
+          <span class="sr-only">Rossini Energy</span>
+          {#if isScrolled}
+            <img class="h-8 w-auto flex" src={`${assets}/RossiniEnergy-Logo.png`} alt=""
+                 in:fade={{delay: 100, duration: 100}} out:fade={{delay: 0, duration: 100}}>
+          {:else}
+            <img class="h-8 w-auto flex" src={`${assets}/RossiniEnergy-Logo-White.png`} alt=""
+                 in:fade={{delay: 100, duration: 100}} out:fade={{delay: 0, duration: 100}}>
+          {/if}
         </a>
+        <!-- Mobile Open Menu -->
+        <div class="flex md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse lg:hidden">
+          <button type="button" class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
+                  on:click={() => mobileMenuOpen=true}>
+            <span class="sr-only">Open main menu</span>
+            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+                 aria-hidden="true">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/>
+            </svg>
+          </button>
+        </div>
+        <div class="hidden lg:flex lg:flex-1 lg:space-x-12 lg:justify-center absolute left-1/2 transform -translate-x-1/2">
+          <a href="/" class="flex text-sm font-semibold leading-6 text-white">Home</a>
+          <a href="/about" class="flex text-sm font-semibold leading-6 text-white">About</a>
+        </div>
+        <div class="hidden lg:flex lg:justify-end lg:order-2">
+          <a href="/" class="text-sm font-semibold leading-6 text-gray-300">Log in <span
+                  aria-hidden="true">&rarr;</span></a>
+        </div>
       </div>
-      <div class="flex lg:hidden">
-        <button type="button" class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
-                on:click={() => mobileMenuOpen=true}>
-          <span class="sr-only">Open main menu</span>
-          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
-               aria-hidden="true">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/>
-          </svg>
-        </button>
-      </div>
-      <div class="hidden lg:flex lg:gap-x-12">
-        <a href="/" class="text-sm font-semibold leading-6 text-white">Home</a>
-        <a href="/about" class="text-sm font-semibold leading-6 text-white">About</a>
-      </div>
-      <div class="hidden lg:flex lg:flex-1 lg:justify-end">
-        <a href="/" class="text-sm font-semibold leading-6 text-gray-900">Log in <span aria-hidden="true">&rarr;</span></a>
-      </div>
+
     </nav>
     <!-- Mobile menu, show/hide based on menu open state. -->
     {#if mobileMenuOpen}