feat(settings): more specific notification handling, and put menu in query to allow user to go back in history to go back in menus

app/composables/useMenuAnimation.ts

@@ -1,33 +1,49 @@
 import gsap from "gsap";
 
-export const useMenuAnimation = (isOpen: Ref<boolean>) => {
-  const animation = reactive({
+export const useMenuAnimation = (key: string, isOpen: Ref<boolean>) => {
+  const animation = useState(`animation-${key}`, () => ({
     playing: false,
     stage1Offset: 48,
     stage2Offset: 48,
-  });
+  }));
 
   watch(isOpen, (current, previous) => {
     const duration = 0.1;
     const timeline = gsap.timeline({
       onStart: () => {
-        animation.playing = true;
+        animation.value.playing = true;
       },
       onComplete: () => {
-        animation.playing = false;
+        animation.value.playing = false;
       },
     });
 
     if (current === true && previous === false) {
       timeline
-        .fromTo(animation, { stage1Offset: 48 }, { stage1Offset: 0, duration })
-        .fromTo(animation, { stage2Offset: 48 }, { stage2Offset: 0, duration });
+        .fromTo(
+          animation.value,
+          { stage1Offset: 48 },
+          { stage1Offset: 0, duration },
+        )
+        .fromTo(
+          animation.value,
+          { stage2Offset: 48 },
+          { stage2Offset: 0, duration },
+        );
     } else if (current === false && previous === true) {
       timeline
-        .fromTo(animation, { stage2Offset: 0 }, { stage2Offset: 48, duration })
-        .fromTo(animation, { stage1Offset: 0 }, { stage1Offset: 48, duration });
+        .fromTo(
+          animation.value,
+          { stage2Offset: 0 },
+          { stage2Offset: 48, duration },
+        )
+        .fromTo(
+          animation.value,
+          { stage1Offset: 0 },
+          { stage1Offset: 48, duration },
+        );
     }
   });
 
-  return animation;
+  return animation.value;
 };