update accordian to not animate on page load (#2467)

Co-authored-by: Josh Collinsworth <joshuajcollinsworth@gmail.com>

Author: thisisjofrank

_components/SidebarNav.tsx

@@ -47,21 +47,13 @@ export default function (data: Lume.Data) {
                   {item.items && item.items.length > 0
                     ? (
                       <>
-                        <label
-                          htmlFor={`sub-nav-toggle-${
-                            item.title.replaceAll(" ", "")
-                          }`}
-                          className="sub-nav-toggle block relative py-1 px-3 after:right-4 [font:inherit] after:translate-y-1/2 after:transition-transfor after:duration-100 after:ease-in after:[background:url(./img/chevron.svg)_no-repeat_center] after:-top-0.5 after:block after:w-4 after:h-4 after:absolute"
+                        <button
+                          type="button"
+                          data-accordion-toggle={item.title.replaceAll(" ", "")}
+                          className="sub-nav-toggle block relative py-1 px-3 after:right-4 [font:inherit] after:translate-y-1/2 after:transition-transform after:duration-100 after:ease-in after:[background:url(./img/chevron.svg)_no-repeat_center] after:-top-0.5 after:block after:w-4 after:h-4 after:absolute w-full text-left"
                         >
                           {item.title}
-                          <input
-                            type="checkbox"
-                            id={`sub-nav-toggle-${
-                              item.title.replaceAll(" ", "")
-                            }`}
-                            className="sub-nav-toggle-checkbox sr-only"
-                          />
-                        </label>
+                        </button>
                         <SidebarList>
                           {item.items.map((subItem: any) => (
                             <li key={subItem.href}>

static/js/sidebar.client.js

@@ -2,17 +2,45 @@ const sidebar = document.getElementById("nav");
 const button = document.getElementById("hamburger-button");
 
 if (sidebar) {
-  const checkboxes = document.querySelectorAll(".sub-nav-toggle-checkbox");
-  checkboxes.forEach((checkbox) => {
-    // on change of the checkbox, update the checked state in the local storage
-    checkbox.addEventListener("change", () => {
-      console.log("updated");
-      localStorage.setItem(checkbox.id, checkbox.checked);
-    });
+  const toggleButtons = document.querySelectorAll(
+    ".sub-nav-toggle[data-accordion-toggle]",
+  );
+
+  toggleButtons.forEach((toggleButton) => {
+    const accordionId = toggleButton.getAttribute("data-accordion-toggle");
+    const parentLi = toggleButton.closest("li");
+
+    // Set initial state from localStorage without animation
+    const isExpanded =
+      localStorage.getItem(`accordion-${accordionId}`) === "true";
+    if (parentLi) {
+      if (isExpanded) {
+        parentLi.classList.add("expanded");
+        toggleButton.setAttribute("aria-expanded", "true");
+      } else {
+        toggleButton.setAttribute("aria-expanded", "false");
+      }
+    }
 
-    // set the checked state of the checkbox based on the value in the local storage
-    const checked = localStorage.getItem(checkbox.id) === "true";
-    checkbox.checked = checked;
+    // Add click event listener
+    toggleButton.addEventListener("click", () => {
+      if (parentLi) {
+        // Add the user-interaction class to enable animations
+        parentLi.classList.add("user-interaction");
+
+        const wasExpanded = parentLi.classList.contains("expanded");
+
+        if (wasExpanded) {
+          parentLi.classList.remove("expanded");
+          toggleButton.setAttribute("aria-expanded", "false");
+          localStorage.setItem(`accordion-${accordionId}`, "false");
+        } else {
+          parentLi.classList.add("expanded");
+          toggleButton.setAttribute("aria-expanded", "true");
+          localStorage.setItem(`accordion-${accordionId}`, "true");
+        }
+      }
+    });
   });
 }
 

styles.css

@@ -1401,41 +1401,41 @@
     li:has(> &) {
       display: grid;
       grid-template-rows: max-content 0fr;
-      transition: grid 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
+      /* Only animate when user interaction class is present */
+    }
+
+    /* Apply transitions when li has user-interaction class */
+    li.user-interaction:has(> &) {
+      transition: grid-template-rows 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
     }
 
     + ul {
       margin-left: 1rem !important;
     }
 
-    li:has(> .sub-nav-toggle-checkbox:checked) {
+    /* Expanded state when li has the 'expanded' class */
+    li:has(> &).expanded {
       grid-template-rows: max-content 1fr;
       padding-bottom: 1rem;
     }
 
-    li:has(> + ul:focus-within) {
-      grid-template-rows: max-content 1fr;
-      padding-bottom: 1rem;
+    /* Rotate chevron when expanded - only animate on user interaction */
+    li.expanded > &::after {
+      transform: rotate(90deg);
     }
 
-    &:has(.sub-nav-toggle-checkbox:checked)::after {
-      transform: rotate(90deg);
+    li.user-interaction > &::after {
+      transition: transform 0.1s ease-in;
     }
 
     &:has(+ ul:focus-within)::after {
       transform: rotate(90deg);
     }
   }
 
-  .sub-nav-toggle-checkbox {
-    li:has(> .sub-nav-toggle &:checked) {
-      grid-template-rows: max-content 1fr;
-      padding-bottom: 1rem;
-    }
-
-    .sub-nav-toggle:has(&:checked)::after {
-      transform: rotate(90deg);
-    }
+  li:has(.sub-nav-toggle + ul:focus-within) {
+    grid-template-rows: max-content 1fr;
+    padding-bottom: 1rem;
   }
 
   #hamburger-button[aria-pressed="true"] {