From 252149899f0f82476999b9d0127c93a75cbe12a5 Mon Sep 17 00:00:00 2001
From: mike-esokia <mike.esokia@gmail.com>
Date: Mon, 28 May 2018 14:20:41 +0400
Subject: [PATCH] convert navigation menu to dropdown on small screen

---
 resources/www/_shared/styles/_main-menu.scss |  45 +++++++
 templates/web/common/menubar.html.twig       | 133 +++++++++++--------
 2 files changed, 120 insertions(+), 58 deletions(-)

diff --git a/resources/www/_shared/styles/_main-menu.scss b/resources/www/_shared/styles/_main-menu.scss
index 64d3ab17ab..0b4b55ee9c 100644
--- a/resources/www/_shared/styles/_main-menu.scss
+++ b/resources/www/_shared/styles/_main-menu.scss
@@ -19,6 +19,18 @@ $mainMenuBottomBorder: none !default;
   margin-bottom: $mainMenuMarginBottom;
   z-index: 100;
   box-sizing: border-box;
+  .show-menu {
+    display: none;
+    i {
+      font-size: 26px;
+      vertical-align: middle;
+      color: $mainMenuLinkActiveColor;
+    }
+    /*Show menu when invisible checkbox is checked*/
+    input[type=checkbox]:checked ~ #nav_menu {
+      display: block;
+    }
+  }
   ol {
     display: block;
     margin: 0;
@@ -96,3 +108,36 @@ $mainMenuBottomBorder: none !default;
     }
   }
 }
+
+@media screen and (max-width: 760px) {
+  #mainMenu {
+    .show-menu {
+      display: block;
+    }
+    #nav_menu {
+      display: none;
+      z-index: 1000;
+      ol {
+        position: static;
+      }
+      li.menu-bar-item {
+        width: 100%;
+        clear: both;
+        background: $mainMenuBackgroundColor;
+        border-bottom: 1px solid $mainMenuLinkActiveColor;
+        z-index: 1000;
+      }
+      li.menu-bar-item a {
+        width: 100%;
+        > span {
+          text-align: center;
+          font-size: 14px;
+          font-weight: bold;
+          &.selected {
+            border-top: none !important;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/templates/web/common/menubar.html.twig b/templates/web/common/menubar.html.twig
index 97831a327f..672c3af509 100644
--- a/templates/web/common/menubar.html.twig
+++ b/templates/web/common/menubar.html.twig
@@ -1,104 +1,109 @@
 <div id="mainMenu" class="">
     {% set configuration = app['conf'].get(['registry', 'custom-links']) %}
-    <div class="PNB menu-bar" style="right:auto;overflow:hidden;">
+    <div class="PNB menu-bar" style="overflow:hidden;">
       <ol>
         <li>
             <span class="title">
               <img src="/assets/common/images/logo.png" alt="" id="mainLogo">
             </span>
         </li>
-        {% if module is defined and module != "lightbox" and app.getAuthenticator().isAuthenticated() %}
-          <li>
-              <a target="_blank" href="{{ path('prod') }}">
+          <li class="show-menu" id="toggle-menu">
+              <i class="fa fa-bars"></i>
+          </li>
+          <ol id="nav_menu">
+              {% if module is defined and module != "lightbox" and app.getAuthenticator().isAuthenticated() %}
+                  <li class="menu-bar-item">
+                      <a target="_blank" href="{{ path('prod') }}">
                 <span class="{% if module is defined and module == "prod" %}selected{% endif %}">
                   {{ 'admin::monitor: production' | trans }}
                 </span>
-              </a>
-          </li>
+                      </a>
+                  </li>
 
-          {% if app['browser'].isNewGeneration and app['conf'].get(['registry', 'modules', 'thesaurus']) == true and app.getAclForUser(app.getAuthenticatedUser()).has_access_to_module('thesaurus') %}
-          <li>
-            <a target="_blank" href="{{ path('thesaurus') }}">
+                  {% if app['browser'].isNewGeneration and app['conf'].get(['registry', 'modules', 'thesaurus']) == true and app.getAclForUser(app.getAuthenticatedUser()).has_access_to_module('thesaurus') %}
+                      <li class="menu-bar-item">
+                          <a target="_blank" href="{{ path('thesaurus') }}">
               <span class="{% if module is defined and module == "thesaurus" %}selected{% endif %}">
               {{ 'admin::monitor: module thesaurus' | trans }}
               </span>
-            </a>
-          </li>
-          {% endif %}
+                          </a>
+                      </li>
+                  {% endif %}
 
 
-          {# MODULE #}
-          {% if app.getAclForUser(app.getAuthenticatedUser()).has_access_to_module('admin') %}
-          <li>
-            <a target="_blank" href="{{ path('admin') }}">
+                  {# MODULE #}
+                  {% if app.getAclForUser(app.getAuthenticatedUser()).has_access_to_module('admin') %}
+                      <li class="menu-bar-item">
+                          <a target="_blank" href="{{ path('admin') }}">
               <span class="{% if module is defined and module == "admin" %}selected{% endif %}">
                 {{ 'admin::monitor: module admin' | trans }}
               </span>
-            </a>
-          </li>
-          {% endif %}
+                          </a>
+                      </li>
+                  {% endif %}
 
-          {# MODULE #}
-          {% if app.getAclForUser(app.getAuthenticatedUser()).has_access_to_module('report') %}
-          <li>
-            <a target="_blank" href="{{ path('report_dashboard') }}">
+                  {# MODULE #}
+                  {% if app.getAclForUser(app.getAuthenticatedUser()).has_access_to_module('report') %}
+                      <li class="menu-bar-item">
+                          <a target="_blank" href="{{ path('report_dashboard') }}">
               <span class="{% if module is defined and module == "report" %}selected{% endif %}">
                 {{ 'admin::monitor: module report' | trans }}
               </span>
-            </a>
-          </li>
-          {% endif %}
+                          </a>
+                      </li>
+                  {% endif %}
 
-          {# MODULE #}
-          <li>
-            <a id="validation_link" target="_blank" href="{{ path('lightbox') }}">
+                  {# MODULE #}
+                  <li class="menu-bar-item">
+                      <a id="validation_link" target="_blank" href="{{ path('lightbox') }}">
               <span>
               {{ 'admin::monitor: module validation' | trans }}
               </span>
-            </a>
-          </li>
+                      </a>
+                  </li>
 
-          {# MODULE #}
-          {% if module is defined and module == "prod" %}
-              {% if app.getAclForUser(app.getAuthenticatedUser()).has_access_to_module('upload') %}
-            <li>
-                {% set link = path('upload_html5_form') %}
+                  {# MODULE #}
+                  {% if module is defined and module == "prod" %}
+                      {% if app.getAclForUser(app.getAuthenticatedUser()).has_access_to_module('upload') %}
+                          <li class="menu-bar-item">
+                              {% set link = path('upload_html5_form') %}
 
-                {% if not app['browser'].supportFileAPI() %}
-                    {% set link = path('upload_flash_form') %}
-                {% endif %}
+                              {% if not app['browser'].supportFileAPI() %}
+                                  {% set link = path('upload_flash_form') %}
+                              {% endif %}
 
-                <a  href="{{ link }}" class="uploader-open-action" title="{{ 'Upload' | trans }}">
+                              <a href="{{ link }}" class="uploader-open-action" title="{{ 'Upload' | trans }}">
                 <span>
                     {{ 'admin::monitor: module upload' | trans }}
                 </span>
-                </a>
-            </li>
-            {% endif %}
-          {% endif %}
+                              </a>
+                          </li>
+                      {% endif %}
+                  {% endif %}
 
-          {# MODULE #}
-          {% if module == "prod" %}
-          <li>
-            <a href="#" class="state-navigation" data-state="publication" >
+                  {# MODULE #}
+                  {% if module == "prod" %}
+                      <li class="menu-bar-item">
+                          <a href="#" class="state-navigation" data-state="publication">
               <span>
                 {{ 'Publications' | trans }}
               </span>
-            </a>
-          </li>
-          {% endif %}
+                          </a>
+                      </li>
+                  {% endif %}
 
-          {% if module is defined and module == "prod" and app.getAclForUser(app.getAuthenticatedUser()).has_right(constant('\\ACL::ORDER_MASTER')) %}
-          <li>
-            <a href="#" class="order-open-action" title="{{ 'Orders manager' | trans }}">
+                  {% if module is defined and module == "prod" and app.getAclForUser(app.getAuthenticatedUser()).has_right(constant('\\ACL::ORDER_MASTER')) %}
+                      <li class="menu-bar-item">
+                          <a href="#" class="order-open-action" title="{{ 'Orders manager' | trans }}">
               <span>
                 {{ 'Commandes' | trans }}
               </span>
-            </a>
-          </li>
-          {% endif %}
+                          </a>
+                      </li>
+                  {% endif %}
 
-        {% endif %}
+              {% endif %}
+          </ol>
       </ol>
 
     </div>
@@ -227,6 +232,18 @@
             }
         }
 
+        $('#toggle-menu').on('click', function (event) {
+            $('#nav_menu').toggle();
+        });
 
+        var windowsize = $(window).width();
+        $(window).resize(function (event) {
+            windowsize = $(window).width();
+            if (windowsize > 760) {
+                if ($('#nav_menu').is(":hidden")) {
+                    $('#nav_menu').show();
+                }
+            }
+        });
     });
 </script>