Fix mobile navi

resources/assets/js/forms.js

@@ -90,9 +90,6 @@ $(function () {
         return true;
     });
 
-    $('.dropdown-menu').css('max-height', function () {
-        return ($(window).height() - 50) + 'px';
-    }).css('overflow-y', 'scroll');
 });
 
 /*

resources/assets/js/offcanvas.js

@@ -0,0 +1,13 @@
+;(function($, window, document, undefined) {
+    'use strict';
+
+    $(document).ready(function () {
+        $('[data-toggle="offcanvas"]').click(function () {
+            var button = $(this);
+            button.toggleClass('is-open')
+            $(button.attr('data-target')).toggleClass('in');
+        });
+    });
+
+}(jQuery, window, window.document));
+

resources/assets/js/vendor.js

@@ -6,6 +6,7 @@ require('imports-loader?this=>window&define=>false&exports=>false!moment');
 require('imports-loader?this=>window&define=>false&exports=>false!moment/locale/de');
 require('imports-loader?define=>false&exports=>false!eonasdan-bootstrap-datetimepicker');
 require('imports-loader?this=>window!chart.js');
+require('./offcanvas');
 require('./forms');
 require('./sticky-headers');
 require('./moment-countdown');

resources/assets/themes/base.less

@@ -333,3 +333,71 @@ table a > .icon-icon_angel {
     content: "";
   }
 }
+
+.navbar-toggle {
+  transform: scale(1.25, 0.96);
+  padding: 2px 6px;
+  margin-top: 6px;
+  margin-bottom: 4px;
+  max-height: @navbar-height;
+
+  .icon {
+    border-color: @brand-primary;
+    font-weight: bold;
+    color: @brand-primary;
+    font-size: 25px;
+    &-close {
+      padding: 0 3px;
+      display: none;
+    }
+  }
+  &.is-open .icon {
+    &-open {
+      display: none;
+    }
+    &-close {
+      display: block;
+    }
+  }
+}
+
+
+@media screen and (max-width: @grid-float-breakpoint-max) {
+  #navbar-offcanvas {
+    display: block;
+    position: absolute;
+    width: 90%;
+    height: calc( 100vh - @navbar-height);
+    max-height: unset;
+    left: 101%;
+    top: @navbar-height + 1;
+
+    transition: left .3s ease-in-out;
+    -webkit-transition: left .3s ease-in-out;
+
+    background: @navbar-default-bg;
+    margin: 0 !important;   // Overridden in theme with high specifity:
+    // .container > .navbar-header,
+    // .container-fluid > .navbar-header,
+    // .container > .navbar-collapse,
+    // .container-fluid > .navbar-collapse
+
+    // Is open
+    &.collapse.in {
+      left: 10%;
+      display: block;
+      overflow-y: auto;
+      box-shadow: -5px 20px 20px 0px rgba(0, 0, 0, 0.5), 5px 0 5px -5px rgba(0, 0, 0, 0.5);
+    }
+
+    // Hide current page in nav.
+    .nav > li.active {
+      display: none;
+    }
+    .caret {
+      float: right;
+      margin-top: 7px;
+    }
+  }
+}
+

resources/views/layouts/parts/navbar.twig

@@ -12,11 +12,12 @@
         {% block navbar %}
             <div class="navbar-header">
                 <button type="button" class="navbar-toggle collapsed"
-                        data-toggle="collapse" data-target="#navbar-collapse-1">
+                        data-toggle="offcanvas" data-target="#navbar-offcanvas">
                     <span class="sr-only">Toggle navigation</span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
+                    <span class="icon icon-open">☰</span>
+                    <span class="icon icon-close">×</span>
+
+
                 </button>
                 <a class="navbar-brand" href="{{ url('/') }}">
                     <span class="icon-icon_angel"></span>
@@ -25,7 +26,7 @@
             </div>
 
             {% block menu %}
-                <div class="collapse navbar-collapse" id="navbar-collapse-1">
+                <div class="collapse navbar-collapse" id="navbar-offcanvas">
                     {% block menu_items %}
                         {{ menu() }}
 
@@ -65,7 +66,7 @@
                                 {{ _self.toolbar_item(user.name, url('users', {'action': 'view'}), 'users', 'icon icon-icon_angel') }}
                             {% endif %}
 
-                            <li class="dropdown">
+                            <li class="hidden-xs">
                                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                     <span class="caret"></span>
                                 </a>
@@ -73,7 +74,9 @@
                                     {{ menuUserSubmenu()|join(" ")|raw }}
                                 </ul>
                             </li>
-
+                        </ul>
+                        <ul class="nav navbar-nav navbar-mobile hidden-sm hidden-md hidden-lg">
+                            {{ menuUserSubmenu()|join(" ")|raw }}
                         </ul>
                     {% endblock %}
                 </div>