update 5 files

src/Views/Home/Main/index.js

@@ -8,7 +8,7 @@ function Main({ activeComponent }) {
   return (
     <div className="lg:flex lg:flex-col lg:w-5/6 lg:h-full border-r border-gray-200 ">
       <header className="w-full flex flex-row items-center h-16 px-1 py-4 bg-gray-700"></header>
-      <section className="w-full lg:overflow-y-scroll py-5 px-10 flex-1 flex-col bg-[#f5f5f5]">
+      <section className="w-full lg:overflow-y-scroll py-5 px-10 flex-1 flex-col bg-[#f5f5f5] overflow-y-auto scrollYDesign">
         <h1 className="font-sansbold text-3xl text-left">
           {activeComponent?.content?.name}
         </h1>

src/Views/Home/Sidebar/index.js

@@ -4,7 +4,7 @@ import { components } from "../../../redux/actions";
 
 function Sidebar({ list, setActive }) {
   return (
-    <div className="lg:flex lg:flex-col lg:w-1/6 lg:h-full ltr bg-[#f5f5f5]">
+    <div className="lg:flex lg:flex-col lg:w-1/6 lg:h-full ltr bg-[#f5f5f5] overflow-y-auto scrollYDesign">
       <header className="w-full h-16 flex flex-row items-center p-4 bg-gray-600">
         <img
           src={"https://barnamenegar.ir/static/media/white logo 2.7ffbddbc.svg"}
@@ -12,7 +12,7 @@ function Sidebar({ list, setActive }) {
           className="w-full"
         />
       </header>
-      <ul className="w-full max-h-full flex-1 p-0 m-0 border-r border-gray-600 divided divide-y divide-gray-900 overflow-y-scroll  list-none">
+      <ul className="w-full max-h-full flex-1 p-0 m-0 border-r border-gray-600 divided divide-y divide-gray-900 list-none">
         {list
           .sort((a, b) => (a.name > b.name ? 1 : -1))
           .map((material, index) => (

src/components/CourseList/index.js

@@ -4,7 +4,7 @@ const CourseChapter = ({ courseTitle, lessonName, grade, chapters }) => {
   const [selectedLesson, setSelectedLesson] = useState(null);
 
   return (
-    <div className="relative p-4 bg-[#196EC033] rounded">
+    <div className="max-h-[444px] relative p-4 bg-[#196EC033] rounded overflow-y-auto scrollYDesign">
       {/* top */}
       <div className="flex flex-row items-center justify-between">
         <h2 className="text-blue-800 text-base">{courseTitle}</h2>
@@ -17,7 +17,7 @@ const CourseChapter = ({ courseTitle, lessonName, grade, chapters }) => {
       <div className="border-b border-blue-300 my-5"></div>
       {/* course title */}
       {chapters.map((chapter, index) => (
-        <div className="flex flex-col" key={index}>
+        <div className="flex flex-col mt-4" key={index}>
           <div className="bg-blue-600 rounded-sm p-4 flex flex-row items-center justify-between">
             <p className="text-sm text-white">{chapter.title}</p>
             <span className="text-sm text-white">{chapter.duration}</span>
@@ -128,5 +128,89 @@ CourseChapter.defaultProps = {
         },
       ],
     },
+    {
+      title: "فصل اول: مباحث جوشش مواد مذاب در مرکز",
+      duration: "2:30:13",
+      lessons: [
+        {
+          title: "آیا گوگل از ما دزدی میکند؟",
+          duration: "14:30",
+          play: "پخش",
+          passed: true,
+        },
+        {
+          title: "چگونگی ساخت نیروگاه های برقی",
+          duration: "22:31",
+          play: "در حال پخش",
+          passed: true,
+        },
+        {
+          title: "آیا از اینترنت می توان درآمد داشت؟",
+          duration: "10:09",
+          play: "نمایش",
+          passed: false,
+        },
+        {
+          title: "زمین سبز و آسمان آبی",
+          duration: "56:09",
+          play: "نمایش",
+          passed: false,
+        },
+      ],
+    },
+    {
+      title: "فصل اول: مباحث جوشش مواد مذاب در مرکز",
+      duration: "2:30:13",
+      lessons: [
+        {
+          title: "آیا گوگل از ما دزدی میکند؟",
+          duration: "14:30",
+          play: "پخش",
+          passed: true,
+        },
+        {
+          title: "چگونگی ساخت نیروگاه های برقی",
+          duration: "22:31",
+          play: "در حال پخش",
+          passed: true,
+        },
+        {
+          title: "آیا از اینترنت می توان درآمد داشت؟",
+          duration: "10:09",
+          play: "نمایش",
+          passed: true,
+        },
+        {
+          title: "زمین سبز و آسمان آبی",
+          duration: "56:09",
+          play: "نمایش",
+          passed: true,
+        },
+        {
+          title: "آیا گوگل از ما دزدی میکند؟",
+          duration: "14:30",
+          play: "پخش",
+          passed: true,
+        },
+        {
+          title: "چگونگی ساخت نیروگاه های برقی",
+          duration: "22:31",
+          play: "در حال پخش",
+          passed: true,
+        },
+        {
+          title: "آیا از اینترنت می توان درآمد داشت؟",
+          duration: "10:09",
+          play: "نمایش",
+          passed: true,
+        },
+        {
+          title: "زمین سبز و آسمان آبی",
+          duration: "56:09",
+          play: "نمایش",
+          passed: false,
+        },
+      ],
+    },
   ],
 };

src/index.scss

@@ -473,7 +473,7 @@ $red: #e92424;
 
 .scrollYDesign::-webkit-scrollbar-thumb {
   border-radius: 10px;
-  background-color: #b9d1f3;
+  background-color: #80b2f7;
 }
 
 .scrollYDesign::-webkit-scrollbar-track {