convert navigation menu to dropdown on small screen

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;
+          }
+        }
+      }
+    }
+  }
+}

templates/web/common/menubar.html.twig

@@ -1,14 +1,18 @@
 <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>
+          <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>
+                  <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 }}
@@ -17,7 +21,7 @@
                   </li>
 
                   {% if app['browser'].isNewGeneration and app['conf'].get(['registry', 'modules', 'thesaurus']) == true and app.getAclForUser(app.getAuthenticatedUser()).has_access_to_module('thesaurus') %}
-          <li>
+                      <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 }}
@@ -29,7 +33,7 @@
 
                   {# MODULE #}
                   {% if app.getAclForUser(app.getAuthenticatedUser()).has_access_to_module('admin') %}
-          <li>
+                      <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 }}
@@ -40,7 +44,7 @@
 
                   {# MODULE #}
                   {% if app.getAclForUser(app.getAuthenticatedUser()).has_access_to_module('report') %}
-          <li>
+                      <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 }}
@@ -50,7 +54,7 @@
                   {% endif %}
 
                   {# MODULE #}
-          <li>
+                  <li class="menu-bar-item">
                       <a id="validation_link" target="_blank" href="{{ path('lightbox') }}">
               <span>
               {{ 'admin::monitor: module validation' | trans }}
@@ -61,7 +65,7 @@
                   {# MODULE #}
                   {% if module is defined and module == "prod" %}
                       {% if app.getAclForUser(app.getAuthenticatedUser()).has_access_to_module('upload') %}
-            <li>
+                          <li class="menu-bar-item">
                               {% set link = path('upload_html5_form') %}
 
                               {% if not app['browser'].supportFileAPI() %}
@@ -79,8 +83,8 @@
 
                   {# MODULE #}
                   {% if module == "prod" %}
-          <li>
-            <a href="#" class="state-navigation" data-state="publication" >
+                      <li class="menu-bar-item">
+                          <a href="#" class="state-navigation" data-state="publication">
               <span>
                 {{ 'Publications' | trans }}
               </span>
@@ -89,7 +93,7 @@
                   {% endif %}
 
                   {% if module is defined and module == "prod" and app.getAclForUser(app.getAuthenticatedUser()).has_right(constant('\\ACL::ORDER_MASTER')) %}
-          <li>
+                      <li class="menu-bar-item">
                           <a href="#" class="order-open-action" title="{{ 'Orders manager' | trans }}">
               <span>
                 {{ 'Commandes' | trans }}
@@ -100,6 +104,7 @@
 
               {% endif %}
           </ol>
+      </ol>
 
     </div>
     <div class="PNB right" style="left:auto;overflow:hidden;">
@@ -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>