Skip to content

Commit

Permalink
feat: Open Sidebar on click only - MEED-7788 - Meeds-io/MIPs#159
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
boubaker committed Nov 28, 2024
1 parent e45a6d0 commit dcfbfce
Show file tree
Hide file tree
Showing 4 changed files with 30 additions and 27 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -105,6 +105,7 @@ export default {
interval: null,
mouseEvent: false,
allowClosing: true,
closeTimeout: null,
visibility: ['displayed', 'temporal']
}),
computed: {
Expand Down Expand Up @@ -161,9 +162,9 @@ export default {
this.space = null;
this.site = null;
this.secondLevel = null;
} else if (this.firstLevelDrawer && this.mouseEvent) {
} else if (this.firstLevelDrawer && this.$root.displaySequentially && this.mouseEvent) {
// Close if mouse is not entered to menu
window.setTimeout(() => {
this.closeTimeout = window.setTimeout(() => {
if (!this.hover) {
this.closeMenu();
}
Expand All @@ -184,7 +185,7 @@ export default {
window.clearInterval(this.interval);
this.interval = null;
}
} else if (!this.interval) {
} else if (!this.interval && this.$root.displaySequentially) {
this.interval = window.setTimeout(() => this.closeMenu(), 500);
}
},
Expand Down Expand Up @@ -212,7 +213,14 @@ export default {
this.mouseEvent = mouseEvent;
this.firstLevelDrawer = false;
await this.$nextTick();

window.clearTimeout(this.closeTimeout);
window.clearInterval(this.interval);
this.firstLevelDrawer = true;
if (this.allowClosing) {
this.allowClosing = false;
this.closeTimeout = window.setTimeout(() => this.allowClosing = true, 2000);
}
},
async changeSpacesMenu(spaceTemplateId, spacesUrl, sortBy, name) {
this.site = null;
Expand Down Expand Up @@ -300,13 +308,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;
}
},
},
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -41,7 +38,7 @@
text>
<div class="hamburger-unread-badge error-color-background"></div>
</div>
</ripple-hover-button>
</v-btn>
</template>
<script>
export default {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
flat
class="full-height">
<row
v-if="!displaySequentially"
v-if="!$root.displaySequentially"
class="px-4 pt-3 position-absolute z-index-one">
<v-btn
class="white"
Expand Down Expand Up @@ -75,10 +75,6 @@ export default {
type: Object,
default: null
},
displaySequentially: {
type: Boolean,
default: false,
},
enableChangeHome: {
type: Boolean,
default: false,
Expand Down

0 comments on commit dcfbfce

Please sign in to comment.