updates - categories

templates/default.html

@@ -74,10 +74,17 @@
         </div>
     </div>
     <div class="top_menu d-flex justify-content-end" style="margin-bottom: 20px;">
-          {% block menu_links %}
-          {% endblock %}
-
+            <a href="{{ parent_path }}index.html">Home</a>
+            <a id="categories_toggle" href="#">Categories</a>
+            <a href="{{ parent_path }}static/about.html">About</a>
     </div>
+    <div id="categories_container" class="container">
+      <div id="categories_menu" class="row justify-content-around mx-auto" style="visibility: hidden">
+        {% for category in categories %}
+          <a href="{{ parent_path }}categories/{{ category }}.html" class="mx-2">{{ category }}</a>
+        {% endfor %}
+      </div>
+    </div>    
     
     <div id="content">{% block content %}{% endblock %}</div>
 
@@ -92,4 +99,16 @@
       </div>
       <div class="row small text-muted justify-content-end"><p class="mx-4">Page created with <a href="">microgen</a></p></div>
     </div>
-  </body>
+  <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>
+</body>