feat: Open Sidebar on click only - MEED-7788 - Meeds-io/MIPs#159

This change will allow to open Sidebar when Hidden only when clicking on Hamburger Button and no more using the Hover effect to open the sidebar.
Meeds-io · Nov 28, 2024 · 9cb6b85 · 9cb6b85
1 parent e45a6d0
commit 9cb6b85
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 23 deletions.
diff --git a/webapp/src/main/resources/locale/portal/HamburgerMenu_en.properties b/webapp/src/main/resources/locale/portal/HamburgerMenu_en.properties
@@ -38,3 +38,4 @@ menu.spaces.yourSpaces=Your Spaces
 menu.spaces.noUnreadSpaces=No unread activities here
 menu.spaces.noFavoriteSpaces1=You haven't marked any space as a favorite
 menu.spaces.noFavoriteSpaces2=Go to the {0}Spaces{1} page to do so
+menu.spaces.openSidebarTooltip=Open Sites page links
diff --git a/webapp/src/main/webapp/vue-apps/hamburger-menu/components/Sidebar.vue b/webapp/src/main/webapp/vue-apps/hamburger-menu/components/Sidebar.vue
@@ -25,7 +25,7 @@
     class="HamburgerNavigationMenu"
     flat>
     <v-hover v-model="$root.hoverButton">
-      <sidebar-button 
+      <sidebar-button
         :unread-per-space="unreadPerSpace"
         @open-drawer="openFirstLevel" />
     </v-hover>
@@ -105,6 +105,7 @@ export default {
     interval: null,
     mouseEvent: false,
     allowClosing: true,
+    closeTimeout: null,
     visibility: ['displayed', 'temporal']
   }),
   computed: {
@@ -163,10 +164,8 @@ export default {
         this.secondLevel = null;
       } else if (this.firstLevelDrawer && this.mouseEvent) {
         // Close if mouse is not entered to menu
-        window.setTimeout(() => {
-          if (!this.hover) {
-            this.closeMenu();
-          }
+        this.closeTimeout = window.setTimeout(() => {
+          this.closeMenu();
         }, 500);
       }
     },
@@ -212,7 +211,12 @@ export default {
       this.mouseEvent = mouseEvent;
       this.firstLevelDrawer = false;
       await this.$nextTick();
+
+      window.clearTimeout(this.closeTimeout);
+      window.clearInterval(this.interval);
       this.firstLevelDrawer = true;
+      this.allowClosing = false;
+      this.closeTimeout = window.setTimeout(() => this.allowClosing = true, 2000);
     },
     async changeSpacesMenu(spaceTemplateId, spacesUrl, sortBy, name) {
       this.site = null;
@@ -300,13 +304,14 @@ export default {
         this.interval = window.setTimeout(() => this.closeMenu(), 500);
         return;
       }
-      this.updateFirstLevelDrawer(false);
-      this.secondLevelDrawer = false;
-      this.thirdLevelDrawer = false;
-      this.space = null;
-      this.site = null;
-      this.secondLevel = null;
-      window.setTimeout(() => document.dispatchEvent(new CustomEvent('drawerClosed')), 200);
+      if (!this.hover) {
+        this.updateFirstLevelDrawer(false);
+        this.secondLevelDrawer = false;
+        this.thirdLevelDrawer = false;
+        this.space = null;
+        this.site = null;
+        this.secondLevel = null;
+      }
     },
   },
 };

diff --git a/webapp/src/main/webapp/vue-apps/hamburger-menu/components/SidebarButton.vue b/webapp/src/main/webapp/vue-apps/hamburger-menu/components/SidebarButton.vue
@@ -19,18 +19,15 @@
 
 -->
 <template>
-  <ripple-hover-button
+  <v-btn
     v-if="!$root.sticky"
-    class="HamburgerNavigationMenuLink flex full-height pa-0 border-box-sizing"
+    :title="$t('menu.spaces.openSidebarTooltip')"
+    class="HamburgerNavigationMenuLink border-box-sizing"
+    height="56"
+    width="69"
     text
-    @ripple-hover="$emit('open-drawer', $event)">
-    <v-card
-      class="d-flex justify-center"
-      min-height="56"
-      min-width="69"
-      flat>
-      <v-icon v-show="$root.hidden" size="24">fa-bars</v-icon>
-    </v-card>
+    @click="$emit('open-drawer', $event)">
+    <v-icon v-show="$root.hidden" size="24">fa-bars</v-icon>
     <div
       v-show="showBadge"
       class="hamburger-unread-badge position-absolute"
@@ -41,7 +38,7 @@
       text>
       <div class="hamburger-unread-badge error-color-background"></div>
     </div>
-  </ripple-hover-button>
+  </v-btn>
 </template>
 <script>
 export default {