From f016393d5b5e32dca1ab85316f4ce59a03d62302 Mon Sep 17 00:00:00 2001
From: David Abram <david@crocoder.dev>
Date: Thu, 2 Jan 2025 23:47:38 +0100
Subject: [PATCH 1/6] test

---
 apps/website/src/components/navigation.astro | 84 ++++++++++----------
 1 file changed, 43 insertions(+), 41 deletions(-)

diff --git a/apps/website/src/components/navigation.astro b/apps/website/src/components/navigation.astro
index 509572f0..6dc0d15e 100644
--- a/apps/website/src/components/navigation.astro
+++ b/apps/website/src/components/navigation.astro
@@ -18,7 +18,7 @@
     z-50"
 >
   <nav
-    class='bg-[#3C3843E5]
+    class="bg-[#3C3843E5]
       flex
       items-center
       justify-between
@@ -29,21 +29,21 @@
       md:rounded-r-lg
       md:overflow-hidden
       relative
-      max-md:has-[input:checked]:bg-[#3c3843]'
+      max-md:has-[input:checked]:bg-[#3c3843]"
   >
-    <a class='sm:flex sm:items-center' href='/' aria-label='Crocoder Logo'>
+    <a class="sm:flex sm:items-center" href="/" aria-label="Crocoder Logo">
       <img
         width={64}
         height={30}
-        alt='Crocoder Crocodile Logo'
-        src='./images/crocoder-logo.png'
-        class='h-[48px] w-auto'
+        alt="Crocoder Crocodile Logo"
+        src="./images/crocoder-logo.png"
+        class="h-[48px] w-auto"
       />
       <img
         width={153}
         height={24}
-        alt='Crocoder Text Logo'
-        src='./images/crocoder-text.svg'
+        alt="Crocoder Text Logo"
+        src="./images/crocoder-text.svg"
         class="pl-2 hidden h-6 w-auto md:block
           md:[&[data-navhidden='false']]:opacity-0
           md:[&[data-navhidden='']]:opacity-100"
@@ -51,14 +51,14 @@
       />
     </a>
     <input
-      id='nav-menu-toggle'
-      type='checkbox'
+      id="nav-menu-toggle"
+      type="checkbox"
       readonly
-      class='hidden peer/menu-toggle'
+      class="hidden peer/menu-toggle"
     />
     <label
-      for='nav-menu-toggle'
-      class='md:hidden
+      for="nav-menu-toggle"
+      class="md:hidden
       flex
       flex-col
       gap-1.5
@@ -67,57 +67,57 @@
       peer-checked/menu-toggle:[&>*:nth-child(2)]:opacity-0
       peer-checked/menu-toggle:[&>*:nth-child(2)]:-translate-x-full
       peer-checked/menu-toggle:[&>*:nth-child(3)]:-translate-y-2
-      peer-checked/menu-toggle:[&>*:nth-child(3)]:-rotate-45'
+      peer-checked/menu-toggle:[&>*:nth-child(3)]:-rotate-45"
     >
-      <span class='h-0.5 w-6 bg-neutral-50 transition-transform duration-200'
+      <span class="h-0.5 w-6 bg-neutral-50 transition-transform duration-200"
       ></span>
       <span
-        class='h-0.5 w-6 bg-neutral-50 transition-[transform_opacity] duration-350'
+        class="h-0.5 w-6 bg-neutral-50 transition-[transform_opacity] duration-350"
       ></span>
-      <span class='h-0.5 w-6 bg-neutral-50 transition-transform duration-200'
+      <span class="h-0.5 w-6 bg-neutral-50 transition-transform duration-200"
       ></span>
     </label>
     <div
-      class='max-md:absolute max-md:hidden max-md:peer-checked/menu-toggle:flex max-md:flex-col max-md:gap-7 max-md:top-[74px] max-md:w-full max-md:py-7 bg-[#3c3843] max-md:h-[calc(100vh-74px)] max-md:right-0 md:bg-transparent md:flex md:items-center'
+      class="max-md:absolute max-md:hidden max-md:peer-checked/menu-toggle:flex max-md:flex-col max-md:gap-7 max-md:top-[74px] max-md:w-full max-md:py-7 bg-[#3c3843] max-md:h-[calc(100vh-74px)] max-md:right-0 md:bg-transparent md:flex md:items-center"
     >
       <ul
         data-navhidden
-        class='flex flex-col md:flex-row gap-7 mx-7 md:mx-0 md:ml-20 md:w-auto relative top-1'
+        class="flex flex-col md:flex-row gap-7 mx-7 md:mx-0 md:ml-20 md:w-auto relative top-1"
       >
         <li>
           <a
-            class='font-medium text-2xl md:text-lg text-[#E8E8E8] hover:text-white whitespace-nowrap'
-            href='/blog'
+            class="font-medium text-2xl md:text-lg text-[#E8E8E8] hover:text-white whitespace-nowrap"
+            href="/blog"
           >
             For CTOs
           </a>
         </li>
         <li>
           <a
-            class='font-medium text-2xl md:text-lg text-[#E8E8E8] hover:text-white'
-            href='/blog'
+            class="font-medium text-2xl md:text-lg text-[#E8E8E8] hover:text-white"
+            href="/blog"
           >
             Blog
           </a>
         </li>
       </ul>
-      <ul class='flex gap-4 mx-7 md:ml-4 md:mx-4'>
+      <ul class="flex gap-4 mx-7 md:ml-4 md:mx-4">
         <li>
           <a
-            id='book-a-call-action'
+            id="book-a-call-action"
             class="flex w-fit font-medium h-[45px] items-center px-4 py-2 rounded-md text-base text-center whitespace-nowrap bg-[#545664] text-[#ffffff] hover:opacity-90
           md:[&[data-navhidden='false']]:!w-auto
           md:[&[data-navhidden='false']]:!px-4
           md:[&[data-navhidden='false']]:opacity-0
           md:[&[data-navhidden='']]:opacity-100
           md:[&[data-navhidden='']]:delay-100"
-            data-navhidden='false'
-            href='#book-a-call-section'>Book a call</a
+            data-navhidden="false"
+            href="#book-a-call-section">Book a call</a
           >
-          <li class='hidden'>
+          <li class="hidden">
             <a
-              class='flex font-medium w-fit h-[45px] items-center px-4 py-2 rounded-md text-base text-center whitespace-nowrap bg-[#FEC343] text-[#1E1A1A] hover:opacity-90'
-              href='/contact'
+              class="flex font-medium w-fit h-[45px] items-center px-4 py-2 rounded-md text-base text-center whitespace-nowrap bg-[#FEC343] text-[#1E1A1A] hover:opacity-90"
+              href="/contact"
             >
               Contact us
             </a>
@@ -146,21 +146,21 @@
               lastRan = Date.now();
             }
           },
-          limit - (Date.now() - lastRan)
+          limit - (Date.now() - lastRan),
         );
       }
     };
   }
 
   let lastScrollTop = 0;
-  const allDataHidden = document.querySelectorAll('[data-navhidden]');
-  const bookACallAction = document.getElementById('book-a-call-action');
+  const allDataHidden = document.querySelectorAll("[data-navhidden]");
+  const bookACallAction = document.getElementById("book-a-call-action");
 
   function invertDataAttributte() {
     allDataHidden.forEach((e) => {
-      if (e.getAttribute('data-navhidden') === '')
-        e.setAttribute('data-navhidden', 'false');
-      else e.setAttribute('data-navhidden', '');
+      if (e.getAttribute("data-navhidden") === "")
+        e.setAttribute("data-navhidden", "false");
+      else e.setAttribute("data-navhidden", "");
     });
   }
 
@@ -169,12 +169,12 @@
 
     if (
       currentScrollTop > lastScrollTop &&
-      allDataHidden[0].getAttribute('data-navhidden') === ''
+      allDataHidden[0].getAttribute("data-navhidden") === ""
     ) {
       invertDataAttributte();
     } else if (
       currentScrollTop <= lastScrollTop &&
-      allDataHidden[0].getAttribute('data-navhidden') === 'false'
+      allDataHidden[0].getAttribute("data-navhidden") === "false"
     ) {
       invertDataAttributte();
     }
@@ -183,11 +183,13 @@
   }
 
   function handleBookACall() {
-    const input = document.getElementById('nav-menu-toggle');
+    const input = document.getElementById("nav-menu-toggle");
     input.checked = false;
   }
 
-  window.addEventListener('scroll', throttle(handleScroll, 200));
+  window.addEventListener("scroll", throttle(handleScroll, 200));
 
-  bookACallAction.addEventListener('click', handleBookACall);
+  console.log("window", window);
+
+  bookACallAction.addEventListener("click", handleBookACall);
 </script>

From 6920d7995970c8faef00df40571998cc23303b4c Mon Sep 17 00:00:00 2001
From: David Abram <david@crocoder.dev>
Date: Fri, 3 Jan 2025 00:05:19 +0100
Subject: [PATCH 2/6] test2

---
 apps/website/src/components/navigation.astro | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/apps/website/src/components/navigation.astro b/apps/website/src/components/navigation.astro
index 6dc0d15e..cec4ff98 100644
--- a/apps/website/src/components/navigation.astro
+++ b/apps/website/src/components/navigation.astro
@@ -158,13 +158,16 @@
 
   function invertDataAttributte() {
     allDataHidden.forEach((e) => {
-      if (e.getAttribute("data-navhidden") === "")
+      if (e.getAttribute("data-navhidden") === "") {
         e.setAttribute("data-navhidden", "false");
-      else e.setAttribute("data-navhidden", "");
+      } else {
+        e.setAttribute("data-navhidden", "");
+      }
     });
   }
 
   function handleScroll() {
+    console.log("scrolled");
     let currentScrollTop = window.scrollY || document.documentElement.scrollTop;
 
     if (

From 6a83a343a3a69e6350bcf7c03918c2d20cde7e66 Mon Sep 17 00:00:00 2001
From: David Abram <david@crocoder.dev>
Date: Fri, 3 Jan 2025 00:07:20 +0100
Subject: [PATCH 3/6] fix try1

---
 apps/website/src/components/navigation.astro | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/apps/website/src/components/navigation.astro b/apps/website/src/components/navigation.astro
index cec4ff98..4132b1d4 100644
--- a/apps/website/src/components/navigation.astro
+++ b/apps/website/src/components/navigation.astro
@@ -153,7 +153,6 @@
   }
 
   let lastScrollTop = 0;
-  const allDataHidden = document.querySelectorAll("[data-navhidden]");
   const bookACallAction = document.getElementById("book-a-call-action");
 
   function invertDataAttributte() {
@@ -167,7 +166,7 @@
   }
 
   function handleScroll() {
-    console.log("scrolled");
+    const allDataHidden = document.querySelectorAll("[data-navhidden]");
     let currentScrollTop = window.scrollY || document.documentElement.scrollTop;
 
     if (

From c838c64070e27957f01e256ad9230a467250f9dd Mon Sep 17 00:00:00 2001
From: David Abram <david@crocoder.dev>
Date: Fri, 3 Jan 2025 00:09:10 +0100
Subject: [PATCH 4/6] try 2

---
 apps/website/src/components/navigation.astro | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/website/src/components/navigation.astro b/apps/website/src/components/navigation.astro
index 4132b1d4..9792fa06 100644
--- a/apps/website/src/components/navigation.astro
+++ b/apps/website/src/components/navigation.astro
@@ -155,7 +155,7 @@
   let lastScrollTop = 0;
   const bookACallAction = document.getElementById("book-a-call-action");
 
-  function invertDataAttributte() {
+  function invertDataAttributte(allDataHidden) {
     allDataHidden.forEach((e) => {
       if (e.getAttribute("data-navhidden") === "") {
         e.setAttribute("data-navhidden", "false");
@@ -178,7 +178,7 @@
       currentScrollTop <= lastScrollTop &&
       allDataHidden[0].getAttribute("data-navhidden") === "false"
     ) {
-      invertDataAttributte();
+      invertDataAttributte(allDataHidden);
     }
 
     lastScrollTop = currentScrollTop <= 0 ? 0 : currentScrollTop;

From b31c35e80670375acb3cce0d7a84dc7ea48cdb55 Mon Sep 17 00:00:00 2001
From: David Abram <david@crocoder.dev>
Date: Fri, 3 Jan 2025 00:10:59 +0100
Subject: [PATCH 5/6] fix

---
 apps/website/src/components/navigation.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/website/src/components/navigation.astro b/apps/website/src/components/navigation.astro
index 9792fa06..a2549a40 100644
--- a/apps/website/src/components/navigation.astro
+++ b/apps/website/src/components/navigation.astro
@@ -173,7 +173,7 @@
       currentScrollTop > lastScrollTop &&
       allDataHidden[0].getAttribute("data-navhidden") === ""
     ) {
-      invertDataAttributte();
+      invertDataAttributte(allDataHidden);
     } else if (
       currentScrollTop <= lastScrollTop &&
       allDataHidden[0].getAttribute("data-navhidden") === "false"

From 51de2b32dcb84dba8e990a316e93f4e1c0d8a867 Mon Sep 17 00:00:00 2001
From: David Abram <david@crocoder.dev>
Date: Fri, 3 Jan 2025 00:14:32 +0100
Subject: [PATCH 6/6] fixes

---
 apps/blog/src/layouts/header.astro | 76 ++++++++++++------------------
 1 file changed, 31 insertions(+), 45 deletions(-)

diff --git a/apps/blog/src/layouts/header.astro b/apps/blog/src/layouts/header.astro
index ee249543..2885cfcb 100644
--- a/apps/blog/src/layouts/header.astro
+++ b/apps/blog/src/layouts/header.astro
@@ -1,24 +1,15 @@
-<header
-  class="flex w-full justify-center md:mt-1"
->
-  <div class="
-    m-auto
+<header class="flex w-full justify-center md:mt-1">
+  <div
+    class="m-auto
     mx:0
     max-w-[100vw]
     w-full
     md:mx-2
     md:w-auto
-    md:[&_[data-navhidden]]:duration-700
-    md:[&_[data-navhidden]]:!overflow-hidden
-    md:[&_[data-navhidden]]:ease-in-out
-    md:[&_[data-navhidden='false']]:w-0
-    md:[&_[data-navhidden='false']]:px-0
-    md:[&_[data-navhidden='false']]:mx-0
-    md:[&_[data-navhidden='']]:max-w-48
     z-50"
   >
     <nav
-      class='bg-[#3C3843E5]
+      class="bg-[#3C3843E5]
         flex
         items-center
         justify-between
@@ -29,36 +20,33 @@
         md:rounded-r-lg
         md:overflow-hidden
         relative
-        max-md:has-[input:checked]:bg-[#3c3843]'
+        max-md:has-[input:checked]:bg-[#3c3843]"
     >
-      <a class='sm:flex sm:items-center' href='/' aria-label='Crocoder Logo'>
+      <a class="sm:flex sm:items-center" href="/" aria-label="Crocoder Logo">
         <img
           width={64}
           height={30}
-          alt='Crocoder Crocodile Logo'
-          src='./images/crocoder-logo.png'
-          class='h-[48px] w-auto'
+          alt="Crocoder Crocodile Logo"
+          src="./images/crocoder-logo.png"
+          class="h-[48px] w-auto"
         />
         <img
           width={153}
           height={24}
-          alt='Crocoder Text Logo'
-          src='./images/crocoder-text.svg'
-          class="pl-2 hidden h-6 w-auto md:block
-            md:[&[data-navhidden='false']]:opacity-0
-            md:[&[data-navhidden='']]:opacity-100"
-          data-navhidden
+          alt="Crocoder Text Logo"
+          src="./images/crocoder-text.svg"
+          class="pl-2 hidden h-6 w-auto md:block"
         />
       </a>
       <input
-        id='nav-menu-toggle'
-        type='checkbox'
+        id="nav-menu-toggle"
+        type="checkbox"
         readonly
-        class='hidden peer/menu-toggle'
+        class="hidden peer/menu-toggle"
       />
       <label
-        for='nav-menu-toggle'
-        class='md:hidden
+        for="nav-menu-toggle"
+        class="md:hidden
         flex
         flex-col
         gap-1.5
@@ -67,47 +55,45 @@
         peer-checked/menu-toggle:[&>*:nth-child(2)]:opacity-0
         peer-checked/menu-toggle:[&>*:nth-child(2)]:-translate-x-full
         peer-checked/menu-toggle:[&>*:nth-child(3)]:-translate-y-2
-        peer-checked/menu-toggle:[&>*:nth-child(3)]:-rotate-45'
+        peer-checked/menu-toggle:[&>*:nth-child(3)]:-rotate-45"
       >
-        <span class='h-0.5 w-6 bg-neutral-50 transition-transform duration-200'
+        <span class="h-0.5 w-6 bg-neutral-50 transition-transform duration-200"
         ></span>
         <span
-          class='h-0.5 w-6 bg-neutral-50 transition-[transform_opacity] duration-350'
+          class="h-0.5 w-6 bg-neutral-50 transition-[transform_opacity] duration-350"
         ></span>
-        <span class='h-0.5 w-6 bg-neutral-50 transition-transform duration-200'
+        <span class="h-0.5 w-6 bg-neutral-50 transition-transform duration-200"
         ></span>
       </label>
       <div
-        class='max-md:absolute max-md:hidden max-md:peer-checked/menu-toggle:flex max-md:flex-col max-md:gap-7 max-md:top-[74px] max-md:w-full max-md:py-7 bg-[#3c3843] max-md:h-[calc(100vh-74px)] max-md:right-0 md:bg-transparent md:flex md:items-center'
+        class="max-md:absolute max-md:hidden max-md:peer-checked/menu-toggle:flex max-md:flex-col max-md:gap-7 max-md:top-[74px] max-md:w-full max-md:py-7 bg-[#3c3843] max-md:h-[calc(100vh-74px)] max-md:right-0 md:bg-transparent md:flex md:items-center"
       >
         <ul
-          data-navhidden
-          class='flex flex-col md:flex-row gap-7 mx-7 md:mx-0 md:ml-20 md:w-auto relative top-1'
+          class="flex flex-col md:flex-row gap-7 mx-7 md:mx-0 md:ml-20 md:w-auto relative top-1"
         >
           <li>
             <a
-              class='font-medium text-2xl md:text-lg text-[#E8E8E8] hover:text-white whitespace-nowrap'
-              href='/blog'
+              class="font-medium text-2xl md:text-lg text-[#E8E8E8] hover:text-white whitespace-nowrap"
+              href="/blog"
             >
               For CTOs
             </a>
           </li>
           <li>
             <a
-              class='font-medium text-2xl md:text-lg text-[#E8E8E8] hover:text-white'
-              href='/blog'
+              class="font-medium text-2xl md:text-lg text-[#E8E8E8] hover:text-white"
+              href="/blog"
             >
               Blog
             </a>
           </li>
         </ul>
-        <ul class='flex gap-4 mx-7 md:ml-4 md:mx-4'>
+        <ul class="flex gap-4 mx-7 md:ml-4 md:mx-4">
           <li>
             <a
-              id='book-a-call-action'
-              class="flex w-fit font-medium h-[45px] items-center px-4 py-2 rounded-md text-base text-center whitespace-nowrap bg-[#545664] text-[#ffffff] hover:opacity-90"
-              data-navhidden
-              href='/#book-a-call-section'>Book a call</a
+              id="book-a-call-action"
+              class="flex opacity-0 w-fit font-medium h-[45px] items-center px-4 py-2 rounded-md text-base text-center whitespace-nowrap bg-[#545664] text-[#ffffff] hover:opacity-90"
+              href="/#book-a-call-section">Book a call</a
             >
           </li>
         </ul>