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.
Meeds-io · Dec 3, 2024 · 983c8dc · 983c8dc
1 parent e0bc436
commit 983c8dc
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 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
@@ -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
@@ -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