fix(ui): fix nav-bar double scroll

witnet · Mar 4, 2022 · 31e8e9c · 31e8e9c
1 parent 6f3ac59
commit 31e8e9c
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/packages/ui/components/NavBar.vue b/packages/ui/components/NavBar.vue
@@ -107,9 +107,11 @@ export default {
     },
     closeMenu() {
       this.isMenuVisible = false
+      this.$emit('scroll', this.isMenuVisible)
     },
     toggleMenu() {
       this.isMenuVisible = !this.isMenuVisible
+      this.$emit('scroll', this.isMenuVisible)
     },
     displayDropDown() {
       this.displayBox = !this.displayBox
@@ -184,6 +186,7 @@ export default {
       &.last-item {
         display: flex;
         justify-content: center;
+        padding-bottom: 24px;
       }
       .btn-container {
         width: max-content;

diff --git a/packages/ui/layouts/default.vue b/packages/ui/layouts/default.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="background">
+  <div class="background" :class="{ 'hide-scroll': hideScroll }">
     <MainSection>
-      <NavBar slot="navbar" />
+      <NavBar slot="navbar" @scroll="handleScroll" />
       <BreadCrumbs slot="breadcrumbs" />
       <Nuxt slot="content" />
       <Footer slot="footer" />
@@ -11,9 +11,19 @@
 
 <script>
 export default {
+  data() {
+    return {
+      hideScroll: false,
+    }
+  },
   head() {
     return this.$nuxtI18nHead({ addSeoAttributes: true })
   },
+  methods: {
+    handleScroll(scroll) {
+      this.hideScroll = scroll
+    },
+  },
 }
 </script>
 <style lang="scss">
@@ -30,6 +40,11 @@ html {
   background: var(--bg);
   scroll-behavior: smooth;
 }
+.hide-scroll {
+  height: 100vh;
+  position: absolute;
+  overflow-y: hidden;
+}
 
 html,
 body {