function dropdown and hide

Author: hmillersarah

web-components/nav-header/nav-header.css

@@ -214,10 +214,11 @@ input {
 
 .icon-right {
   display: none !important;
+  transform: rotate(0deg);
 }
 
-.icon-down {
-  display: none !important;
+.icon-right:hover {
+  color: #71a3e9;
 }
 
 /* 768px and below screen sizes */

web-components/nav-header/nav-header.html

@@ -64,13 +64,8 @@ <h4>IBM <b>IMS Central</b></h4>
 
     <section class="dropdown-menu">
       <div class="menu">
-        <div class="learn">
+        <div class="learn-section">
           <span class="subheader">
-            <i
-              class="fa fa-angle-down icon-down"
-              tabindex="0"
-              style="font-size: 24px"
-            ></i>
             <i
               class="fa fa-angle-right icon-right"
               tabindex="0"
@@ -116,8 +111,15 @@ <h5>
             <p>Learn about the latest IMS features and offerings.</p>
           </a>
         </div>
-        <div class="innovate">
-          <h3>Innovate</h3>
+        <div class="innovate-section">
+          <span class="subheader">
+            <i
+              class="fa fa-angle-right icon-right"
+              tabindex="0"
+              style="font-size: 24px"
+            ></i>
+            <h3>Innovate</h3>
+          </span>
           <a href="ims-apis.html" tabindex="-1">
             <h5>APIs</h5>
             <p>
@@ -145,8 +147,15 @@ <h5>IMS Transaction Manager</h5>
             <p>IMS Transaction Manager: fast, secure, connected.</p>
           </a>
         </div>
-        <div class="engage">
-          <h3>Engage</h3>
+        <div class="engage-section">
+          <span class="subheader">
+            <i
+              class="fa fa-angle-right icon-right"
+              tabindex="0"
+              style="font-size: 24px"
+            ></i>
+            <h3>Engage</h3>
+          </span>
           <a href="ims-gold.html" tabindex="-1">
             <h5>IMS Gold</h5>
             <p>
@@ -204,8 +213,15 @@ <h5>
             <p>A place to connect with other IMS developers.</p>
           </a>
         </div>
-        <div class="support">
-          <h3>Documentation & support</h3>
+        <div class="support-section">
+          <span class="subheader">
+            <i
+              class="fa fa-angle-right icon-right"
+              tabindex="0"
+              style="font-size: 24px"
+            ></i>
+            <h3>Documentation & support</h3>
+          </span>
           <a href="ims-docs.html" tabindex="-1">
             <h5>Documentation</h5>
             <p>Find information on IMS, tools, and other IBM products.</p>

web-components/nav-header/nav-header.js

@@ -38,7 +38,7 @@ function createComponent(html) {
       const menuItems = dropdownMenu.querySelectorAll("a");
       const documentationMenuItem = menuItems[menuItems.length - 2];
       const supportMenuItem = menuItems[menuItems.length - 1];
-      const subheaders = shadow.querySelectorAll(".subheader");
+
       // Search
       const searchForm = shadow.getElementById("search-form");
       const searchInput = shadow.getElementById("search-input");
@@ -68,19 +68,48 @@ function createComponent(html) {
         }
       });
 
-      const learnSubheader = subheaders[0];
-      learnSubheader.addEventListener("click", () => {
-        const icon = learnSubheader.querySelector("i");
-        icon.style.display = "none";
-      });
+      // Dropdown sections for small screens
+      const dropdownSections = [
+        "learn-section",
+        "innovate-section",
+        "engage-section",
+        "support-section",
+      ];
+      for (let section of dropdownSections) {
+        const sectionDiv = shadow.querySelector("." + section);
+        const subheader = sectionDiv.querySelector(".subheader");
+        const dropdownArrow = subheader.querySelector(".icon-right");
+        const sectionContent = sectionDiv.querySelectorAll("a");
+
+        subheader.addEventListener("click", () => {
+          console.log(dropdownArrow.style.transform);
+          if (
+            dropdownArrow.style.transform == "rotate(0deg)" ||
+            dropdownArrow.style.transform == ""
+          ) {
+            dropdownArrow.style.transform = "rotate(90deg)";
+            for (let contentItem of sectionContent) {
+              contentItem.style.display = "block";
+            }
+          } else {
+            dropdownArrow.style.transform = "rotate(0deg)";
+            for (let contentItem of sectionContent) {
+              contentItem.style.display = "none";
+            }
+          }
+        });
+      }
 
-      // Toggle show section for small screens
-      //   for (let subheader in subheaders) {
-      //     subheader.addEventListener("click", () => {
-      //       arrow.classList.remove("fa-angle-right");
-      //       arrow.classList.add("fa-angle-down");
-      //     });
-      //   }
+      //   const learnSection = shadow.querySelector(".learn-section");
+      //   const learnSubheader = learnSection.querySelector(".subheader");
+      //   const dropdownArrow = learnSubheader.querySelector(".icon-right");
+      //   const learnContent = learnSection.querySelectorAll("a");
+      //   learnSubheader.addEventListener("click", () => {
+      //     dropdownArrow.style.transform = "rotate(90deg)";
+      //     for (let contentItem of learnContent) {
+      //       contentItem.style.display = "block";
+      //     }
+      //   });
 
       // Event listeners for all menus
       // --------------------------------------------------------------------------------------------------