How to Create Multi Level Sidebar Animation in React ?

//App.js
import React, { useState } from "react";
import { motion } from "framer-motion";
import "./App.css";

const dataSide = [
	{
		id: 1,
		title: "Home",
		subItems: [],
	},
	{
		id: 2,
		title: "Topics",
		subItems: [
			{ id: 21, title: "React" },
			{ id: 22, title: "JavaScript" },
			{ id: 23, title: "CSS" },
		],
	},
	{
		id: 3,
		title: "About",
		subItems: [
			{ id: 31, title: "GeeksforGeeks" },
			{ id: 32, title: "Team" },
		],
	},
	{
		id: 4,
		title: "More",
		subItems: [
			{ id: 41, title: "Animations" },
			{ id: 42, title: "Components" },
		],
	},
];

const App = () => {
	const [item_Select, set_Item_Select] = useState(null);
	const [sideBar_Open, set_SideBar_Open] = useState(false);
	const dataClickFn = (i) => {
		set_Item_Select(i.id === item_Select?.id ? null : i);
	};
	const sideBarFn = () => {
		set_SideBar_Open(!sideBar_Open);
	};
	return (
		<div className={`app ${sideBar_Open ? "sidebar-open" : ""}`}>
			<div className="sidebar">
				{sideBar_Open && (
					<>
						<h1 className="logo">GeeksforGeeks</h1>
						<motion.div
							className="approach-title"
							animate={{ opacity: 1, y: 0 }}
							initial={{ opacity: 0, y: -20 }}
						>
							<h3>Approach 1: Using Framer Motion</h3>
						</motion.div>
						{dataSide.map((item) => (
							<motion.div
								key={item.id}
								className={`sidebar-item ${
									item_Select?.id === item.id ? "active" : ""
								}`}
								onClick={() => dataClickFn(item)}
								whileHover={{ scale: 1.1 }}
							>
								{item.title}
								{item.subItems.length > 0 && (
									<motion.div
										initial={false}
										animate={{
											height:
												item_Select?.id === item.id
													? "auto"
													: 0,
										}}
										className="sub-items"
									>
										{item.subItems.map((subItem) => (
											<motion.div
												key={subItem.id}
												className="sub-item"
											>
												{subItem.title}
											</motion.div>
										))}
									</motion.div>
								)}
							</motion.div>
						))}
					</>
				)}
				<motion.button
					className="toggle-button"
					whileHover={{ scale: 1.1 }}
					onClick={sideBarFn}
				>
					{sideBar_Open ? "Close Sidebar" : "Open Sidebar"}
				</motion.button>
			</div>
			<div className="content">
				<motion.h1
					className="content-title"
					animate={{ opacity: 1, y: 0 }}
					initial={{ opacity: 0, y: -20 }}
				>
					Welcome to GeeksforGeeks
				</motion.h1>
				<motion.h3
					className="content-subtitle"
					animate={{ opacity: 1, y: 0 }}
					initial={{ opacity: 0, y: -20 }}
				>
					Explore our amazing content
				</motion.h3>
			</div>
		</div>
	);
};
export default App;

// App.js
import React, { useState } from "react";
import { FaHome, FaBook, FaLaptop, FaBookOpen, FaTools } from "react-icons/fa";
import { BsFillCaretDownFill } from "react-icons/bs";
import "./App.css";
const SidebarItem = ({ item, onClick }) => {
	const [isOpen, setIsOpen] = useState(false);
	const itemClickFn = () => {
		setIsOpen(!isOpen);
		if (onClick) {
			onClick(item);
		}
	};
	const getIcon = (label) => {
		const iconMap = {
			Home: <FaHome />,
			Topics: <FaBook />,
			Languages: <FaLaptop />,
			About: <FaBookOpen />,
			Frameworks: <FaTools />,
		};
		return iconMap[label] || <BsFillCaretDownFill />;
	};
	return (
		<div
			className={`sidebar-item ${isOpen ? "open" : ""}`}
			onClick={itemClickFn}
		>
			<span className="icon">{getIcon(item.label)}</span>
			<span>{item.label}</span>
			{isOpen && item.children && (
				<div className="sub-menu">
					{item.children.map((child, index) => (
						<SidebarItem key={index} item={child} />
					))}
				</div>
			)}
		</div>
	);
};
const App = () => {
	const data = [
		{ label: "Home" },
		{
			label: "Topics",
			children: [
				{ label: "React" },
				{ label: "JavaScript" },
				{ label: "CSS" },
			],
		},
		{
			label: "Languages",
			children: [
				{
					label: "Front-end",
					children: [
						{ label: "HTML" },
						{ label: "CSS" },
						{ label: "JavaScript" },
					],
				},
				{
					label: "Back-end",
					children: [
						{ label: "Node.js" },
						{ label: "Python" },
						{ label: "Ruby" },
					],
				},
			],
		},
		{ label: "About" },
		{
			label: "Frameworks",
			children: [
				{ label: "React" },
				{ label: "Angular" },
				{ label: "Vue.js" },
			],
		},
	];
	return (
		<div className="app">
			<div className="sidebar">
				{data.map((item, index) => (
					<SidebarItem key={index} item={item} />
				))}
			</div>
			<div className="content">
				<h1>GeeksforGeeks</h1>
				<h3>Approach 2: Using CSS Only</h3>
			</div>
		</div>
	);
};
export default App;