Introduced more button and menu that appears when tabs overflow

Author: djanelle-mit

app/assets/stylesheets/partials/_source_tabs.scss

@@ -4,13 +4,15 @@
 
 #tabs {
   margin-top: 0;
+  position: relative;
 
   // Graceful degradation when JS is not enabled
   &:not(.has-js) {
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;  
   }
 
+  // Display styles for the main tab bar
   ul.primary {
     list-style-type: none;
     padding: 0;
@@ -19,7 +21,15 @@
     gap: 4px;
   }
 
-  a {
+  li {
+
+    &.--hidden {
+      display: none;
+    }
+
+  }
+
+  a, button {
     padding: 12px 20px 16px;
     background-color: transparent;
     display: inline-block;
@@ -46,7 +56,43 @@
       }
     }
 
+  }
+
+  // Swap the icon to chevron-up when menu is open
+  button[aria-expanded="true"] {
+  
+    i::before {
+      content: '\f077';
+    }
+
+  }
+
+  // Display styles for the dropdown menu under the "More" button
+  ul.-secondary {
+    width: 100%;
+    display: none;
+    position: absolute;
+    top: 100%;
+    right: 0;
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    z-index: 999;
+
+    li {
+      width: 100%;
+
+      a {
+        background-color: $color-gray-950;
+        width: 100%;
+      }
+
+    }
+
+  }
 
+  &.--show-secondary .-secondary {
+    display: block;
   }
 
 }

app/javascript/source_tabs.js

@@ -0,0 +1,79 @@
+const container = document.querySelector('#tabs')
+const primary = container.querySelector('.primary')
+const primaryItems = container.querySelectorAll('.primary > li:not(.-more)')
+container.classList.add('has-js')
+
+// insert "more" button and duplicate the list
+
+primary.insertAdjacentHTML('beforeend', `
+  <li class="-more">
+    <button type="button" aria-haspopup="true" aria-expanded="false">
+      More <i class="fa-light fa-chevron-down"></i>
+    </button>
+    <ul class="-secondary">
+      ${primary.innerHTML}
+    </ul>
+  </li>
+`)
+const secondary = container.querySelector('.-secondary')
+const secondaryItems = secondary.querySelectorAll('li')
+const allItems = container.querySelectorAll('li')
+const moreLi = primary.querySelector('.-more')
+const moreBtn = moreLi.querySelector('button')
+moreBtn.addEventListener('click', (e) => {
+  e.preventDefault()
+  container.classList.toggle('--show-secondary')
+  moreBtn.setAttribute('aria-expanded', container.classList.contains('--show-secondary'))
+})
+
+// adapt tabs
+
+const doAdapt = () => {
+  // reveal all items for the calculation
+  allItems.forEach((item) => {
+    item.classList.remove('--hidden')
+  })
+
+  // hide items that won't fit in the Primary
+  let stopWidth = moreBtn.offsetWidth
+  let hiddenItems = []
+  const primaryWidth = primary.offsetWidth
+  primaryItems.forEach((item, i) => {
+    if(primaryWidth >= stopWidth + item.offsetWidth) {
+      stopWidth += item.offsetWidth
+    } else {
+      item.classList.add('--hidden')
+      hiddenItems.push(i)
+    }
+  })
+  
+  // toggle the visibility of More button and items in Secondary
+  if(!hiddenItems.length) {
+    moreLi.classList.add('--hidden')
+    container.classList.remove('--show-secondary')
+    moreBtn.setAttribute('aria-expanded', false)
+  }
+  else {  
+    secondaryItems.forEach((item, i) => {
+      if(!hiddenItems.includes(i)) {
+        item.classList.add('--hidden')
+      }
+    })
+  }
+}
+
+doAdapt() // adapt immediately on load
+window.addEventListener('resize', doAdapt) // adapt on window resize
+
+// hide Secondary on the outside click
+document.addEventListener('click', (e) => {
+  let el = e.target
+  while(el) {
+    if(el === moreBtn) {
+      return;
+    }
+    el = el.parentNode
+  }
+  container.classList.remove('--show-secondary')
+  moreBtn.setAttribute('aria-expanded', false)
+})