New pill in user doc

docs/css/custom.css

@@ -605,3 +605,7 @@ div.path {
 .path p.description {
     color: var(--ibexa-dusk-black);
 }
+
+[hidden] {
+    display: none !important;
+}

docs/css/navigation.css

@@ -133,6 +133,13 @@
     padding-bottom: 0.5rem;
 }
 
+.md-nav__link .pill.new {
+    margin-right: 15px;
+    background-color: #d9e8ff;
+    color: #3562a0;
+    text-transform: lowercase;
+}
+
 .md-nav__link::after {
     font-weight: 700;
 }

docs/ibexa_engage/ibexa_engage.md

@@ -1,5 +1,6 @@
 ---
 description: Ibexa Engage helps engage audiences and collect valuable data by using interactive content.
+month_change: true
 ---
 
 # Ibexa Engage

docs/js/custom.js

@@ -156,4 +156,7 @@ $(document).ready(function() {
             document.location.hash = event.target.hash;
         }, 500);
     });
+
+    // Mark higher-level nodes with "New" pill, not only the actual item
+    $(".pill.new:not([hidden])").parents(".md-nav__item").children('label').children(".pill.new[hidden]").removeAttr('hidden');
 });

theme/partials/nav-item.html

@@ -7,7 +7,7 @@
     {% set checked = "checked" if nav_item.active %}
     <input class="md-nav__toggle md-toggle" data-md-toggle="{{ path }}" type="checkbox" id="{{ path }}" {{ checked }}>
     <label class="md-nav__link level-{{ level }}" for="{{ path }}">
-      {{ nav_item.title }}
+      {{ nav_item.title }} <span class="pill new" hidden>New</span>
     </label>
     <nav class="md-nav" aria-label="{{ nav_item.title }}" data-md-level="{{ level }}">
       <label class="md-nav__link-title md-nav__link level-{{ level }}" for="{{ path }}">
@@ -16,7 +16,7 @@
       <ul class="md-nav__list" data-md-scrollfix>
         {% set base = path %}
         {% for nav_item in nav_item.children %}
-          {% set path = base ~ "-" ~ loop.index %}
+          {% set path = base ~ "-" ~ loop.index %}
           {% set level = level + 1 %}
           {% include "partials/nav-item.html"  %}
         {% endfor %}
@@ -37,6 +37,7 @@
     {% endif %}
     <a href="{{ nav_item.url | url }}" class="md-nav__link level-{{ level }} md-nav__link--active">
       {{ nav_item.title }}
+      {% if nav_item.meta.month_change %}<span class="pill new">New</span>{% endif %}
     </a>
     {% if toc | first is defined %}
       {% include "partials/toc.html" %}
@@ -46,6 +47,7 @@
   <li class="{{ class }}">
     <a href="{{ nav_item.url | url }}" class="md-nav__link level-{{ level }}">
       {{ nav_item.title }}
+      {% if nav_item.meta.month_change %}<span class="pill new">New</span>{% endif %}
     </a>
   </li>
 {% endif %}