From 73141c549dc20710651dc62958d90f819107cc47 Mon Sep 17 00:00:00 2001
From: shagi <shagi@gisa-elkartea.org>
Date: Tue, 11 May 2021 19:11:07 +0200
Subject: [PATCH] Enhance sidebar menu

---
 gas/static/gas/css/gas.css             | 22 +++++++++++++++++-----
 gas/static/gas/js/gas.js               | 21 +++++++++++++++++++++
 gas/templates/gas/base.html            |  6 +++++-
 gas/templates/gas/tags/navigation.html | 15 ++++++++++-----
 4 files changed, 53 insertions(+), 11 deletions(-)

diff --git a/gas/static/gas/css/gas.css b/gas/static/gas/css/gas.css
index 8139682..6371124 100644
--- a/gas/static/gas/css/gas.css
+++ b/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;
diff --git a/gas/static/gas/js/gas.js b/gas/static/gas/js/gas.js
index 4c67f1a..1e34ae9 100644
--- a/gas/static/gas/js/gas.js
+++ b/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);
+                }
+            });
+        }
     }
 }
 
diff --git a/gas/templates/gas/base.html b/gas/templates/gas/base.html
index 34a5e9f..bf00755 100644
--- a/gas/templates/gas/base.html
+++ b/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 %}
diff --git a/gas/templates/gas/tags/navigation.html b/gas/templates/gas/tags/navigation.html
index 24941db..974438c 100644
--- a/gas/templates/gas/tags/navigation.html
+++ b/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 %}