claude refactor nav js logic

Author: sodevious

src/_includes/header.html

@@ -16,7 +16,7 @@
 </aside>
 {% endif %}
 
-<header id="SiteHeader" class="{% if current_phase == 'landing' %}fixed top-0 z-40 w-full py-4 bg-white lg:py-6 lg:relative{% elsif current_phase == 'archived' %}absolute top-0 z-40 w-full py-4 lg:py-6{% else %}lg:top-0 site-header is-closed lg:is-open{% endif %}">
+<header id="SiteHeader" class="{% if current_phase == 'landing' %}fixed top-0 z-40 w-full py-4 bg-white lg:py-6 lg:relative{% elsif current_phase == 'archived' and page.url == '/' %}absolute top-0 z-40 w-full py-4 lg:py-6{% else %}lg:top-0 site-header is-closed lg:is-open{% endif %}">
   <div class="wrapper">
     <nav class="flex flex-wrap" role="navigation">
       <div class="flex items-center justify-between w-full lg:max-w-max lg:flex-1">

src/assets/js/main.js

@@ -5,70 +5,43 @@ const siteNav = document.getElementById('SiteNav');
 
 if (siteNav) {
   const navToggler = document.getElementById('NavToggler');
+  const siteBody = document.getElementById('SiteBody');
+  const siteHeader = document.getElementById('SiteHeader');
   const allMenus = siteNav.querySelectorAll('[data-menu-list]');
+  const navMenuTriggers = document.querySelectorAll('[data-menu-trigger]');
 
-  navToggler.addEventListener('click', () => {
-    const siteBody = document.getElementById('SiteBody');
-    const siteHeader = document.getElementById('SiteHeader');
-
-    console.log('Toggling site navigation');
-    console.log(siteNav.classList.contains('hidden'));
-
-    if (siteNav.classList.contains('is-closed')) {
-      siteNav.classList.replace('is-closed', 'is-open');
-      siteHeader.classList.replace('is-closed', 'is-open');
-      navToggler.classList.replace('is-closed', 'is-open');
-    } else {
-      siteNav.classList.replace('is-open', 'is-closed');
-      siteHeader.classList.replace('is-open', 'is-closed');
-      navToggler.classList.replace('is-open', 'is-closed');
-    }
+  const closeAllMenus = () => {
+    allMenus.forEach(menu => menu.classList.replace('flex', 'hidden'));
+    navMenuTriggers.forEach(trigger => trigger.setAttribute('aria-expanded', 'false'));
+  };
 
-    /*
-      Hide the main content and footer when the mobile menu is open.
-      This allows the menu to be scrollable and limits the DOM for screen readers.
-    */
+  navToggler.addEventListener('click', () => {
+    const isOpen = siteNav.classList.contains('is-open');
+    [siteNav, siteHeader, navToggler].forEach(el => {
+      el.classList.toggle('is-open', !isOpen);
+      el.classList.toggle('is-closed', isOpen);
+    });
     siteBody.classList.toggle('mobile-nav-open');
   });
 
-  const navMenuTriggers = document.querySelectorAll('[data-menu-trigger]');
-
   navMenuTriggers.forEach(trigger => {
     trigger.addEventListener('click', (evt) => {
       evt.preventDefault();
       const target = trigger.nextElementSibling;
+      const willOpen = target.classList.contains('hidden');
 
-      navMenuTriggers.forEach((trigger) => {
-        trigger.setAttribute('aria-expanded', 'false');
-      });
+      closeAllMenus();
 
-      allMenus.forEach((menu) => {
-        if (menu !== target) {
-          menu.classList.replace('flex', 'hidden');
-        }
-      });
-
-      if (target.classList.contains('hidden')) {
+      if (willOpen) {
         target.classList.replace('hidden', 'flex');
         trigger.setAttribute('aria-expanded', 'true');
-      } else {
-        target.classList.replace('flex', 'hidden');
-        trigger.setAttribute('aria-expanded', 'false');
       }
     });
   });
 
-  // Close all menus when the user clicks outside
-  document.addEventListener('click', function (evt) {
-    if (!siteNav.contains(evt.target) && navToggler !== evt.target) {
-      // Close all menus if you click outside of menu
-      allMenus.forEach((menu) => {
-        menu.classList.replace('flex', 'hidden');
-      });
-
-      navMenuTriggers.forEach((trigger) => {
-        trigger.setAttribute('aria-expanded', 'false');
-      });
+  document.addEventListener('click', (evt) => {
+    if (!siteNav.contains(evt.target) && evt.target !== navToggler) {
+      closeAllMenus();
     }
   });
 }

src/index.html

@@ -3,7 +3,7 @@
 
 title: Welcome to DjangoCon US 2025
 
-# Set custom_header for active phase (hero wraps header)
+# Set custom_header so homepage controls its own header
 custom_header: true
 
 # Featured talks (talks only). Max 6.
@@ -38,16 +38,19 @@
 ---
 
 {% if site.phase == "active" %}
+{%- comment -%} Active: header wrapped in hero section {%- endcomment -%}
 <div class="home-hero">
   {% include "header.html" %}
 
-  {% include 'home/landing-conf-home.html' %}
-{% elsif site.phase == "archived" %}
-  {% include 'home/archived-conf-home.html' %}
-{% else %}
-  {% comment %}
-    The conference site is fully live
-  {% endcomment %}
+  <div id="SiteHero" class="flex justify-center lg:justify-start flex:block wrapper">
+    <section class="home-hero-content">
+      <h2 class="pt-8">
+        Join us for five days of inspiration, education, and networking
+      </h2>
+
+      <p class="py-3 mb-4 text-2xl lg:text-3xl">
+        September 8-12th, 2025
+      </p>
 
       <a
         href="https://www.ihg.com/voco/hotels/us/en/chicago/chiwp/hoteldetail"
@@ -74,14 +77,16 @@
 
   <img src="/assets/img/theme/hero-wave-invert.svg" class="object-cover object-center w-full h-20 pointer-events-none 2xl:h-auto" role="presentation" />
 </div>
-{% else %}
-  {% include "header.html" %}
-{% endif %}
+{% include 'home/active-conf-home.html' %}
 
-{% if site.phase == "landing" %}
-  {% include 'home/landing-conf-home.html' %}
 {% elsif site.phase == "archived" %}
-  {% include 'home/archived-conf-home.html' %}
-{% elsif site.phase == "active" %}
-  {% include 'home/active-conf-home.html' %}
+{%- comment -%} Archived: standard header {%- endcomment -%}
+{% include "header.html" %}
+{% include 'home/archived-conf-home.html' %}
+
+{% else %}
+{%- comment -%} Landing: standard header {%- endcomment -%}
+{% include "header.html" %}
+{% include 'home/landing-conf-home.html' %}
+
 {% endif %}