create glitchedelement wrapper that respects the reduced motion direc…

…tive

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>

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;

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">