Fixed blog sidebar navigation

material/templates/base.html

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

material/templates/blog-post.html

@@ -8,7 +8,7 @@
     <div class="md-sidebar md-sidebar--post" data-md-component="sidebar" data-md-type="navigation">
       <div class="md-sidebar__scrollwrap">
         <div class="md-sidebar__inner md-post">
-          <nav class="md-nav">
+          <nav class="md-nav md-nav--primary">
             <div class="md-post__back">
               <div class="md-nav__title md-nav__container">
                 <a href="{{ page.parent.url | url }}" class="md-nav__link">
@@ -35,13 +35,14 @@
               </div>
             {% endif %}
             <ul class="md-post__meta md-nav__list">
-              <li class="md-nav__item md-nav__title">
+              <li class="md-nav__item md-nav__item--section">
-                <div class="md-nav__link">
+                <div class="md-post__title">
                   <span class="md-ellipsis">
                     {{ lang.t("blog.meta") }}
                   </span>
                 </div>
-              </li>
+                <nav class="md-nav">
+                  <ul class="md-nav__list">
                     <li class="md-nav__item">
                       <div class="md-nav__link">
                         {% include ".icons/material/calendar.svg" %}
@@ -93,6 +94,9 @@
                     {% endif %}
                   </ul>
                 </nav>
+              </li>
+            </ul>
+          </nav>
           {% if "toc.integrate" in features %}
             {% include "partials/toc.html" %}
           {% endif %}

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

@@ -125,7 +125,7 @@
     }
 
     // Navigation link on focus/hover
-    &:not(.md-nav__container):is(:focus, :hover) {
+    @at-root :is(a#{&}, label#{&}):is(:focus, :hover) {
       color: var(--md-accent-fg-color);
       cursor: pointer;
     }

src/templates/assets/stylesheets/main/components/_post.scss

@@ -53,7 +53,7 @@
     display: flex;
     flex-direction: column;
     gap: px2rem(12px);
-    margin: 0 px2rem(12px);
+    margin: 0 px2rem(12px) px2rem(24px);
   }
 
   // Post metadata
@@ -70,6 +70,12 @@
     }
   }
 
+  // Post navigation title @todo - generalize
+  &__title {
+    font-weight: 700;
+    color: var(--md-default-fg-color--light);
+  }
+
   // Post excerpt
   &--excerpt {
     margin-bottom: px2rem(64px);
@@ -104,12 +110,6 @@
       margin-top: 0;
     }
   }
-
-  // Adjust spacing for navigation
-  > .md-nav:first-child > .md-nav__list,
-  > .md-nav--secondary {
-    margin: 1em 0;
-  }
 }
 
 // ----------------------------------------------------------------------------

src/templates/blog-post.html

@@ -36,7 +36,7 @@
     >
       <div class="md-sidebar__scrollwrap">
         <div class="md-sidebar__inner md-post">
-          <nav class="md-nav">
+          <nav class="md-nav md-nav--primary">
 
             <!-- Back to overview link -->
             <div class="md-post__back">
@@ -50,7 +50,7 @@
               </div>
             </div>
 
-            <!-- Page authors -->
+            <!-- Post authors -->
             {% if page.authors %}
               <div class="md-post__authors md-typeset">
                 {% for author in page.authors %}
@@ -67,39 +67,46 @@
               </div>
             {% endif %}
 
-            <!-- Page metadata -->
+            <!-- Post metadata -->
             <ul class="md-post__meta md-nav__list">
-              <li class="md-nav__item md-nav__title">
+              <li class="md-nav__item md-nav__item--section">
-                <div class="md-nav__link">
+                <div class="md-post__title">
                   <span class="md-ellipsis">
                     {{ lang.t("blog.meta") }}
                   </span>
                 </div>
-              </li>
+                <nav class="md-nav">
+                  <ul class="md-nav__list">
 
-              <!-- Page date -->
+                    <!-- Post date -->
                     <li class="md-nav__item">
                       <div class="md-nav__link">
                         {% include ".icons/material/calendar.svg" %}
-                  <time datetime="{{ page.config.date.created }}" class="md-ellipsis">
+                        <time
+                          datetime="{{ page.config.date.created }}"
+                          class="md-ellipsis"
+                        >
                           {{- page.config.date.created | date -}}
                         </time>
                       </div>
                     </li>
 
-              <!-- Page date updated -->
+                    <!-- Post date updated -->
                     {% if page.config.date.updated %}
                       <li class="md-nav__item">
                         <div class="md-nav__link">
                           {% include ".icons/material/calendar-clock.svg" %}
-                    <time datetime="{{ page.config.date.updated }}" class="md-ellipsis">
+                          <time
+                            datetime="{{ page.config.date.updated }}"
+                            class="md-ellipsis"
+                          >
                             {{- page.config.date.updated | date -}}
                           </time>
                         </div>
                       </li>
                     {% endif %}
 
-              <!-- Page categories -->
+                    <!-- Post categories -->
                     {% if page.categories %}
                       <li class="md-nav__item">
                         <div class="md-nav__link">
@@ -117,7 +124,7 @@
                       </li>
                     {% endif %}
 
-              <!-- Page readtime -->
+                    <!-- Post readtime -->
                     {% if page.config.readtime %}
                       {% set time = page.config.readtime %}
                       <li class="md-nav__item">
@@ -135,6 +142,9 @@
                     {% endif %}
                   </ul>
                 </nav>
+              </li>
+            </ul>
+          </nav>
 
           <!-- Table of contents, if integrated -->
           {% if "toc.integrate" in features %}