improve mobile nav button layout

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>

resources/assets/themes/base.less

@@ -442,4 +442,19 @@ span.ref-id[id] {
       margin-top: 7px;
     }
   }
+
+  .navbar-toggle {
+    align-items: center;
+    font-size: 18px;
+    display: flex;
+    height: 38px;
+    justify-content: center;
+    padding: 0;
+    transform: none;
+    width: 38px;
+
+    .icon-close {
+      padding: 0;
+    }
+  }
 }

resources/views/layouts/parts/navbar.twig

@@ -11,13 +11,13 @@
     <div class="container-fluid">
         {% block navbar %}
             <div class="navbar-header">
-                <button type="button" class="navbar-toggle collapsed"
+                <button type="button"
-                        data-toggle="offcanvas" data-target="#navbar-offcanvas">
+                        class="navbar-toggle collapsed"
-                    <span class="sr-only">Toggle navigation</span>
+                        data-toggle="offcanvas"
-                    <span class="icon icon-open">☰</span>
+                        data-target="#navbar-offcanvas"
-                    <span class="icon icon-close">×</span>
+                        aria-label="Toggle navigation">
-
+                    <span class="text-primary glyphicon glyphicon-menu-hamburger icon-open"></span>
-
+                    <span class="text-primary glyphicon glyphicon-remove icon-close"></span>
                 </button>
                 <a class="navbar-brand" href="{{ url('/') }}">
                     <span class="icon-icon_angel"></span>