Fixes to customation of ArchitectUI for mobile displays, hamburger should now be visibile and search is not black on black.

Closes #292

Author: leenooks

resources/themes/architect/src/app.js

@@ -72,11 +72,14 @@ $(document).ready(() => {
 
     var resizeClass = function () {
         var win = document.body.clientWidth;
-        if (win < 1250) {
+        if (win < 768) {
+            $('.app-container').addClass("closed-sidebar closed-sidebar-mobile");
+            $('.app-header').addClass("header-text-light bg-light").removeClass("bg-dark header-text-dark");
+        } else if (win < 1250) {
             $('.app-container').addClass('closed-sidebar-mobile closed-sidebar');
-            $('.app-header').removeClass("heard-text-light bg-dark").addClass("bg-light header-text-dark");
+            $('.app-header').removeClass("header-text-light bg-dark").addClass("bg-light header-text-dark");
         } else {
-            $('.app-header').addClass("heard-text-light bg-dark").removeClass("bg-light header-text-dark");
+            $('.app-header').addClass("header-text-light bg-dark").removeClass("bg-light header-text-dark");
             $('.app-container').removeClass('closed-sidebar-mobile closed-sidebar');
         }
     };

resources/themes/architect/src/layout/header/themes/_header-dark.scss

@@ -114,6 +114,14 @@
       }
     }
 
+    .app-header__mobile-menu {
+      .hamburger-inner,
+      .hamburger-inner::before,
+      .hamburger-inner::after {
+        background: $gray-800;
+      }
+    }
+
   }
 
 }

resources/themes/architect/src/layout/header/themes/_header-light.scss

@@ -128,7 +128,7 @@
       .hamburger-inner,
       .hamburger-inner::before,
       .hamburger-inner::after {
-        background: rgba(255, 255, 255, .9);
+        background: $gray-800;
       }
     }
 

resources/themes/architect/views/layouts/partials/sidebarmenu.blade.php

@@ -22,7 +22,7 @@
 	</div>
 	<div class="app-header__menu">
 		<span>
-			<button type="button" class="btn-icon btn-icon-only btn btn-sm btn-primary mobile-toggle-header-nav">
+			<button type="button" class="btn-icon btn-icon-only btn btn-sm btn-dark mobile-toggle-header-nav">
 				<span class="btn-icon-wrapper">
 					<i class="fas fa-ellipsis-v fa-w-6"></i>
 				</span>

resources/themes/architect/views/layouts/partials/topmenu.blade.php

@@ -22,7 +22,7 @@
 	</div>
 	<div class="app-header__menu">
 		<span>
-			<button type="button" class="btn-icon btn-icon-only btn btn-sm btn-primary mobile-toggle-header-nav">
+			<button type="button" class="btn-icon btn-icon-only btn btn-sm btn-dark mobile-toggle-header-nav">
 				<span class="btn-icon-wrapper">
 					<i class="fas fa-ellipsis-v fa-w-6"></i>
 				</span>