feat(VAppBar): add hide on scroll feature

gitsindonesia · Feb 1, 2023 · 180b0fb · 180b0fb
1 parent 74300ee
commit 180b0fb
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 0 deletions.
diff --git a/docs/components/app-bar.md b/docs/components/app-bar.md
@@ -230,6 +230,24 @@ You can also change the size of shadow by setting the value of `elevate-on-scrol
 </template>
 ```
 
+## Hide on Scroll
+
+- **prop**: `hide-on-scroll`
+- **type**: `boolean`
+- **default**: `false`
+
+Use `hide-on-scroll` prop to hide app-bar when user scroll the page.
+
+<LivePreview src="components-appbar--elevate-on-scroll" >
+
+```vue
+<template>
+  <VAppBar fixed hide-on-scroll transition="slide-down"> Brand </VAppBar>
+</template>
+```
+
+</LivePreview>
+
 ## Props
 
 | Name                                    | Type                                               | Default   |
@@ -243,6 +261,7 @@ You can also change the size of shadow by setting the value of `elevate-on-scrol
 | [bordered](#bordered)                   | `boolean`                                          | `false`   |
 | [transition](#transition)               | `string`                                           | `fade`    |
 | [elevate-on-scroll](#elevate-on-scroll) | `boolean \| string`                                | `false`   |
+| [hide-on-scroll](#hide-on-scroll)       | `boolean`                                          | `false`   |
 
 ## Methods
 

diff --git a/packages/app-bar/src/VAppBar.stories.ts b/packages/app-bar/src/VAppBar.stories.ts
@@ -379,3 +379,14 @@ export const ElevateOnScroll: Story<{}> = () => ({
   </main>
 `,
 });
+
+export const HideOnScroll: Story<{}> = () => ({
+  components: {VAppBar},
+  template: `
+  <main class="mt-5 h-screen bg-gray-50 text-white">
+    <VAppBar fixed hide-on-scroll transition="slide-down">
+      AppBar Hide On Scroll
+    </VAppBar>
+  </main>
+`,
+});
diff --git a/packages/app-bar/src/VAppBar.vue b/packages/app-bar/src/VAppBar.vue
@@ -59,6 +59,10 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
+  hideOnScroll: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit =
@@ -117,6 +121,25 @@ const shadowClass = computed(() => {
 
   return getShadowClass(props.shadow);
 });
+
+// hide on scroll
+if (props.hideOnScroll) {
+  const handleScroll = () => {
+    if (window.scrollY > props.scrollDistance) {
+      isOpen.value = false;
+    } else {
+      isOpen.value = true;
+    }
+  };
+
+  onMounted(() => {
+    window.addEventListener('scroll', handleScroll);
+  });
+
+  onBeforeUnmount(() => {
+    window.removeEventListener('scroll', handleScroll);
+  });
+}
 </script>
 
 <template>