menu animation

src/shared/ui/List/LinkItem.tsx

@@ -3,48 +3,43 @@ import { cn } from "@/shared/lib";
 import Button from "@mui/material/Button";
 import { Link } from "@tanstack/react-router";
 
-interface LinkItemProps extends React.HTMLAttributes<HTMLLIElement> {
+interface LinkItemProps {
   children?: React.ReactNode;
-  className?: string;
   to: string;
   isSelected?: boolean;
 }
 
 export default function LinkItem({
   children,
-  className,
   to,
   isSelected = false,
-  ...props
 }: LinkItemProps) {
   return (
-    <li className={cn("", className)} {...props}>
+    <Link to={to}>
-      <Link to={to}>
+      <Button
-        <Button
+        variant={isSelected ? "contained" : "text"}
-          variant={isSelected ? "contained" : "text"}
+        sx={{
-          sx={{
+          width: "100%",
-            width: "100%",
+          justifyContent: "start",
-            justifyContent: "start",
+          textTransform: "none",
-            textTransform: "none",
+          fontWeight: "semibold",
-            fontWeight: "semibold",
+          color: isSelected ? "white" : "#9B99B0",
-            color: isSelected ? "white" : "#9B99B0",
+          borderRadius: "6px",
-            borderRadius: "6px",
+          boxShadow: "none",
+          paddingInline: "16px",
+          ":hover": {
             boxShadow: "none",
-            paddingInline: "16px",
+          },
-            ":hover": {
+        }}
-              boxShadow: "none",
+      >
-            },
+        <span
-          }}
+          className={cn(
-        >
+            "mr-2 h-2 w-2 rounded-full bg-neutral",
-          <span
+            isSelected && "bg-white",
-            className={cn(
+          )}
-              "bg-neutral mr-2 h-2 w-2 rounded-full",
+        />
-              isSelected && "bg-white",
+        <span>{children}</span>
-            )}
+      </Button>
-          />
+    </Link>
-          <span>{children}</span>
-        </Button>
-      </Link>
-    </li>
   );
 }

src/shared/ui/List/Root.tsx

@@ -1,9 +1,28 @@
+import { Children } from "react";
 import { cn } from "@/shared/lib";
+import { motion, AnimatePresence } from "framer-motion";
 
-interface RootProps extends React.HTMLAttributes<HTMLUListElement> {
+interface RootProps {
+  children?: React.ReactNode;
   className?: string;
 }
 
-export default function Root({ className, ...props }: RootProps) {
+export default function Root({ children, className }: RootProps) {
-  return <ul className={cn("", className)} {...props} />;
+  return (
+    <motion.ul className={cn("", className)}>
+      <AnimatePresence initial={false}>
+        {Children.map(children, (child, index) => (
+          <motion.li
+            layout
+            key={index}
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: "auto" }}
+            exit={{ opacity: 0, height: 0 }}
+          >
+            {child}
+          </motion.li>
+        ))}
+      </AnimatePresence>
+    </motion.ul>
+  );
 }