updates

templates/index.html

@@ -1,14 +1,19 @@
 
 {% extends "default.html" %}
 
+{% block head_includes %}
+
+{% endblock %}
+
 {% block menu_links %}
             <a href="index.html">Home</a>
+            <a id="categories_toggle" href="#">Categories</a>
             <a href="static/about.html">About</a>
 {% endblock %}
 
 {% block content %}
 <div class="container">
-  <div class="row justify-content-around" style="margin-left: auto; margin-right: auto;">
+  <div id="categories_menu" class="row justify-content-around mx-auto" style="visibility: hidden">
     {% for category in categories %}
       <a href="categories/{{ category }}.html" class="mx-2">{{ category }}</a>
     {% endfor %}
@@ -38,3 +43,18 @@
 
 
 {% endblock %}
+
+{% block footer_includes %}
+<script defer>
+  document.getElementById("categories_toggle").onclick = function() {
+    categories_menu_item = document.getElementById("categories_menu")
+    console.log(categories_menu_item.style.visibility)
+    if (categories_menu_item.style.visibility == "hidden") {
+      categories_menu_item.style.visibility = "visible"
+    }
+    else {
+      categories_menu_item.style.visibility = "hidden"
+    }
+  }
+</script>
+{% endblock %}