Fixed rendering bugs for pruned navigation items

material/base.html

@@ -44,7 +44,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.80601de9.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.92d4c850.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.ecc896b0.min.css' | url }}">

material/partials/nav-item.html

@@ -15,7 +15,7 @@
     {% include ".icons/" ~ nav_item.meta.icon ~ ".svg" %}
   {% endif %}
   <span class="md-ellipsis">
-    {{ nav_item.title }}
+    {{ ref.title }}
   </span>
   {% if nav_item.is_page and nav_item.meta.status %}
     {{ render_status(nav_item, nav_item.meta.status) }}
@@ -27,8 +27,8 @@
     {{ render_pruned(first, ref) }}
   {% else %}
     <a href="{{ first.url | url }}" class="md-nav__link">
-      {{ render_content(first, ref) }}
+      {{ render_content(ref) }}
-      {% if nav_item.children | length > 1 %}
+      {% if nav_item.children | length > 0 %}
         <span class="md-nav__icon md-icon"></span>
       {% endif %}
     </a>

src/assets/stylesheets/main/components/_nav.scss

@@ -119,11 +119,11 @@
       // and the element will become unclickable. Setting `position: relative`
       // seems to fix the issue - see https://bit.ly/3HljM1T
       position: relative;
+    }
 
-      // Always align navigation icons to the right
+    // Always align navigation icons to the right
-      + .md-icon {
+    .md-icon:last-child {
-        margin-left: auto;
+      margin-left: auto;
-      }
     }
 
     // Navigation link icon

src/partials/nav-item.html

@@ -48,7 +48,7 @@
 
   <!-- Navigation link title -->
   <span class="md-ellipsis">
-    {{ nav_item.title }}
+    {{ ref.title }}
   </span>
 
   <!-- Navigation link status -->
@@ -68,10 +68,10 @@
   <!-- Navigation link -->
   {% else %}
     <a href="{{ first.url | url }}" class="md-nav__link">
-      {{ render_content(first, ref) }}
+      {{ render_content(ref) }}
 
-      <!-- Only render toggle if there's at least one more page -->
+      <!-- Only render toggle if there's at least one nested item -->
-      {% if nav_item.children | length > 1 %}
+      {% if nav_item.children | length > 0 %}
         <span class="md-nav__icon md-icon"></span>
       {% endif %}
     </a>