From 7da97550289f134df01cc1937d10e7c03d1e2696 Mon Sep 17 00:00:00 2001
From: aumetra <aumetra@cryptolab.net>
Date: Thu, 12 Oct 2023 23:09:07 +0200
Subject: [PATCH] create glitchedelement wrapper that respects the reduced
 motion directive

---
 kitsune-fe/src/components/GlitchedElement.vue | 19 +++++++++++++++++++
 kitsune-fe/src/components/NavBarLink.vue      |  2 +-
 kitsune-fe/src/views/NotFound.vue             |  2 +-
 3 files changed, 21 insertions(+), 2 deletions(-)
 create mode 100644 kitsune-fe/src/components/GlitchedElement.vue

diff --git a/kitsune-fe/src/components/GlitchedElement.vue b/kitsune-fe/src/components/GlitchedElement.vue
new file mode 100644
index 000000000..ac02d8cfa
--- /dev/null
+++ b/kitsune-fe/src/components/GlitchedElement.vue
@@ -0,0 +1,19 @@
+<template>
+  <slot v-if="reduceMotion" />
+
+  <GlitchedElement v-else :options="options">
+    <slot />
+  </GlitchedElement>
+</template>
+
+<script lang="ts" setup>
+  import { usePreferredReducedMotion } from '@vueuse/core';
+
+  import { computed } from 'vue';
+  import { GlitchedElement } from 'vue-powerglitch';
+
+  defineProps<{ options?: object }>();
+
+  const preferredReducedMotion = usePreferredReducedMotion();
+  const reduceMotion = computed(() => preferredReducedMotion.value == 'reduce');
+</script>
diff --git a/kitsune-fe/src/components/NavBarLink.vue b/kitsune-fe/src/components/NavBarLink.vue
index 444e7a099..a5d323ab7 100644
--- a/kitsune-fe/src/components/NavBarLink.vue
+++ b/kitsune-fe/src/components/NavBarLink.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { GlitchedElement } from 'vue-powerglitch';
+  import GlitchedElement from './GlitchedElement.vue';
 
   defineProps<{
     class?: string;
diff --git a/kitsune-fe/src/views/NotFound.vue b/kitsune-fe/src/views/NotFound.vue
index 8ffa4d22f..3c1131208 100644
--- a/kitsune-fe/src/views/NotFound.vue
+++ b/kitsune-fe/src/views/NotFound.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { GlitchedElement } from 'vue-powerglitch';
+  import GlitchedElement from '../components/GlitchedElement.vue';
 </script>
 
 <style scoped lang="scss">