Merge pull request #468 from python-discord/content-app-improvements

Dewikification: Content app improvements.

1 files changed, 34 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..c9491f3a
--- /dev/null
+++ b/pydis_site/templates/content/dropdown.html
@@ -0,0 +1,34 @@
+<script>
+    document.addEventListener("DOMContentLoaded", () => {
+        const dropdown = document.querySelector("#dropdown");
+        // Show dropdown menu when clicked
+        dropdown.addEventListener("click", () => {
+            dropdown.classList.toggle("is-active");
+        });
+
+        // Hide dropdown menu when anyhere on the page is clicked
+        document.addEventListener("click", (e) => {
+            if (!dropdown.contains(e.target) && dropdown.classList.contains("is-active")) {
+                dropdown.classList.remove("is-active");
+            }
+        }, false);
+    });
+</script>
+
+<div class="dropdown is-pulled-right is-right" id="dropdown">
+    <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:"name" %}
+                <a href="{{ page.path }}" class="dropdown-item">{{ page.name }}</a>
+            {% endfor %}
+        </div>
+    </div>
+</div>