UI: work on responsive menu

3 files changed, 17 insertions, 40 deletions

diff --git a/ishtar_common/menus.py b/ishtar_common/menus.py
index c3d54a30c..3741c6cac 100644
--- a/ishtar_common/menus.py
+++ b/ishtar_common/menus.py
@@ -152,7 +152,7 @@ class Menu:
             if selected_section:
                 self.current_subsections = subsections
             if not section_url:
-                section_url = "#"
+                section_url = "/"
             self.current_sections.append([section.label, section_url,
                                           bool(subsections)])
 
diff --git a/ishtar_common/templates/actions.html b/ishtar_common/templates/actions.html
index a42581049..bd70ddf15 100644
--- a/ishtar_common/templates/actions.html
+++ b/ishtar_common/templates/actions.html
@@ -1,11 +1,11 @@
-<ul class="navbar-nav action-menu">
+<ul class="navbar-nav action-menu justify-content-start">
     {% with MENU.current_section as section_label %}
     {% with MENU.current_sections as sections %}
     {% include "blocks/action_list.html" %}
     {% endwith %}{% endwith %}
 
     {% if MENU.current_subsections %}
-    <li class="nav-item">
+    <li class="nav-item d-none d-lg-block">
         <span class="nav-link">&gt;</span>
     </li>
     {% with MENU.current_subsection as section_label %}
@@ -15,7 +15,7 @@
     {% endif %}
 
     {% if MENU.current_subsubsections %}
-    <li class="nav-item">
+    <li class="nav-item d-none d-lg-block">
         <span class="nav-link">&gt;</span>
     </li>
     {% with MENU.current_subsubsection as section_label %}
@@ -24,30 +24,3 @@
     {% endwith %}{% endwith %}
     {% endif %}
 </ul>
-{% comment %}
-<div id="main_menu">
-    <ul>
-        {% for section in MENU.childs %}
-        {% if section.available %}
-        <li id='section-{{section.idx}}'{% if section.css %} class="{{section.css}}"{% endif %}>
-            {{section.label}}
-            <ul>
-                {% for menu_item in section.childs %}{%if menu_item.available%}
-                {% if menu_item.childs %}<li id='subsection-{{menu_item.idx}}'{% if menu_item.css %} class="{{menu_item.css}}"{% endif %}>{{menu_item.label}}
-                <ul>
-                    {% for menu_subitem in menu_item.childs %}{% if menu_subitem.available %}
-                    {% url 'action' menu_subitem.idx as item_url %}
-                    <li id='{{menu_subitem.idx}}'{% if item_url in CURRENT_PATH %} class='selected'{% endif %}><a
-                            href='{{item_url}}'>{{menu_subitem.label}}</a></li>
-                    {%endif%}{% endfor %}</ul></li>
-                {% else %}
-                {% url 'action' menu_item.idx as item_url %}
-                <li id='{{menu_item.idx}}'
-                    class="{% if item_url in CURRENT_PATH %}selected{% endif %} {% if menu_item.css %}{{menu_item.css}}{% endif %}"><a href="{{item_url}}">{{menu_item.label}}</a></li>
-                {%endif%}{% endif %}{% endfor %}
-            </ul>
-        </li>{%endif%}
-        {% endfor %}
-    </ul>
-</div>
-{% endcomment %}
diff --git a/ishtar_common/templates/navbar.html b/ishtar_common/templates/navbar.html
index 228f18530..0f6036a6c 100644
--- a/ishtar_common/templates/navbar.html
+++ b/ishtar_common/templates/navbar.html
@@ -1,15 +1,18 @@
 {% load i18n %}
 <header class="navbar navbar-expand-lg navbar-dark bg-dark">
     {% block header %}
-    <nav class="navbar">
-        <a class="navbar-brand" href="/">
-            <img src="{{STATIC_URL}}media/images/ishtar-blason.svg"
-                 width="30" height="30" alt="">
-        </a>
-    </nav>
-    <div class="collapse navbar-collapse">
-        {% include "actions.html" %}
-    </div>
+    <a class="navbar-brand" href="/">
+        <img src="{{STATIC_URL}}media/images/ishtar-blason.svg"
+             width="30" height="30" alt="">
+    </a>
+    {% include "actions.html" %}
+    <button class="navbar-toggler" type="button"
+            data-toggle="collapse" data-target="#navbar-actions"
+            aria-controls="navbar-actions" aria-expanded="false"
+            aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse justify-content-end" id="navbar-actions">
     <ul class="navbar-nav">
         {% if APP_NAME %}
         <li class="nav-item">
@@ -51,5 +54,6 @@
         </li>
         {% endif %}
     </ul>
+    </div>
     {% endblock %}
 </header>