From 3a35f92a99928371cc07975c1e8c7a7af924297d Mon Sep 17 00:00:00 2001
From: Boubaker Khanfir <boubaker.khanfir@exoplatform.com>
Date: Tue, 3 Dec 2024 12:54:39 +0100
Subject: [PATCH] feat: Turn on Icon View of Sidebar when Tablet and Sticky
 Mode - MEED-7892 - Meeds-io/MIPs#159 (#4217)

This change will switch to icon mode when the resolution is under 1263
and more than 959 when the user had selected the 'STICKY' mode.
---
 .../vue-apps/sidebar/components/Sidebar.vue   |  2 +-
 .../src/main/webapp/vue-apps/sidebar/main.js  | 23 +++++++++++--------
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/webapp/src/main/webapp/vue-apps/sidebar/components/Sidebar.vue b/webapp/src/main/webapp/vue-apps/sidebar/components/Sidebar.vue
index 108c1bcce07..7b113b143f6 100644
--- a/webapp/src/main/webapp/vue-apps/sidebar/components/Sidebar.vue
+++ b/webapp/src/main/webapp/vue-apps/sidebar/components/Sidebar.vue
@@ -328,7 +328,7 @@ export default {
       }
     },
     closeMenuEffectively(force) {
-      if (force && this.mode === 'ICON') {
+      if (force && this.$root.icon) {
         this.$root.hoverMenu = false;
         this.$root.hoverThirdLevel = false;
         this.$root.hoverSecondLevel = false;
diff --git a/webapp/src/main/webapp/vue-apps/sidebar/main.js b/webapp/src/main/webapp/vue-apps/sidebar/main.js
index cda300b73c9..c34629a64c3 100644
--- a/webapp/src/main/webapp/vue-apps/sidebar/main.js
+++ b/webapp/src/main/webapp/vue-apps/sidebar/main.js
@@ -78,17 +78,26 @@ export function init(
           ltr: eXo.env.portal.orientation === 'ltr',
         },
         computed: {
-          stickyBreakpointWidth() {
-            return this.mode === 'ICON' ? this.$vuetify.breakpoint.thresholds.md : this.$vuetify.breakpoint.thresholds.lg;
+          autoSwitchToIcon() {
+            return this.mode === 'STICKY'
+              && this.allowIcon
+              && (this.$vuetify.breakpoint.width >= this.$vuetify.breakpoint.thresholds.md)
+              && (this.$vuetify.breakpoint.width < this.$vuetify.breakpoint.thresholds.lg);
           },
           stickyAllowed() {
-            return this.$vuetify.breakpoint.width >= this.stickyBreakpointWidth;
+            return this.$vuetify.breakpoint.width >= this.$vuetify.breakpoint.thresholds.md;
+          },
+          displaySequentially() {
+            return this.stickyAllowed;
           },
           hidden() {
             return !this.stickyAllowed || this.mode === 'HIDDEN';
           },
           sticky() {
-            return !this.hidden && this.mode === 'STICKY';
+            return !this.hidden && (this.mode === 'STICKY' && !this.autoSwitchToIcon);
+          },
+          icon() {
+            return !this.hidden && (this.mode === 'ICON' || this.autoSwitchToIcon);
           },
           allowedModes() {
             return this.settings?.allowedModes || [];
@@ -102,9 +111,6 @@ export function init(
           allowHidden() {
             return this.allowedModes.includes('HIDDEN');
           },
-          icon() {
-            return !this.hidden && this.mode === 'ICON';
-          },
           expand() {
             return !this.icon || this.hoverDeferred;
           },
@@ -114,9 +120,6 @@ export function init(
           iconCollapse() {
             return this.icon && !this.expand;
           },
-          displaySequentially() {
-            return this.$vuetify.breakpoint.width >= this.stickyBreakpointWidth;
-          },
           hover() {
             return this.hoverMenu
               || this.hoverButton