collect-system/apps/web/src/components/models/course/detail/CourseDetailLayout.tsx

import { motion } from "framer-motion";
import { useContext, useState } from "react";
import { CourseDetailContext } from "./CourseDetailContext";

import CourseDetailDisplayArea from "./CourseDetailDisplayArea";
import { CourseSyllabus } from "./CourseSyllabus/CourseSyllabus";
import { CourseDetailHeader } from "./CourseDetailHeader/CourseDetailHeader";

export default function CourseDetailLayout() {
	const {
		course,

		setSelectedLectureId,
	} = useContext(CourseDetailContext);

	const handleLectureClick = (lectureId: string) => {
		setSelectedLectureId(lectureId);
	};
	const [isSyllabusOpen, setIsSyllabusOpen] = useState(true);
	return (
		<div className="relative">

			<div className="pt-12 px-32">
				{" "}
				{/* 添加这个包装 div */}
				<motion.div
					initial={{
						width: "75%",
					}}
					animate={{
						width: isSyllabusOpen ? "75%" : "100%",
					}}
					transition={{ type: "spring", stiffness: 300, damping: 30 }}
					className="relative">
					<CourseDetailDisplayArea />
				</motion.div>
				{/* 课程大纲侧边栏 */}
				<CourseSyllabus
					sections={course?.sections || []}
					onLectureClick={handleLectureClick}
					isOpen={isSyllabusOpen}
					onToggle={() => setIsSyllabusOpen(!isSyllabusOpen)}
				/>
			</div>
		</div>
	);
}