changed the navbar-icon when expended for mobile

resources/js/app-layout.js

@@ -141,6 +141,7 @@ window.ProcessMaker.navbar = new Vue({
       taskTitle: "",
       isMobile: false,
       isMobileDevice: window.ProcessMaker.mobileApp,
+      isNavbarExpanded: false,
     };
   },
   watch: {
@@ -214,6 +215,9 @@ window.ProcessMaker.navbar = new Vue({
     onResize() {
       this.isMobile = window.innerWidth < 992;
     },
+    toggleNavbar() {
+      this.isNavbarExpanded = !this.isNavbarExpanded;
+    },
   },
 });
 

resources/views/layouts/navbar.blade.php

@@ -5,7 +5,13 @@
             $loginLogo = \ProcessMaker\Models\Setting::getLogin();
         @endphp
         <b-navbar-brand href="#" class="d-lg-none pl-2"><img class="navbar-logo" src={{$loginLogo}}></b-navbar-brand>
-        <b-navbar-toggle class="ml-auto" :target="['nav-collapse', 'breadcrumbs-collapse']"></b-navbar-toggle>
+        <b-navbar-toggle class="ml-auto" :target="['nav-collapse', 'breadcrumbs-collapse']" @click="toggleNavbar">
+            <template #default="{ expanded }">
+                <span class="bar" :class="{ 'rotate-top': isNavbarExpanded }"></span>
+                <span class="bar" :class="{ 'fade-out': isNavbarExpanded }"></span>
+                <span class="bar" :class="{ 'rotate-bottom': isNavbarExpanded }"></span>
+            </template>
+        </b-navbar-toggle>
     </div>
 
     <div class="d-flex d-lg-none w-100">
@@ -168,6 +174,27 @@ class="ml-2"
 
 </div>
 <style lang="scss" scoped>
+    .bar {
+        display: block;
+        width: 25px;
+        height: 3px;
+        margin: 5px auto;
+        background-color: rgba(114, 128, 146, 0.8);
+        transition: all 0.3s ease;
+    }
+
+    .rotate-top {
+        transform: rotate(45deg) translate(7px, 5px);
+    }
+
+    .rotate-bottom {
+        transform: rotate(-45deg) translate(6px, -5px);
+    }
+
+    .fade-out {
+        opacity: 0;
+    }
+
     .separator {
         border-right: 1px solid rgb(227, 231, 236);
         height: 30px;