From ddcc9aee7a69aab78dbf4c512a196f0cd217fa5a Mon Sep 17 00:00:00 2001
From: Michael Weimann <mail@michael-weimann.eu>
Date: Fri, 26 Mar 2021 16:42:41 +0100
Subject: [PATCH] improve mobile nav button layout

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>
---
 resources/assets/themes/base.less         | 15 +++++++++++++++
 resources/views/layouts/parts/navbar.twig | 14 +++++++-------
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/resources/assets/themes/base.less b/resources/assets/themes/base.less
index 002ed5da..b85b7b57 100644
--- a/resources/assets/themes/base.less
+++ b/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;
+    }
+  }
 }
diff --git a/resources/views/layouts/parts/navbar.twig b/resources/views/layouts/parts/navbar.twig
index dc15e597..8eda1395 100644
--- a/resources/views/layouts/parts/navbar.twig
+++ b/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"
-                        data-toggle="offcanvas" data-target="#navbar-offcanvas">
-                    <span class="sr-only">Toggle navigation</span>
-                    <span class="icon icon-open">☰</span>
-                    <span class="icon icon-close">×</span>
-
-
+                <button type="button"
+                        class="navbar-toggle collapsed"
+                        data-toggle="offcanvas"
+                        data-target="#navbar-offcanvas"
+                        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>