Use astro page load.

Author: nikoshell

src/components/Header.astro

@@ -46,16 +46,18 @@ import links from "@data/links.json";
   </div>
 </section>
 <Search />
+
+<style>
+  :root::view-transition-group(navbar) {
+    z-index: 100;
+  }
+</style>
 <script>
 document.addEventListener("astro:page-load", () => {
   let prevScrollPos = window.pageYOffset;
-  const navbar = document.getElementById("navbar");
-  if (!navbar) return;
-
-  let isFocused = false;
+  const navbar = document.getElementById("navbar") as HTMLElement;
 
   window.addEventListener("scroll", () => {
-    if (isFocused) return;
     let currentScrollPos = window.pageYOffset;
     if (prevScrollPos > currentScrollPos) {
       navbar.style.transform = "translateY(0)";
@@ -65,13 +67,12 @@ document.addEventListener("astro:page-load", () => {
     prevScrollPos = currentScrollPos;
   });
 
+
   navbar.addEventListener("focusin", () => {
-    isFocused = true;
     navbar.style.transform = "translateY(0)";
   });
 
   navbar.addEventListener("focusout", () => {
-    isFocused = false;
     if (window.pageYOffset > 100) {
       navbar.style.transform = "translateY(-100%)";
     }

src/components/Modal.astro

@@ -27,7 +27,7 @@ const { id = 'modal', open = false, closeOnOutsideClick = false } = Astro.props;
   </div>
 </div>
 <script >
-  document.addEventListener('DOMContentLoaded', () => {
+  document.addEventListener('astro:page-load', () => {
     // Function to toggle body scroll
     const toggleBodyScroll = (disable: any) => {
       if (disable) {

src/components/NavItems.astro

@@ -103,7 +103,7 @@ const { items, inverted = false, level = 1 } = Astro.props;
 
 <script>
   // Add keyboard navigation support
-  document.addEventListener('DOMContentLoaded', () => {
+  document.addEventListener('astro:page-load', () => {
     const navButtons = document.querySelectorAll('[role="menuitem"][aria-haspopup="true"]');
 
     navButtons.forEach(button => {

src/components/Offline.astro

@@ -6,7 +6,7 @@
 </div>
 <script is:inline>
 
-  document.addEventListener('DOMContentLoaded', () => {
+  document.addEventListener('astro:page-load', () => {
     const offlineIcon = document.getElementById('offline-icon');
 
     function updateOnlineStatus() {

src/components/Search.astro

@@ -24,7 +24,7 @@ import Modal from "@components/Modal.astro";
 
 
 <script>
-document.addEventListener("DOMContentLoaded", function () {
+document.addEventListener("astro:page-load", function () {
   const searchContainer = document.querySelector(".pagefind-ui") as HTMLElement | null;
   const searchInput = searchContainer?.querySelector("input") as HTMLInputElement | null;
   const searchButton = document.getElementById("searchButton") as HTMLElement | null;

src/components/schedule/day.astro

@@ -638,7 +638,7 @@ const dateText = format(date, "eeee - do MMMM");
 </style>
 
 <script>
-  document.addEventListener("DOMContentLoaded", function () {
+  document.addEventListener("astro:page-load", function () {
     const containers = document.querySelectorAll(".schedule-container");
 
     function syncScroll(event: any) {

src/components/sections/speakers.astro

@@ -70,7 +70,7 @@ const sectionSubtitle = "Meet some of our amazing speakers";
 </Section>
 
 <script>
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('astro:page-load', () => {
   const track = document.querySelector('.speakers-track') as HTMLElement;
   const slides = document.querySelectorAll('.speaker-slide');
   const totalOriginalSlides = slides.length / 2;

src/components/sessions/filter.astro

@@ -80,7 +80,7 @@ import Select from "@ui/Select.astro";
     search: string;
   }
 
-  document.addEventListener("DOMContentLoaded", () => {
+  document.addEventListener("astro:page-load", () => {
     const forms = document.querySelectorAll<HTMLFormElement>("form.filter-sessions");
     const resultsInfo = document.getElementById("results-info");
 

src/components/ui/Accordion.astro

@@ -29,7 +29,7 @@ const { title, id } = Astro.props;
   }
 </style>
 <script>
-  document.addEventListener("DOMContentLoaded", () => {
+  document.addEventListener("astro:page-load", () => {
     const hash = window.location.hash.substring(1); // Remove #
     if (hash) {
       const details = document.getElementById(

src/layouts/MarkdownLayout.astro

@@ -34,7 +34,7 @@ const { title, description, toc=false } = Astro.props;
 </Layout>
 
 <script is:inline>
-  document.addEventListener("DOMContentLoaded", () => {
+  document.addEventListener("astro:page-load", () => {
     const tocContainer = document.getElementById("toc");
     if (!tocContainer) return;
 

src/pages/media/speaker/[slug].astro

@@ -85,7 +85,7 @@ window.addEventListener('resize', fitAllText);
 </script>
 
 <script is:inline define:vars={{slug: entry.data.slug}}>
-  document.addEventListener('DOMContentLoaded', () => {
+  document.addEventListener('astro:page-load', () => {
     document.querySelectorAll('.social').forEach((socialDiv, index) => {
 
   socialDiv.addEventListener('click', () => {

src/pages/media/sponsor/[slug].astro

@@ -86,7 +86,7 @@ window.addEventListener('resize', fitAllText);
 </script>
 
 <script is:inline define:vars={{slug: sponsor.id}}>
-  document.addEventListener('DOMContentLoaded', () => {
+  document.addEventListener('astro:page-load', () => {
     document.querySelectorAll('.social').forEach((socialDiv, index) => {
 
   socialDiv.addEventListener('click', () => {