Improved tabbing behavior in tabs mode

material/base.html

@@ -46,7 +46,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application.4b085d0e.css">
+      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application.46d65e19.css">
       {% if palette.primary or palette.accent %}
         <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-palette.792431c1.css">
       {% endif %}
@@ -167,7 +167,7 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ base_url }}/assets/javascripts/application.98974103.js"></script>
+      <script src="{{ base_url }}/assets/javascripts/application.d5140e78.js"></script>
       {% if lang.t("search.language") != "en" %}
         {% set languages = lang.t("search.language").split(",") %}
         {% if languages | length and languages[0] != "" %}

src/assets/javascripts/application.js

@@ -304,7 +304,8 @@ function initialize(config) { // eslint-disable-line func-style
       const labels = document.querySelectorAll(
         "[data-md-component=navigation] .md-nav__link[for]:not([tabindex])")
       Array.prototype.forEach.call(labels, label => {
-        label.tabIndex = 0
+        if (label.offsetHeight)
+          label.tabIndex = 0
       })
     }
   }).listen()

src/assets/stylesheets/layout/_tabs.scss

@@ -108,6 +108,7 @@
     // font-size to zero, as we need to preserve bottom padding
     ~ .md-main .md-nav--primary > .md-nav__list > .md-nav__item--nested {
       font-size: 0;
+      visibility: hidden;
     }
 
     // We're on the 2nd+ level
@@ -116,6 +117,17 @@
       // Adjust 1st level styles
       .md-nav--primary {
 
+        // // Hide titles for nested navigation
+        // &__item--nested > .md-nav > &__title {
+        //   display: none;
+        // }
+
+        // Show title and remove spacing
+        .md-nav__title {
+          display: block;
+          padding: 0;
+        }
+
         // Hide site title
         .md-nav__title--site {
           display: none;
@@ -124,23 +136,18 @@
         // Hide 1st level normal items
         & > .md-nav__list > .md-nav__item {
           font-size: 0;
+          visibility: hidden;
 
           // Reset font-size for nested items and induce margin collapse
           &--nested {
             display: none;
             font-size: 1.4rem;
             overflow: auto;
+            visibility: visible;
 
-            // Render link same as main navigation title
+            // Hide nested links
             > .md-nav__link {
-              margin-top: 0;
-              font-weight: 700;
-              pointer-events: none;
-
-              // Hide icon for expansion
-              &::after {
-                display: none;
-              }
+              display: none;
             }
           }
 
@@ -160,6 +167,11 @@
         > .md-nav__list > .md-nav__item {
           padding-left: 0;
         }
+
+        // Hide titles from 2nd level on
+        .md-nav .md-nav__title {
+          display: none;
+        }
       }
     }
   }