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