From e09441fb5c22f505524d1c4d4ee255710e6a6d13 Mon Sep 17 00:00:00 2001
From: Boubaker Khanfir <boubaker.khanfir@exoplatform.com>
Date: Tue, 10 Dec 2024 10:15:59 +0100
Subject: [PATCH] feat: Enhance Topbar Buttons Tooltips - MEED-7848 -
 Meeds-io/meeds#2644 (#266)

This change will adjust the icon sizes and improves the tooltip and
performances of page rendering.
---
 .../webapp/WEB-INF/jsp/siteManagement.jsp     |  1 -
 .../webapp/WEB-INF/jsp/siteNavigation.jsp     | 19 +++++++++++--
 .../components/SiteNavigation.vue             |  2 +-
 .../components/SiteNavigationButton.vue       | 27 +++++++++----------
 4 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/layout-webapp/src/main/webapp/WEB-INF/jsp/siteManagement.jsp b/layout-webapp/src/main/webapp/WEB-INF/jsp/siteManagement.jsp
index e945ebca..d07d422d 100644
--- a/layout-webapp/src/main/webapp/WEB-INF/jsp/siteManagement.jsp
+++ b/layout-webapp/src/main/webapp/WEB-INF/jsp/siteManagement.jsp
@@ -1,6 +1,5 @@
 <%@ page import="org.exoplatform.portal.config.UserPortalConfigService" %>
 <%@ page import="org.exoplatform.container.PortalContainer" %>
-
 <%
   PortalContainer portalContainer = PortalContainer.getCurrentInstance(session.getServletContext());
   UserPortalConfigService userPortalConfigService = portalContainer.getComponentInstanceOfType(UserPortalConfigService.class);
diff --git a/layout-webapp/src/main/webapp/WEB-INF/jsp/siteNavigation.jsp b/layout-webapp/src/main/webapp/WEB-INF/jsp/siteNavigation.jsp
index 5e6c2e3f..2ffe34d0 100644
--- a/layout-webapp/src/main/webapp/WEB-INF/jsp/siteNavigation.jsp
+++ b/layout-webapp/src/main/webapp/WEB-INF/jsp/siteNavigation.jsp
@@ -10,11 +10,26 @@
   if (canManageSiteNavigation) {
 %>
 <div class="VuetifyApp">
+  <div data-app="true"
+    class="v-application v-application--is-ltr theme--light"
+    id="siteNavigation">
+    <div class="v-application--wrap d-none d-sm-inline">
+      <button
+        id="topBarSiteNavigation"
+        type="button"
+        role="button"
+        class="ms-5 v-btn v-btn--flat v-btn--icon v-btn--round theme--light v-size--default"
+        title="Site navigation"
+        onclick="Vue.startApp('PORTLET/layout/SiteNavigation', 'init', <%=canManageSiteNavigation%>)">
+        <span class="v-btn__content">
+          <i aria-hidden="true" class="v-icon notranslate fa fa-project-diagram theme--light" style="font-size: 20px;"></i>
+        </span>
+      </button>
+    </div>
+  </div>
   <div id="siteNavigation">
     <script type="text/javascript">
       eXo.env.portal.isAdministrator = <%=isAdministrator%>;
-      eXo.env.portal.canManageSiteNavigation = <%=canManageSiteNavigation%>;
-      require(['PORTLET/layout/SiteNavigation'], app => app.init(<%=canManageSiteNavigation%>));
     </script>
   </div>
 </div>
diff --git a/layout-webapp/src/main/webapp/vue-app/site-navigation/components/SiteNavigation.vue b/layout-webapp/src/main/webapp/vue-app/site-navigation/components/SiteNavigation.vue
index fda14560..f2de2b97 100644
--- a/layout-webapp/src/main/webapp/vue-app/site-navigation/components/SiteNavigation.vue
+++ b/layout-webapp/src/main/webapp/vue-app/site-navigation/components/SiteNavigation.vue
@@ -33,7 +33,7 @@ export default {
   },
   computed: {
     isMobile() {
-      return this.$vuetify.breakpoint.width < 768 ;
+      return this.$vuetify.breakpoint.width < this.$vuetify.breakpoint.thresholds.sm;
     },
   }
 };
diff --git a/layout-webapp/src/main/webapp/vue-app/site-navigation/components/SiteNavigationButton.vue b/layout-webapp/src/main/webapp/vue-app/site-navigation/components/SiteNavigationButton.vue
index 254b6081..bdf6bf77 100644
--- a/layout-webapp/src/main/webapp/vue-app/site-navigation/components/SiteNavigationButton.vue
+++ b/layout-webapp/src/main/webapp/vue-app/site-navigation/components/SiteNavigationButton.vue
@@ -17,24 +17,21 @@
  Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 -->
 <template>
-  <v-tooltip bottom>
-    <template #activator="{on, bind}">
-      <v-btn
-        id="topBarSiteNavigation"
-        v-on="on"
-        v-bind="bind"
-        :role="'button'"
-        class="ms-5"
-        icon
-        @click="openSiteNavigationDrawer">
-        <v-icon size="20">fa-project-diagram</v-icon>
-      </v-btn>
-    </template>
-    <span>{{ $t('siteNavigation.button.tooltip.label') }}</span>
-  </v-tooltip>
+  <v-btn
+    id="topBarSiteNavigation"
+    :title="$t('siteNavigation.button.tooltip.label')"
+    :role="'button'"
+    class="ms-5"
+    icon
+    @click="openSiteNavigationDrawer">
+    <v-icon size="20">fa-project-diagram</v-icon>
+  </v-btn>
 </template>
 <script>
 export default {
+  mounted() {
+    this.openSiteNavigationDrawer();
+  },
   methods: {
     openSiteNavigationDrawer() {
       document.dispatchEvent(new CustomEvent('open-site-navigation-drawer',{detail: {