update header

Author: math-pixel

astro.config.mjs

@@ -1,10 +1,11 @@
 import { defineConfig } from 'astro/config';
 import tailwind from "@astrojs/tailwind";
 import svelte from "@astrojs/svelte";
-
 import mdx from "@astrojs/mdx";
 
+import alpinejs from "@astrojs/alpinejs";
+
 // https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind(), svelte(), mdx()]
+  integrations: [tailwind(), svelte(), mdx(), alpinejs()]
 });

package-lock.json

@@ -10,11 +10,14 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@astrojs/alpinejs": "^0.4.0",
     "@astrojs/check": "^0.9.2",
     "@astrojs/mdx": "^3.1.4",
     "@astrojs/svelte": "^5.7.0",
     "@astrojs/tailwind": "^5.1.0",
     "@lottiefiles/svelte-lottie-player": "^0.3.1",
+    "@types/alpinejs": "^3.13.10",
+    "alpinejs": "^3.14.1",
     "astro": "^4.14.2",
     "svelte": "^4.2.19",
     "tailwindcss": "^3.4.10",

package.json

@@ -6,10 +6,25 @@ interface Props {
 
 const { href, title } = Astro.props;
 ---
-
-<ul class=" sticky inset-x-0 top-4 z-50 global-color flex justify-around w-1/3 rounded-full mx-auto my-5 text-2xl drop-shadow-sm">
+<!-- sticky inset-x-0 top-4 z-50 global-color flex justify-around w-1/3 rounded-full mx-auto my-5 text-2xl drop-shadow-sm -->
+<ul  
+	id="main-header"
+	class=" duration-500 sticky inset-x-0 top-4 z-50 flex justify-around w-1/3 rounded-full mx-auto my-5 text-2xl drop-shadow-sm"
+	>
 	{title.map((item, index) => (
         <a href={href[index]} class=" m-4 font-medium hover:text-hover">{item}</a>
     ))}
 </ul>
 
+<script>
+	let header:any = document.getElementById('main-header');
+	
+	window.addEventListener('scroll', () => {
+	  if (window.scrollY > 50) {
+		header.classList.add("global-color");
+	  } else {
+		header.classList.remove("global-color");
+	}
+	});
+  </script>
+

src/components/header.astro

@@ -52,10 +52,8 @@ const cards = [
 	// { title: "2D Printer", body: "yey" ,href: "" },
 	// { title: "1D Printer", body: "null" ,href: "" }
 ]
-
-let atTop = true
 ---
-<LayoutPage title="Mathieu Chavanel - Portfolio" @scroll.window = "alert('tutu')">
+<LayoutPage title="Mathieu Chavanel - Portfolio" >
 	<CursorFollower client:load></CursorFollower>
 	<Header title={["Accueil", "Projets", "Contact"]} href={["/", "/#projectHighlight", "/#contact"]}></Header>
 	<div id="home" class=" flex w-full h-screen ">
@@ -154,7 +152,7 @@ let atTop = true
 		}
 
 		.text-hover{
-			text-shadow: 0px 0px 1px black;
+			text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.677);
 		}
 
 	}