feat(controls): styled custom header dropdown with helptext and smart positioning (#13)

public/scripts/index.js

@@ -1,4 +1,40 @@
 document.addEventListener('DOMContentLoaded', () => {
+  // Header dropdowns
+  const controls = document.querySelectorAll('.header__controls_group')
+
+  controls.forEach((control) => {
+    const ref = control.querySelector('.header__controls_label')
+    const dropdownRef = control.querySelector('.header__controls_dropdown')
+
+    let popper = null
+
+    hoverintent(control, null, () => {
+      if (popper) {
+        dropdownRef.classList.remove('header__controls_dropdown--active')
+        window.setTimeout(popper.destroy, 500)
+      }
+    }).options({
+      sensitivity: 10,
+      interval: 150,
+      timeout: 300
+    })
+
+    ref.addEventListener('click', (e) => {
+      dropdownRef.classList.add('header__controls_dropdown--active')
+      popper = new Popper(
+        e.target,
+        dropdownRef,
+        {
+            // popper options here
+        }
+      )
+    })
+  })
+  // const apiRef =
+  // const apiDropdownRef = document.querySelector('#control-api .header__controls_dropdown')
+
+  // const apiTooltip =
+
   // Init highlight.js
   hljs.initHighlightingOnLoad()