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.

1 files changed, 28 insertions, 0 deletions

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>