Enhance sidebar menu

gas/static/gas/css/gas.css

@@ -7,6 +7,11 @@
     --info: #99f;
 }
 
+#logo {
+  width: 100px;
+  height: auto;
+}
+
 table {
     border-collapse: collapse;
     border: 1px solid gray;
@@ -74,11 +79,6 @@ a, a:visited {
     content: '';
 }
 
-#logo {
-  width: 100px;
-  height: auto;
-}
-
 #content {
     flex: 4;
 }
@@ -97,6 +97,18 @@ a, a:visited {
     background-color: #fafafa;
 }
 
+#sidebar ul ul {
+    display: none;
+}
+
+#sidebar ul li.dropdown {
+    cursor: pointer;
+}
+
+#sidebar ul li.dropdown.open > ul {
+ display:block;
+}
+
 ul.actions {
     list-style-type: none;
     padding: 0;

gas/static/gas/js/gas.js

@@ -1,4 +1,8 @@
 var GAS = {
+    config: {
+        'menuItemSelector': '.dropdown',
+        'openedMenuItemClass': 'open',
+    },
     init: function() {
         $(document).ready(function(){
             $('.select2').select2({
@@ -10,6 +14,10 @@ var GAS = {
                 let $message = $(this).parents('.message');
                 $message.remove();
             });
+            GAS.toggle(
+                GAS.config.menuItemSelector,
+                GAS.config.openedMenuItemClass,
+            );
         });
 
         var csrftoken = GAS.getCookie('csrftoken');
@@ -67,6 +75,19 @@ var GAS = {
             }
         }
         return cookieValue;
+    },
+
+    toggle: function(selector, cssclass) {
+        const items = document.querySelectorAll(selector);
+        for (const item of items) {
+            item.addEventListener('click', function(ev) {
+                if (item.classList.contains(cssclass)) {
+                    item.classList.remove(cssclass);
+                } else {
+                    item.classList.add(cssclass);
+                }
+            });
+        }
     }
 }
 

gas/templates/gas/base.html

@@ -80,7 +80,11 @@
                         <ul class="actions">
                             {% for target_url, icon, label in actions %}
                                 {% if icon %}
-                                    <li><a href="{{ target_url }}"><i class="fas {{ icon }}" title="{{ label }}"></i></a></li>
+                                    {% if icon|slice:":2" == "fa" %}
+                                        <li><a href="{{ target_url }}"><i class="fas {{ icon }}" title="{{ label }}"></i></a></li>
+                                    {% else %}
+                                        <li><a href="{{ target_url }}" class="{{ icon }}">{{ label }}</a></li>
+                                    {% endif %}
                                 {% else %}
                                     <li><a href="{{ target_url }}">{{ label }}</a></li>
                                 {% endif %}

gas/templates/gas/tags/navigation.html

@@ -1,18 +1,23 @@
+{% load i18n %}
 {% load gas_tags %}
-
+{% if not is_submenu %}
+    <li class="nav-item">
+      <a class="nav-link" href="{% url "gas:index" %}">{% trans "Home" %}</a>
+    </li>
+{% endif %}
 {% for entry in menu %}
-    <li>
+{% with children=entry|get_children:user_roles %}
+    <li class="nav-item{% if children %} dropdown{% endif %}{% if entry.icon %} icon-{{ entry.icon }}{% endif %}">
         {% if entry.url %}
             <a href="{% url entry.url %}">{{ entry.label }}</a>
         {% else %}
             {{ entry.label }}
         {% endif %}
-        {% with children=entry|get_children:user_roles %}
         {% if children %}
             <ul>
-                {% include "gas/tags/navigation.html" with menu=children %}
+                {% include "gas/tags/navigation.html" with menu=children is_submenu=True %}
             </ul>
         {% endif %}
-        {% endwith %}
     </li>
+{% endwith %}
 {% endfor %}