Rewrite menu opening/closing without jQuery

themes/daux/config.json

@@ -1,7 +1,6 @@
 {
     "favicon": "<theme_url>img/favicon.png",
     "js": [
-        "<theme_url>js/jquery-1.11.3.min.js",
         "<theme_url>js/highlight.pack.js",
         "<theme_url>js/daux.js"
     ],

themes/daux/js/daux.js

@@ -93,22 +93,81 @@ if (hljs) {
     setCodeBlockStyle(codeBlockState);
 })();
 
-$(function () {
+(function() {
-    // Tree navigation
+    function debounce(func, wait) {
-    $('.aj-nav').click(function (e) {
+        var timeout;
-        e.preventDefault();
+        return function() {
-        $(this).parent().siblings().find('ul').slideUp();
+            var context = this, args = arguments;
-        $(this).next().slideToggle();
+            var later = function() {
-    });
+                timeout = null;
+            };
 
-    // New Tree navigation
+            clearTimeout(timeout);
-    $('ul.Nav > li.has-children > a > .Nav__arrow').click(function() {
+            timeout = setTimeout(later, wait);
-        $(this).parent().parent().toggleClass('Nav__item--open');
+       };
-        return false;
+    };
-    });
 
-    // Responsive navigation
+    var navItemsWithChildren = document.querySelectorAll('.Nav__item.has-children > a');
-    $('.Collapsible__trigger').click(function () {
+
-        $('.Collapsible__content').slideToggle();
+    function _toggleSubMenu(ev) {
-    });
+        ev.preventDefault();
+
+        var parent = ev.target.parentNode;
+        var subNav = parent.querySelector('ul.Nav');
+
+        if (parent.classList.contains('Nav__item--open')) {
+            subNav.style.height = 0;
+            parent.classList.remove('Nav__item--open');
+        } else {
+            subNav.style.transitionDuration = Math.max(subNav.scrollHeight * 1.5, 150) + 'ms';
+            subNav.style.height = subNav.scrollHeight + 'px';
+            parent.classList.add('Nav__item--open');
+        }
+    }
+
+    // Because font sizes change the height of the menus can change so they must
+    // be recalculated if necessary when the viewport size changes.
+    function _resize() {
+        var subNav = document.querySelector('.Nav .Nav'),
+            height, cur;
+        for (var i = 0; i < subNav.length; i++) {
+            cur = subNav[i];
+            height = parseFloat(cur.style.height, 10);
+            if (height > 0 && cur.scrollHeight !== height) {
+                // Disable the height transition, change it, and
+                // re-establish the transition that's in the stylesheet.
+                cur.style.transitionDuration = 0;
+                cur.style.height = cur.scrollHeight + 'px';
+                cur.style.transitionDuration = Math.max(cur.scrollHeight, 150) + 'ms';
+            }
+        }
+    }
+
+    for (var i = 0; i < navItemsWithChildren.length; i++) {
+        navItemsWithChildren[i].addEventListener('click', _toggleSubMenu);
+    }
+
+    window.addEventListener('resize', debounce(_resize, 150));
+    window.addEventListener('orientationchange', _resize);
+})();
+
+(function() {
+    var trigger = document.querySelector('.Collapsible__trigger');
+
+    if (!trigger) {
+        return;
+    }
+
+    content = document.querySelector('.Collapsible__content');
+
+    trigger.addEventListener('click', function(ev) {
+        if (content.classList.contains('Collapsible__content--open')) {
+            content.style.height = 0;
+            content.classList.remove('Collapsible__content--open');
+        } else {
+            content.style.transitionDuration = Math.max(content.scrollHeight, 150) + 'ms';
+            content.style.height = content.scrollHeight + 'px';
+            content.classList.add('Collapsible__content--open');
+        }
     });
+})();

themes/daux/scss/_components.scss

@@ -41,6 +41,7 @@ Components
     border: 1px solid transparent;
     white-space: nowrap;
     border-radius: 4px;
+    margin-bottom: 0;
 
     &--small {
         font-size: 12px;
@@ -155,6 +156,11 @@ Components
         width: 16px;
         margin-left: -16px;
 
+        // Prevent arrow from being the target in its container's event listener.
+        &, &::before {
+            pointer-events: none;
+        }
+
         &:before {
             position: absolute;
             display: block;
@@ -193,7 +199,9 @@ Components
 }
 
 .Nav .Nav {
-    display: none;
+    height: 0;
+    transition: height 400ms ease-in-out;
+    overflow: hidden;
     margin-left: 15px;
 
     .Nav__item a {
@@ -223,10 +231,6 @@ Components
     }
 
     &--open {
-        > .Nav {
-            display: block;
-        }
-
         > a > .Nav__arrow:before {
             margin-left: -0.25em;
             transform: rotate(135deg);
@@ -284,7 +288,7 @@ Components
 }
 
 .PoweredBy {
-    padding: 0 20px;
+    padding: 0 20px 1rem 20px;
     font-size: var(--type-size-6);
 }
 
@@ -509,10 +513,6 @@ ul.TableOfContents {
     }
 }
 
-.Collapsible__content {
-    padding-bottom: 1rem;
-}
-
 .Hidden {
     display: none;
 }

themes/daux/scss/_structure.scss

@@ -41,9 +41,13 @@ body {
     }
 }
 
+@media (max-width: 768px) {
     // mobile friendly sub-nav
     .Collapsible__content {
-    display: none;
+        height: 0;
+        overflow: hidden;
+        transition: height 400ms ease-in-out;
+    }
 }
 
 .Collapsible__trigger {