From c6ba4e604c335ea6bfbbc81da82316fe724c8032 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gustavo=20Bascop=C3=A9?= <gustavo.bascope@processmaker.com>
Date: Tue, 24 Dec 2024 12:15:37 -0400
Subject: [PATCH] changed the navbar-icon when expended for mobile

---
 resources/js/app-layout.js               |  4 ++++
 resources/views/layouts/navbar.blade.php | 29 +++++++++++++++++++++++-
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/resources/js/app-layout.js b/resources/js/app-layout.js
index c56cf4152d..abf887d29b 100644
--- a/resources/js/app-layout.js
+++ b/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;
+    },
   },
 });
 
diff --git a/resources/views/layouts/navbar.blade.php b/resources/views/layouts/navbar.blade.php
index 5ce2791f16..e03ba03ed5 100644
--- a/resources/views/layouts/navbar.blade.php
+++ b/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;