From 6714abf2774669063d6aef84a1f12eea392ee8f4 Mon Sep 17 00:00:00 2001
From: Roly Gutierrez <roly.gutierrez@processmaker.com>
Date: Tue, 28 Jul 2026 12:54:09 -0400
Subject: [PATCH] FOUR-32393 REGRESSION>> The icon main disapperas with
 selections of the options.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Description:
Fix sidebar icon flicker on navigation (FOUR-32393)

Apply .logo-closed styles under #sidebar instead of #sidebar .closed so
the collapsed icon renders at 40×40 before Vue mounts and adds the closed
class. Override [v-cloak] with display: list-item !important so the icon
is not hidden until Vue initializes.

Optimize processmaker-icon.svg (4.7 KB → 1.5 KB) by simplifying structure
and reducing the embedded PNG from 206×206 to 64×64.

Related tickets:
https://processmaker.atlassian.net/browse/FOUR-32393
---
 resources/img/processmaker-icon.svg | 14 +++-----------
 resources/sass/sidebar/sidebar.scss | 21 +++++++++++----------
 2 files changed, 14 insertions(+), 21 deletions(-)

diff --git a/resources/img/processmaker-icon.svg b/resources/img/processmaker-icon.svg
index 944136ba27..50a156dae0 100644
--- a/resources/img/processmaker-icon.svg
+++ b/resources/img/processmaker-icon.svg
@@ -1,11 +1,3 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <rect width="32" height="32" fill="url(#pattern0_27_8533)"/>
-    <defs>
-        <pattern id="pattern0_27_8533" patternContentUnits="objectBoundingBox" width="1" height="1">
-            <use xlink:href="#image0_27_8533" transform="scale(0.00485437)"/>
-        </pattern>
-        <image id="image0_27_8533" width="206" height="206" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM4AAADOCAYAAAB2Hz3EAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAOdEVYdFNvZnR3YXJlAEZpZ21hnrGWYwAAC1lJREFUeAHt3e11EzkUxvHHnC0AOrglQAehg+0AUgG7FUBK2AoCleAOoIO9HSwdeCVj5c0ez2hGL1fS8z9n4gTyIXb8y9gzkmaHU4fD4cbdfHbbW7e9Rr+p2/Zuu9vtdgq2Kvd88c+RT2776DZB3+3d9s09X76Gf9j5D+5B8GC+YKzUbe+JJz73fBF38x39g3nZF/d8ufOf7NyD8NHd3mPMFMQT1cBoQv75sn/lPvmAcRO3fT89GdhMRHPMvzo77nH+Q9/vaZak4J7nakTz2M7nHpADmE9BPBcjmud5N6/AQgK+bDuLaC5HOM8TEM9DRDMd4ZwnIB6imYlwLicYGA/RzEc40wkGxEM0yyKc6wkGwkM0yyOc+QQD4CGauAhnWYKO8RBNfISzPEGHeIhmXYQTl6AjPESzPsKJT9ABHqLZFuGsS9AwHqLZHuGsT9AgHqJJE+FsS9AQHqJJF+FsT9AAHqJJG+GkSWAYD9Gkj3DSJTCIh2jyRDhpExjCQzT5Ipz0CQzgIZq8EU6eBBXxEE3+CCdfggp4iKZMhJM3QUE8RFMuwsmfoAAeoikb4ZRJkBEP0ZSPcMolyICHaOpEOGUTJMRDNPUinPIJEuAhmroRTp0EG/AQTf0Ip16CFXiIxkaEUzdBBB6isRPh1E+wAA/R2IpwbCS4godo7EU4dhJcwEM0NiMcWwme4CEauxGOvQS/8dyAaMz2B9pq7zZ/nfmfu93uFzrttKe5R+fXJHX301+0+a3bPqK1q58f2ukLBsjdT3Hbv6f77G8FA+R/v4dG8j9vK1ed9nuYd+i8w+X3NIpBrobt7r+/7zcwXktXnf4bnXeYPhBw/PfDGHueOzRSK3ucNwO8p5k7EKAYYM/TwvPR73GagON/TnTaIe6Qs6L/AwZNPB95OLpih/jzNMfvH+Rlm+kIp1KH9Sc3BcRTPcKp0GH7iAAB8VSNcAqXAE1IQDzVIpyCJUQTEhBPlQinUBnQhATEUzzCKVBGNCEB8RSNcDJXAE1IQDzFIpyMFUQTEhBPkQgnUxXQhATEkz3CyVBFNCEB8WSNcBJnAE1IQDzZIpyEGUITEhBPljwcBducQTQhAfGkTP0HD+cb2KYMowkJiCdVe//Bz8fxCyb8gOHVVCzPx2kAzdMUxufzGJ+Pozg9fq9OMyvfgy/ZomsMjU/APc/aFE/+6BwPDpy+IJ6IGkQTEhBPbIoXe+qHo2rEs7yG0YQExLM0xYWXt88ORxPPfB2gCQmIZy7FxHvCs/M4xDNdR2hCAuKZSnHlQMrFE6DEc16HaEIC4nmZYubo4+TIAeJ5rGM0IQHxhBQLDtlfHXJDPENdakNAPIqF57lmx6qNjGcgNCHBuHgUESeHFw3yHBHPgGhCgvHwKCJHVCweHT0SnoHRhATj4FGsGIYUNa1gBDxE85CgfzyKlWP3oufj9IyHaM4S9ItHsWHA66qJbD3iIZrJBP3hUWwcJb56BmhPeIhmNkE/eBQJplZsmjrdAx6iWZygfTyKRPORNq850DIeoolO0C4eRcJJfEkW62gRD9GsTtAeHkXima/JVrlpCQ/RbE7QDh5FhuniSZeHagEP0SRLYB+PItMaC8nXVbOMh2iSJ7CLR5FxYZIsCxJaxEM02RLYw6PIvJpPtpU8LeEhmuwJ7OBRZEbjy7oErgU8RFMsQX08igJofNnXjq6Jh2iKJ6iHR1EIja/Ious18BBNtQTl8SgKovEVu1pBSTxEUz1BOTyKwmh8RS/zUQIP0ZhJkB+PogIaX/Hr4+TEQzTmEuTDo6iExlflwlI58BCN2QTp8SgqovFVuyJbSjxEYz5BOjyKymh8VS9lmAIP0TSTYDsehQE0vurXAN2Ch2iaS7Aej8IIGp+Ji+euwUM0zSaIx6MwhMZn5qrTMXiIpvkEy/EojKHxmbpc+xI8RNNNgnk8CoNofKbg+K7hIZruEkzjURhF4zMHx3cJD9F0m+Acj8IwGp/Zy6D7nmB5D6LpPcXj79k0Gp9pOD6H58bdfHbbDVjv7d1259DsYTyTL9VCpz3Ovdtu0eC6bSwqxe/f832l+TxRmYXz9D1NzclwrEiKx5dnggaWnjIJ59KBAOLpNsX5exqBcTzm4Fw7ekY83aWYPhAgMIzHFJwlh5yJp5sU80fPBEbxmIETc56GeJpPsfyQs8AgHhNw1pzcJJ5mU8SfpxEYw1MdzpYRAcTTXIr1JzcFhvBUhZNiGA3xNJNi+4gAgRE81eCkHHtGPOZTpBtGIzCApwqcHAM2icdsivRjzwSV8RSHk3OUM/GYS5FvwKagIp6icEpMDSAeMynyj3IWVMJTDE7J+TTEUz1FuakBggp4isApiSZEPNVSlJ9PIyiMJzucGmhCxFM8Rb1JaIKCeLLCqYkmRDzFUtSfuSkohCcbHAtoQsSTPYWd6c6CAniywLGEJkQ82VLYWyNAkBlPcjgW0YSIJ3kKuwtrCDLiSQrHMpoQ8SRLYX81GkEmPMngtIAmRDybUzSwhNMpQQY8SeC0hCZEPKtTtIMmJEiMZzOcFtGEiCc6RXtoQoKEeDbBaRlNiHgWp2gXTUiQCM9qOD2gCRHPbIr20YQECfCsgtMTmhDxTKboB01IsBFPNJwe0YSI5yxFf2hCgg14ouD0jCZEPA8p+kUTEqzEsxjOCGhCxDMEmpBgBZ5FcEZCExoYj2IcNCFBJJ5ZOCOiCQ2IRzEempAgAs9VOCOjCQ2ERzEumpBgIZ5JOETz2AB4FEQTEizAcxEO0ZzXMR4F0bxMMIPnDA7RTNchHgXRTCW4gucZHKKZryM8CqKZSzCB5wEO0SyvAzwKolma4AKeIxyiia9hPAqiiU3wAs/OffHa3f6A7enOOxitsT86CuNo3ON5gN3Ube/c4/fL73E+gXua1TW051FwT7M1cdtf/hO/x/F7m7cwnOU9Tsj4nkfRCBrjexzfL/c4vtk18IM2AcdnFI+ioT1NK89HU5drbz2DL9sUfHmWJcJJnCE8CqLJFuFkyAAeBdFkjXAyVRGPgmiyRzgZq4BHQTRFIpzMFcSjIJpiEU6BCuBREE3RCKdQGfEoiKZ4hFOwDHgURFMlwilcQjwKoqkW4VQoAR4F0VSNcCq1AY+CaKpHOBVbgef4/URTvybgnCbbdVkEnuP3EY2NWtnjmJ4vtLUFeI7/3zsa9wfyBo3UCpzP6LwreI7/Psie5gMaqRU4N+6v0Yh4jl+PgOb0+/2IRmpiBuiTvrrtm3si7dFxp5mk9267HeTlmV/34k80kp8B2hqcUVK33eI3HgEzFadO20zx++XZHm0veth1hGMrxZP3NBXm87CFEY6dFBcOBBCPzQjHRoorR8+Ix16EUz/FgkPOxGMrwqmbIuI8DfHYiXDqpVhxcpN4bEQ4dVJsGBFAPPUjnPIpEgyjIZ66EU7ZFAnHnhFPvQinXIoMAzaJp06EUyZFxlHOxFM+wsmfosDUAOIpG+HkTVFwPg3xlItw8qWoMAmNeMpEOHlSVJy5STz5I5z0KQxMdyaevBFO2hSG1gggnnwRTroUBhfWIJ48EU6aFIZXoyGe9BHO9hQNLOFEPGkjnG0pGlr3jHjSRTjrUzS4WCDxpIlw1qVoEE2IeLZHOPEpGkYTIp5tEU5cig7QhIhnfYSzPEVHaELEsy7CWZaiQzQh4omPcOZTdIwmRDxxEc71FAOgCRHP8ghnOsVAaELEsyzCuZxiQDQh4pmPcM5TDIwmRDzXI5znKYjmIeKZjnAeUxDNWcRzOQ/nF5iCaCYjnvM8nJ8YOwXRzEY8Dx29eDh3GDcF0SyOeI794z+8Ol3deEQ8CqKJbnA8d+7+f/WfHA8OuC++uJtbt+3Rf/49nf+r8Y5o1vUEzzeMAWjvttuTE8bY2v4HPyd2OQ1Dn9wAAAAASUVORK5CYII="/>
-    </defs>
-</svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+  <image width="32" height="32" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAQAAAAAYLlVAAAD20lEQVRo3q2Zz0tUURTHv2+cdAgcMxTatMpioISkVYv+ijZCDtImKImwTYGroJbSaDSLIEjMRYtaabR0DCxoEQRuwlpFmDMJ4saccb4t3vx4P+6579775rj0eb8fzr33fM89gq94yKSo8yWHCIJICv8rjvMzk2OX0zCQ9xFKHExGaMkXWKFZfABNo8FFH8FAfsN41Yo5QACBvZIn120AtAhO8tYAIoKjvAOA8iw4yzsBxLKQQt4RIISQSt4ZIIrgKp8CIIjgLp8KgCTLzPMiN1OssO5RLm0/8B1NTeHz8A8VjGIioT4P4DJGhN9VsuKf/cQkvsLTLHyMSyhjC1PYR0bzXQZFPMeAVL+leM++0DmP//h73+BC5EbEf8a4I22BnIEmPCgT0Mp3AS9wDUAfZuBhDgf+rojfi+mxjIg8APThDp5gUCPm9QxAIW+GIB7kDOqp5dMgHGWwhEZqeVeEKpbBIZbYUJzPVWatHU/ZNRE8r7wFVRbpgeAgFxUIIQDjmq/oFwSAKosEW0urEAIAVpYTQ1AC1Hx5dhaPI3QArB0v3i9EAaod+YBAFKEF4GS4IYQYQFg+ABFGWGU2hd+H+4UggEpemYUugJvfBxG6AGp5JUIbwL3d6CK0AWqivALBB0jT7XQRfICqVj5yFsg1einl2wgneY67/GsgH8hCme84nlreR3jKK/zGabPXdRshz3v8yN5Eg8u8LslLdnwWo9jCMXoRe9hGAXkjm+pcvE2ucZgLSpuyiypv8AJ/8ZnBfCF071eZEWzKTr5IcIx/2EycL0TKjn8N0yG0L55/DfXzhVjVaxcid4RO2ekUIhlBUXS7pdgNoVN2QqVYjaCs+UEzskcIVL2IGcW7JsFywnZshxAqujE7DmdBdLxoQ2KOELEcRUMSRBAdL96SmSHEHE/ZknU3QnQ8VVOajKBwPKEpbSGA48JUM9KWwwRBabhiW95giUPgJ2ExNYAOQfB7EYCs87H8PI8BJCCI3Y4GgKxYPU5bj9wDzKEcccoaZrGc8BBWFmDL17GAUMN9J3mX+YACQSvfKTZCyBOSHDLaBuIAD3GMu9jDLFYSZiH9so4MMIEpbGiz2sRrjGAbXzCm+Yroxy0MixnVjOkOsZ+wfTt4hAJu44QmVUQWp8Wt1ozpgBxyCb3ePN4ijzOYcTh9iWM6c79P0zU5j2prgXYjDYIjQLjdSIPgBFCN+b07ggOA5HhuCNYAsuO5IVgCaN73jghWAAnveycECwCT8YI9QgViqxD9P7fJeKGbhRLrRuu+8XgTk8hpV/ZwhCWsgCZ+31roFB7gaqKz/8b8fzaM+zxV9GbRAAAAAElFTkSuQmCC"/>
+</svg>
diff --git a/resources/sass/sidebar/sidebar.scss b/resources/sass/sidebar/sidebar.scss
index 31d4cfa646..b67b2ad1e5 100644
--- a/resources/sass/sidebar/sidebar.scss
+++ b/resources/sass/sidebar/sidebar.scss
@@ -72,6 +72,17 @@
     width: 150px;
   }
 
+  .logo-closed {
+    display: list-item !important;
+    margin: 16px auto 24px auto;
+  }
+
+  .logo-closed img {
+    margin: 0px 9px;
+    height: 40px;
+    width: 40px;
+  }
+
   .nav-item:hover {
     background-color: $hover;
   }
@@ -89,16 +100,6 @@
     color: $light;
   }
 
-  .logo-closed {
-    margin: 16px auto 24px auto;
-  }
-
-  .logo-closed img {
-    margin: 0px 9px;
-    height: 40px;
-    width: 40px;
-  }
-
   .nav-item:hover {
     background-color: $hover;
   }