eisterman/reweb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Changing Logo with scroll. Centering Home/About in Desktop menu

Browse Source
This commit is contained in:
Federico Pasqua
2024-09-11 20:44:57 +02:00
parent ff1a747f9d
commit eda4715f9b
1 changed files with 47 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/routes/+layout.svelte
View File

@@ -1,37 +1,60 @@
<script lang="ts"> <script lang="ts">
import "../app.css"; import "../app.css";
import { assets } from '$app/paths'; 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 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> </script>
<div class="bg-white"> <div class="bg-white">
<header class="absolute inset-x-0 top-0 z-50"> <header class="absolute inset-x-0 top-0 start-0 z-50 ">
<nav class="flex items-center justify-between p-6 lg:px-8" aria-label="Global"> <nav class="fixed w-full bg-gradient-to-b from-[rgba(0,0,0,0.8)]" aria-label="Global">
<div class="flex lg:flex-1"> <div class="max-w-screen-xl flex flex-wrap lg:flex-1 items-center justify-between mx-auto p-4">
<a href="/" class="-m-1.5 p-1.5"> <a href="/" class="flex items-center space-x-3">
<span class="sr-only">Your Company</span> <span class="sr-only">Rossini Energy</span>
<img class="h-8 w-auto" src={`${assets}/RossiniEnergy-Logo-White.png`} alt=""> {#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> </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>
<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> </nav>
<!-- Mobile menu, show/hide based on menu open state. --> <!-- Mobile menu, show/hide based on menu open state. -->
{#if mobileMenuOpen} {#if mobileMenuOpen}