From 53d46650e82a6c05f2475e8592975eba95c48827 Mon Sep 17 00:00:00 2001
From: Noel De Martin <noel@noeldemartin.com>
Date: Wed, 22 Jan 2025 08:30:50 +0100
Subject: [PATCH] Implement chamaleon header

---
 resources/assets/css/main.css                 |  2 +-
 resources/assets/js/alpine/chamaleon.js       | 25 +++++++++++++++++++
 resources/assets/js/main.js                   |  1 +
 .../views/components/layout-header.blade.php  |  5 ++--
 4 files changed, 30 insertions(+), 3 deletions(-)
 create mode 100644 resources/assets/js/alpine/chamaleon.js

diff --git a/resources/assets/css/main.css b/resources/assets/css/main.css
index 222b2ca..1329bd3 100644
--- a/resources/assets/css/main.css
+++ b/resources/assets/css/main.css
@@ -12,7 +12,7 @@
 }
 
 @theme {
-    --color-chamaleon: hsl(120, 40%, 80%);
+    --color-chamaleon: hsl(180, 40%, 80%);
 }
 
 @layer components {
diff --git a/resources/assets/js/alpine/chamaleon.js b/resources/assets/js/alpine/chamaleon.js
new file mode 100644
index 0000000..f89567c
--- /dev/null
+++ b/resources/assets/js/alpine/chamaleon.js
@@ -0,0 +1,25 @@
+import Alpine from 'alpinejs';
+
+function updateColor(el) {
+    el.style.setProperty(
+        '--color-chamaleon',
+        'hsl(' + ((Date.now() / 100) % 360) + ', 40%, 80%)',
+    );
+
+    requestAnimationFrame(() => updateColor(el));
+}
+
+Alpine.directive('chamaleon', (el) => {
+    updateColor(el);
+    setTimeout(() => {
+        const tintedElements = Array.from(el.querySelectorAll('.bg-chamaleon'));
+
+        if (el.matches('.bg-chamaleon')) {
+            tintedElements.push(el);
+        }
+
+        tintedElements.forEach((tintedElement) => {
+            tintedElement.classList.remove('transition-colors');
+        });
+    }, 1000);
+});
diff --git a/resources/assets/js/main.js b/resources/assets/js/main.js
index 4ea8d29..cfb8263 100644
--- a/resources/assets/js/main.js
+++ b/resources/assets/js/main.js
@@ -1,5 +1,6 @@
 import Alpine from 'alpinejs';
 
+import './alpine/chamaleon';
 import './alpine/datetime';
 
 Alpine.start();
diff --git a/resources/views/components/layout-header.blade.php b/resources/views/components/layout-header.blade.php
index 556082b..26d43cd 100644
--- a/resources/views/components/layout-header.blade.php
+++ b/resources/views/components/layout-header.blade.php
@@ -1,6 +1,7 @@
 <header
-    class="bg-chamaleon {{ $collapsed ? "md:mt-[calc(theme('height.5')+2*theme('height.2')-theme('height.32'))] lg:mt-[calc(theme('height.5')+2*theme('height.2')-theme('height.40'))]" : "" }} z-10 flex h-16 flex-col items-center md:h-32 lg:h-40"
+    class="bg-chamaleon {{ $collapsed ? "md:mt-[calc(theme('height.5')+2*theme('height.2')-theme('height.32'))] lg:mt-[calc(theme('height.5')+2*theme('height.2')-theme('height.40'))]" : "" }} z-10 flex h-16 flex-col items-center transition-colors duration-300 md:h-32 lg:h-40"
     :class="navigationOpen ? 'fixed top-0 inset-x-0' : ''"
+    x-chamaleon
 >
     <div class="max-w-content flex w-full overflow-hidden">
         <a
@@ -32,7 +33,7 @@ class="h-full fill-current text-black"
     </div>
     <nav
         aria-label="Site navigation"
-        class="md:bg-overlay bg-chamaleon fixed top-16 bottom-0 w-full -translate-x-full transition-transform duration-300 md:relative md:top-0 md:translate-x-0"
+        class="md:bg-overlay bg-chamaleon fixed top-16 bottom-0 w-full -translate-x-full transition-colors transition-transform duration-300 md:relative md:top-0 md:translate-x-0"
         :class="{
             'translate-x-0': navigationOpen,
             '-translate-x-full md:translate-x-0': !navigationOpen,