Merge pull request #68 from IATI/jump-menu

Jump menu tweaks

Author: robredpath

src/js/components/jump-menu/jump-menu.js

@@ -15,15 +15,52 @@
       jumpMenuToggle.setAttribute("aria-expanded", "false");
     }
   };
-  document.addEventListener("DOMContentLoaded", () => {
-    const jumpMenuItems = document.querySelector(".js-jump-menu-items");
-    const jumpMenuToggle = document.querySelector(".js-jump-menu-toggle");
-    if (jumpMenuItems && jumpMenuToggle) {
-      toggleMenuMenuItemsVisibility(false, jumpMenuItems, jumpMenuToggle);
-      jumpMenuToggle.addEventListener("click", () => {
-        const isHidden = jumpMenuItems.getAttribute("aria-hidden");
-        toggleMenuMenuItemsVisibility(isHidden, jumpMenuItems, jumpMenuToggle);
-      });
+
+  const initialiseJumpMenu = (jumpMenuToggle) => {
+    // Check if this toggle has already been initialised
+    if (jumpMenuToggle.hasAttribute("data-jump-menu-initialised")) {
+      return;
+    }
+
+    // Find the corresponding menu items within the same jump menu container
+    const jumpMenuContainer = jumpMenuToggle.closest(".iati-jump-menu");
+    if (!jumpMenuContainer) {
+      return;
+    }
+
+    const jumpMenuItems = jumpMenuContainer.querySelector(
+      ".js-jump-menu-items",
+    );
+    if (!jumpMenuItems) {
+      return;
     }
+
+    // Mark as initialised to prevent duplicate event listeners
+    jumpMenuToggle.setAttribute("data-jump-menu-initialised", "true");
+
+    // Initialise menu as hidden on mobile
+    jumpMenuItems.setAttribute("aria-hidden", "true");
+    jumpMenuToggle.setAttribute("aria-expanded", "false");
+
+    const handleToggleClick = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      const isHidden = jumpMenuItems.getAttribute("aria-hidden") === "true";
+      toggleMenuMenuItemsVisibility(isHidden, jumpMenuItems, jumpMenuToggle);
+    };
+
+    jumpMenuToggle.addEventListener("click", handleToggleClick);
+  };
+
+  const initialiseAllJumpMenus = () => {
+    const jumpMenuToggles = document.querySelectorAll(".js-jump-menu-toggle");
+
+    jumpMenuToggles.forEach((toggle) => {
+      initialiseJumpMenu(toggle);
+    });
+  };
+
+  document.addEventListener("DOMContentLoaded", () => {
+    initialiseAllJumpMenus();
   });
 })();

src/scss/components/jump-menu/_jump-menu.scss

@@ -76,7 +76,7 @@
     padding: 0.4em;
     transition: all 0.2s ease-in-out;
     &:hover {
-      background-color: $color-green-20;
+      background-color: $color-green-10;
       border-color: $color-teal-90;
     }
   }
@@ -95,4 +95,36 @@
       text-decoration: none;
     }
   }
+
+  &__subitem {
+    line-height: 1;
+    padding: 0.4em;
+    padding-inline-start: 1rem;
+    margin-left: 0.25rem;
+    transition: all 0.2s ease-in-out;
+
+    &:hover {
+      background-color: $color-green-10;
+    }
+  }
+
+  &__sublink {
+    display: block;
+    text-transform: uppercase;
+    color: $color-teal-90;
+    font-size: 0.75rem;
+    font-weight: 800;
+    line-height: 1.5;
+
+    &:active,
+    &:focus,
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  // Add top padding only to the first sublink in each subitems section
+  &__subitem:first-child .iati-jump-menu__sublink {
+    padding-top: 0.25rem;
+  }
 }

src/scss/components/jump-menu/jump-menu.stories.ts

@@ -30,14 +30,15 @@ export const Default: Story = {
         <button
           class="iati-jump-menu__toggle js-jump-menu-toggle"
           aria-controls="iati-jump-menu-items"
-          aria-expanded="true"
+          aria-expanded="false"
         >
           Open
         </button>
       </div>
       <ul
         id="iati-jump-menu-items"
         class="iati-jump-menu__items js-jump-menu-items"
+        aria-hidden="true"
       >
         ${items.map(
           (item) =>
@@ -49,3 +50,69 @@ export const Default: Story = {
     </nav>
   `,
 };
+
+export const WithSubMenus: Story = {
+  args: {
+    items: [
+      { text: "First section", link: "#" },
+      {
+        text: "Second section",
+        children: [
+          { text: "First subsection", link: "#" },
+          { text: "Second subsection", link: "#" },
+          { text: "Another subsection", link: "#" },
+        ],
+      },
+      { text: "Another section", link: "#" },
+      {
+        text: "A slightly longer title",
+        children: [
+          { text: "Subsection", link: "#" },
+          { text: "Another subsection", link: "#" },
+        ],
+      },
+      { text: "Final section", link: "#" },
+    ],
+  },
+  render: ({ items }) => html`
+    <nav class="iati-jump-menu">
+      <div class="iati-jump-menu__header">
+        <h2 class="iati-jump-menu__title">Jump to section</h2>
+        <button
+          class="iati-jump-menu__toggle js-jump-menu-toggle"
+          aria-controls="iati-jump-menu-items"
+          aria-expanded="false"
+        >
+          Open
+        </button>
+      </div>
+      <ul
+        id="iati-jump-menu-items"
+        class="iati-jump-menu__items js-jump-menu-items"
+        aria-hidden="true"
+      >
+        ${items.map((item) => {
+          if (item.children) {
+            return html`<li class="iati-jump-menu__item">
+                <a href=${item.link || "#"} class="iati-jump-menu__link"
+                  >${item.text}</a
+                >
+              </li>
+              ${item.children.map(
+                (child: any) =>
+                  html`<li class="iati-jump-menu__subitem">
+                    <a href=${child.link} class="iati-jump-menu__sublink"
+                      >${child.text}</a
+                    >
+                  </li>`,
+              )}`;
+          } else {
+            return html`<li class="iati-jump-menu__item">
+              <a href=${item.link} class="iati-jump-menu__link">${item.text}</a>
+            </li>`;
+          }
+        })}
+      </ul>
+    </nav>
+  `,
+};