Merge pull request #105 from imsdev/103-responsive-navigation-dropdown

103 responsive navigation dropdown

Author: hmillersarah

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

@@ -32,12 +32,14 @@ a h5 {
 }
 
 form {
+  width: 100%;
   height: 3em;
   background-color: white;
   display: flex;
 }
 
 form div {
+  width: 100%;
   background-color: white;
   display: flex;
   flex-flow: row nowrap;
@@ -201,6 +203,41 @@ input {
   border-radius: 5px;
 }
 
+.subheader {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  gap: 0.75em;
+}
+
+.icon-right {
+  display: none !important;
+  transform: rotate(0deg);
+}
+
+.icon-right:hover {
+  color: #71a3e9;
+}
+
+/* 768px and below screen sizes */
+@media screen and (max-width: 48em) {
+  .dropdown-menu {
+    width: 100%;
+  }
+
+  .menu {
+    grid-template-columns: 1fr;
+  }
+
+  .menu div a {
+    display: none;
+  }
+
+  .icon-right {
+    display: block !important;
+  }
+}
+
 .external-link {
   height: 1em;
   width: 1em;
@@ -289,7 +326,6 @@ input {
 
   form {
     width: 100%;
-    padding-right: 0.2em;
   }
 
   form div {

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

@@ -66,8 +66,15 @@ <h4 class="site-header" style="display: block">
 
     <section class="dropdown-menu">
       <div class="menu">
-        <div>
-          <h3>Learn</h3>
+        <div class="learn-section">
+          <span class="subheader">
+            <i
+              class="fa fa-angle-right icon-right"
+              tabindex="0"
+              style="font-size: 24px"
+            ></i>
+            <h3>Learn</h3>
+          </span>
           <a href="ims-videos.html" tabindex="-1">
             <h5>Videos</h5>
             <p>
@@ -106,8 +113,15 @@ <h5>
             <p>Learn about the latest IMS features and offerings.</p>
           </a>
         </div>
-        <div>
-          <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>
@@ -135,8 +149,15 @@ <h5>IMS Transaction Manager</h5>
             <p>IMS Transaction Manager: fast, secure, connected.</p>
           </a>
         </div>
-        <div>
-          <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>
@@ -194,8 +215,15 @@ <h5>
             <p>A place to connect with other IMS developers.</p>
           </a>
         </div>
-        <div>
-          <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

@@ -40,6 +40,7 @@ function createComponent(html) {
       const menuItems = dropdownMenu.querySelectorAll("a");
       const documentationMenuItem = menuItems[menuItems.length - 2];
       const supportMenuItem = menuItems[menuItems.length - 1];
+
       // Search
       const searchForm = shadow.getElementById("search-form");
       const searchInput = shadow.getElementById("search-input");
@@ -70,6 +71,59 @@ function createComponent(html) {
         }
       });
 
+      // 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", () => {
+          if (
+            dropdownArrow.style.transform == "rotate(0deg)" ||
+            dropdownArrow.style.transform == ""
+          ) {
+            toggleSectionDropdown(
+              dropdownArrow,
+              "rotate(90deg)",
+              sectionContent,
+              "block"
+            );
+          } else {
+            toggleSectionDropdown(
+              dropdownArrow,
+              "rotate(0deg)",
+              sectionContent,
+              "none"
+            );
+          }
+        });
+
+        window.addEventListener("resize", () => {
+          if (window.innerWidth > 768) {
+            toggleSectionDropdown(
+              dropdownArrow,
+              "rotate(0deg)",
+              sectionContent,
+              "block"
+            );
+          } else {
+            toggleSectionDropdown(
+              dropdownArrow,
+              "rotate(0deg)",
+              sectionContent,
+              "none"
+            );
+          }
+        });
+      }
+
       // Event listeners for all menus
       // --------------------------------------------------------------------------------------------------
       // Hide dropdowns when user clicks outside of search results or nav menu
@@ -82,7 +136,6 @@ function createComponent(html) {
 
       // Event listeners for search
       // --------------------------------------------------------------------------------------------------
-
       // Toggle open search bar (small screens)
       searchIcon.addEventListener("click", () => {
         if (window.innerWidth <= 1023) {
@@ -161,6 +214,14 @@ function createComponent(html) {
 
       // Helper functions
       // --------------------------------------------------------------------------------------------------
+      //   Toggle dropdown sections for small screens in dropdown nav menu
+      function toggleSectionDropdown(arrow, deg, section, displayState) {
+        arrow.style.transform = deg;
+        for (let contentItem of section) {
+          contentItem.style.display = displayState;
+        }
+      }
+
       // Toggle dropdown navigation menu
       function toggleMenu() {
         dropdownMenu.classList.toggle("show-menu");
@@ -205,7 +266,7 @@ function createComponent(html) {
         desc.classList.toggle("search_content_drop");
       }
 
-      // Open search bar
+      // Open search bar (small screens)
       function openSearchBar() {
         siteHeader.style.display = "none";
         searchInput.style.display = "block";
@@ -214,6 +275,7 @@ function createComponent(html) {
         searchBar.classList.add("search-bar-open");
       }
 
+      // Close search bar (small screens)
       function closeSearchBar(headerState, inputState) {
         siteHeader.style.display = headerState;
         searchInput.style.display = inputState;