Add a dropdown menu listing direct children.

This only shows when the page is also a category, since regular pages
have no children and regular categories already list their children.

2 files changed, 33 insertions, 0 deletions

diff --git a/pydis_site/templates/content/base.html b/pydis_site/templates/content/base.html
index 19eec5d4..21895479 100644
--- a/pydis_site/templates/content/base.html
+++ b/pydis_site/templates/content/base.html
@@ -14,6 +14,7 @@
 
     <section class="breadcrumb-section section">
         <div class="container">
+            {# Article breadcrumb #}
             <nav class="breadcrumb is-pulled-left" aria-label="breadcrumbs">
                 <ul>
                     {% for item in breadcrumb_items %}
@@ -22,6 +23,10 @@
                     <li class="is-active"><a href="#">{{ page_title }}</a></li>
                 </ul>
             </nav>
+            {# Sub-Article dropdown for category pages #}
+            {% if subarticles %}
+                {% include "content/dropdown.html" %}
+            {% endif %}
         </div>
     </section>
 
diff --git a/pydis_site/templates/content/dropdown.html b/pydis_site/templates/content/dropdown.html
new file mode 100644
index 00000000..711be113
--- /dev/null
+++ b/pydis_site/templates/content/dropdown.html
@@ -0,0 +1,28 @@
+{% load str_methods %}
+
+<script>
+    document.addEventListener("DOMContentLoaded", () => {
+        const dropdown = document.querySelector(".dropdown");
+        dropdown.addEventListener("click", () => {
+            dropdown.classList.toggle("is-active");
+        })
+    });
+</script>
+
+<div class="dropdown is-pulled-right is-right">
+    <div class="dropdown-trigger">
+        <a aria-haspopup="true" aria-controls="subarticle-menu">
+            <span>Sub-Articles</span>
+            <span class="icon is-small">
+                <i class="fas fa-angle-down" aria-hidden="true"></i>
+            </span>
+        </a>
+    </div>
+    <div class="dropdown-menu" id="subarticle-menu" role="menu">
+        <div class="dropdown-content">
+            {% for page in subarticles|dictsort:0 %}
+                <a href="{{page}}" class="dropdown-item">{{ page.title|replace_hyphens:" " }}</a>
+            {% endfor %}
+        </div>
+    </div>
+</div>