fix: improve context menu animation

Author: ArianHamdi

src/animations/variants.ts

@@ -12,3 +12,21 @@ export const pageVariants = {
     x: '-100vw',
   },
 };
+
+export const menuVariants = {
+  open: {
+    opacity: 1,
+    scale: 1,
+    y: 100,
+    transition: {
+      opacity: { duration: 0.1 },
+      scale: { type: 'spring', stiffness: 260, damping: 20 },
+    },
+  },
+  closed: {
+    y: 100,
+    opacity: 0,
+    scale: 0.95,
+    transition: { duration: 0.1 },
+  },
+};

src/components/ContextMenu/ContextMenu.module.scss

@@ -7,9 +7,9 @@
     position: absolute;
     bottom: 0;
     right: 0;
-    width: 200px;
+    width: 150px;
     padding: 8px 0;
     border-radius: 8px;
     background-color: $color-bg;
-    transform: translateY(100%);
+    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
 }

src/components/ContextMenu/ContextMenu.tsx

@@ -3,6 +3,8 @@ import styles from './ContextMenu.module.scss';
 import { useOutsideClickRef } from 'rooks';
 import DropdownToggle from './ContextMenuToggle';
 import type { IContextMenuItem } from './ContextMenuItem';
+import { AnimatePresence, motion } from 'framer-motion';
+import { menuVariants } from '@/animations/variants';
 
 interface IContextMenu {
   children: ReactElement<IContextMenuItem> | ReactElement<IContextMenuItem>[];
@@ -20,7 +22,19 @@ const ContextMenu = ({ children }: IContextMenu) => {
   return (
     <div className={styles.menu} ref={ref}>
       <DropdownToggle onClick={toggleHandler} />
-      {isOpen && <ul className={styles.list}>{children}</ul>}
+      <AnimatePresence>
+        {isOpen && (
+          <motion.ul
+            className={styles.list}
+            initial='closed'
+            animate='open'
+            exit='closed'
+            variants={menuVariants}
+          >
+            {children}
+          </motion.ul>
+        )}
+      </AnimatePresence>
     </div>
   );
 };

src/components/ContextMenu/ContextMenuItem/ContextMenuItem.module.scss

@@ -1,14 +1,14 @@
 .item {
     display: flex;
     align-items: center;
-    padding: 4px 16px;
+    padding: 8px 16px;
     cursor: pointer;
 
     &:hover {
-        background-color: $color-bg;
+        background-color: $color-hover;;
     }
 
-    &[data-variant='danger'] {
+    &[data-variant='info'] {
         color: $color-text;
         fill: $color-text;
     }
@@ -20,5 +20,5 @@
 }
 
 .label {
-    margin-left: 20px;
+    margin-left: 8px;
 }

src/components/ContextMenu/ContextMenuToggle/ContextMenuToggle.module.scss

@@ -1,5 +1,6 @@
 .toggle {
-    background-color: red;
     background-color: transparent;
     border: none;
-}
+    cursor: pointer;
+    fill:$color-text;
+}

src/styles/_theme.scss

@@ -22,7 +22,7 @@
         --color-button-text: #ffffff;
 
         /* Other */
-        --color-hover: #f1f1f1;
+        --color-hover: #f1f1f1d9;
     }
 
     &[data-theme='dark'] {