Fixed incompatibility between navigation.sections and navigation.indexes

Author: squidfunk

Diff for: material/assets/stylesheets/main.55b1b295.min.css

@@ -39,7 +39,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.55b1b295.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.5a8d6a6f.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.3f5d1f46.min.css' | url }}">

Diff for: material/assets/stylesheets/main.55b1b295.min.css.map

@@ -35,7 +35,7 @@
       {% else %}
         {% set index = indexes | first %}
         {% set class = "md-nav__link--active" if index == page %}
-        <div class="md-nav__link md-nav__link--container {{ class }}">
+        <div class="md-nav__link md-nav__link--index {{ class }}">
           <a href="{{ index.url | url }}">{{ nav_item.title }}</a>
           <label for="{{ path }}">
             <span class="md-nav__icon md-icon"></span>

Diff for: material/assets/stylesheets/main.5a8d6a6f.min.css

@@ -96,15 +96,17 @@
 
   // Navigation link
   &__link {
-    display: block;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
     margin-top: 0.625em;
     overflow: hidden;
     text-overflow: ellipsis;
     cursor: pointer;
     transition: color 125ms;
     scroll-snap-align: start;
 
-    // Link in blurred state
+    // Navigation link in blurred state
     &[data-md-state="blur"] {
       color: var(--md-default-fg-color--light);
     }
@@ -114,9 +116,9 @@
       color: var(--md-typeset-a-color);
     }
 
-    // Navigation link in nested list
-    .md-nav__item--nested > & {
-      color: inherit;
+    // Stretch section index link to full width
+    .md-nav__item &--index [href] {
+      width: 100%;
     }
 
     // Navigation link on focus/hover
@@ -131,7 +133,7 @@
       outline-offset: px2rem(4px);
     }
 
-    // Navigation link to table of contents
+    // Navigation link for table of contents
     .md-nav--primary &[for="__toc"] {
       display: none;
 
@@ -149,6 +151,12 @@
         display: none;
       }
     }
+
+    // Navigation link children (for section indexes)
+    > * {
+      display: flex;
+      cursor: pointer;
+    }
   }
 
   // Repository information container
@@ -272,17 +280,6 @@
         padding: 0;
         border-top: px2rem(1px) solid var(--md-default-fg-color--lightest);
 
-        // Navigation link in nested navigation
-        &--nested > .md-nav__link {
-          padding-right: px2rem(48px);
-
-          // Adjust for right-to-left languages
-          [dir="rtl"] & {
-            padding-right: px2rem(16px);
-            padding-left: px2rem(48px);
-          }
-        }
-
         // Navigation link in active navigation
         &--active > .md-nav__link {
           color: var(--md-typeset-a-color);
@@ -297,27 +294,17 @@
 
       // Navigation link
       .md-nav__link {
-        position: relative;
         margin-top: 0;
         padding: px2rem(12px) px2rem(16px);
 
         // Navigation icon
         .md-nav__icon {
-          position: absolute;
-          top: 50%;
-          right: px2rem(12px);
+          flex-shrink: 0;
           width: px2rem(24px);
           height: px2rem(24px);
-          margin-top: px2rem(-12px);
-          color: inherit;
+          margin-right: px2rem(-4px);
           font-size: px2rem(24px);
 
-          // Adjust for right-to-left languages
-          [dir="rtl"] & {
-            right: initial;
-            left: px2rem(12px);
-          }
-
           // Navigation icon in link to next level
           &::after {
             display: block;
@@ -344,11 +331,6 @@
       // Table of contents contained in primary navigation
       .md-nav--secondary {
 
-        // Navigation link - omit unnecessary layering
-        .md-nav__link {
-          position: static;
-        }
-
         // Navigation on level 2-6
         .md-nav {
           position: static;
@@ -442,14 +424,7 @@
 
     // Show link to table of contents
     &--primary &__link[for="__toc"] {
-      display: block;
-      padding-right: px2rem(48px);
-
-      // Adjust for right-to-left languages
-      [dir="rtl"] & {
-        padding-right: px2rem(16px);
-        padding-left: px2rem(48px);
-      }
+      display: flex;
 
       // Show table of contents icon
       .md-icon::after {
@@ -481,15 +456,7 @@
 
     // Show link to integrated table of contents
     &--integrated &__link[for="__toc"] {
-      display: block;
-      padding-right: px2rem(48px);
-      scroll-snap-align: initial;
-
-      // Adjust for right-to-left languages
-      [dir="rtl"] & {
-        padding-right: px2rem(16px);
-        padding-left: px2rem(48px);
-      }
+      display: flex;
 
       // Show table of contents icon
       .md-icon::after {
@@ -570,23 +537,26 @@
         margin-bottom: 0;
       }
 
-      // Hide navigation link, as sections are always expanded
+      // Show navigation link as title
       > .md-nav__link {
-        display: none;
+        font-weight: 700;
+        pointer-events: none;
+
+        // Make navigation link clickable
+        &--index [href] {
+          pointer-events: initial;
+        }
+
+        // Hide naviation icon
+        .md-nav__icon {
+          display: none;
+        }
       }
 
       // Navigation
       > .md-nav {
         display: block;
 
-        // Navigation title
-        > .md-nav__title {
-          display: block;
-          padding: 0;
-          pointer-events: none;
-          scroll-snap-align: start;
-        }
-
         // Adjust spacing on next level item
         > .md-nav__list > .md-nav__item {
           padding: 0;
@@ -630,13 +600,13 @@
     // Modifier for when navigation tabs are rendered
     &--lifted {
 
-      // Hide nested level 0 items and site title
+      // Hide nested level 0 navigation items and site title
       > .md-nav__list > .md-nav__item--nested,
       > .md-nav__title {
         display: none;
       }
 
-      // Hide level 0 items
+      // Hide level 0 navigation items
       > .md-nav__list > .md-nav__item {
         display: none;
 
@@ -645,17 +615,21 @@
           display: block;
           padding: 0;
 
-          // Hide nested links
+          // Show navigation link as title
           > .md-nav__link {
-            display: none;
-          }
-
-          // Show title and adjust spacing
-          > .md-nav > .md-nav__title {
-            display: block;
             padding: 0 px2rem(12px);
+            font-weight: 700;
             pointer-events: none;
-            scroll-snap-align: start;
+
+            // Make navigation link clickable
+            &--index [href] {
+              pointer-events: initial;
+            }
+
+            // Hide naviation icon
+            .md-nav__icon {
+              display: none;
+            }
           }
         }
       }
@@ -665,7 +639,7 @@
       .md-nav[data-md-level="1"] {
         display: block;
 
-        // Adjust spacing for level 1 items
+        // Adjust spacing for level 1 navigation items
         > .md-nav__list > .md-nav__item {
           padding-right: px2rem(12px);
         }

Diff for: material/assets/stylesheets/main.5a8d6a6f.min.css.map

@@ -84,7 +84,7 @@
       {% else %}
         {% set index = indexes | first %}
         {% set class = "md-nav__link--active" if index == page %}
-        <div class="md-nav__link md-nav__link--container {{ class }}">
+        <div class="md-nav__link md-nav__link--index {{ class }}">
           <a href="{{ index.url | url }}">{{ nav_item.title }}</a>
           <label for="{{ path }}">
             <span class="md-nav__icon md-icon"></span>