ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

hide navbar by scroll down, show navbar by scroll up

Browse Source
This commit is contained in:
ogerly 2023-01-22 11:19:22 +01:00
parent bb30d883b9
commit 3040f216d3
1 changed files with 21 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
webapp/components/HeaderMenu/HeaderMenu.vue
View File

@ -1,5 +1,5 @@
<template>
<ds-container class="main-navigation-container" style="padding: 10px 10px">
<ds-container class="main-navigation-container" :class="{ 'hide-navbar': hideNavbar }" id="navbar">
<div>
<!-- header menu -->
<ds-flex v-if="!showMobileMenu" class="main-navigation-flex">
@ -237,6 +237,8 @@ export default {
},
data() {
return {
hideNavbar: false,
prevScrollpos: 0,
links,
LOGOS,
SHOW_GROUP_BUTTON_IN_HEADER,
@ -258,14 +260,32 @@ export default {
},
},
methods: {
handleScroll() {
let currentScrollPos = window.pageYOffset;
if (this.prevScrollpos > currentScrollPos) {
this.hideNavbar = false;
} else {
this.hideNavbar = true;
}
this.prevScrollpos = currentScrollPos;
},
toggleMobileMenuView() {
this.toggleMobileMenu = !this.toggleMobileMenu
},
},
mounted() {
window.addEventListener('scroll', this.handleScroll);
},
}
</script>
<style lang="scss">
#navbar {
padding: 10px 10px;
}
.hide-navbar {
display: none;
}
.margin-right-20 {
margin-right: 20px;
}