s1

app/components/KnowledgeQuests.tsx

@@ -40,27 +40,22 @@ export default function KnowledgeQuests() {
       }
     return(
         <section className=''>
-            <div className=''>
+          <h2 className='text-[20px] font-[700] inline-flex p-6'>Knowledge Quests <img src="/assets/right-arrow.svg" alt="" /></h2>   
-                <div className=''>
+          <div className='flex flex-col gap-6'>
-                    <h2 className='text-[20px] font-[700] inline-flex p-6'>Knowledge Quests <img src="../../assets/right-arrow.svg" alt="" /></h2>   
+              {knowledgeData.map(data => (
-                    <div className='flex flex-col gap-6'>
+                  <div key={data.id} className='flex flex-row justify-between px-6 place-items-center'>
-                        {knowledgeData.map(data => (
+                      <div className='flex flex-row justify-between gap-6'>
-                            <div key={data.id} className='flex flex-row justify-between px-6 place-items-center'>
+                          <img src={data.img} alt="" />
-                                <div className='flex flex-row justify-between gap-6'>
+                          <div className='flex flex-col space-y-3'>
-                                    <img src={data.img} alt="" />
+                            <h2 className='text-[16px] font-[700] text-[#000]'>{data.title}</h2>
-                                    <div className='flex flex-col space-y-3'>
+                            <p className='text-[14px] font-[600] text-[#525252]'>{data.challenge}</p>
-                                      <h2 className='text-[16px] font-[700] text-[#000]'>{data.title}</h2>
+                            <p className='text-[14px] font-[600] text-[#9D9D9D]'>{data.question}</p>
-                                      <p className='text-[14px] font-[600] text-[#525252]'>{data.challenge}</p>
+                        </div>
-                                      <p className='text-[14px] font-[600] text-[#9D9D9D]'>{data.question}</p>
+                      </div>
-                                  </div>
+                      <button className='bg-[#000] text-[#FFF] rounded-[8px] px-16 py-3 h-fit text-[18px] font-[600]'>Start</button>
-                                </div>
+                  </div>
-                                <button className='bg-[#000] text-[#FFF] rounded-[8px] px-16 py-3 h-fit text-[18px] font-[600]'>Start</button>
+              ))}
-                            </div>
+          </div>                             
-                        ))}
-                    </div>                             
-                </div>
-               
-            </div>
         </section> 
     )
 }

app/components/LeftSideMenuItems.tsx

@@ -0,0 +1,136 @@
+import React, {useState} from 'react';
+import {Layout, Menu, theme, Button, Modal, MenuProps, Breadcrumb, Dropdown, Space} from 'antd';
+import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, RightOutlined} from '@ant-design/icons';
+import '../../public/assets/left_side_nav.css';
+import AdministrationIcon from '~/components/customIcon/AdministrationIcon';
+import MyCoursesIcon from '~/components/customIcon/MyCoursesIcon';
+import ExaminationIcon from '~/components/customIcon/ExaminationIcon';
+import CommunityIcon from '~/components/customIcon/CommunityIcon';
+import NotificationIcon from '~/components/customIcon/NotificationIcon';
+
+
+
+const items2: MenuProps['items'] = [
+    {
+        key: 'subsd1',
+        icon: <AdministrationIcon />,
+        label: (<p className='py-2.5'>&nbsp; Administration</p>),
+        children: [
+            {
+            key: '1sd',
+            label: (<a href='#'>Class Schedules</a>),
+            },
+            {
+            key: '2sd',
+            label: (<a href='#'>Classmate Directory</a>),
+            },
+            {
+            key: '3sd',
+            label: (<a href='#'>Qualifications</a>),
+            },
+        ],
+    },
+    {
+        key: 'subsd2',
+        icon: <MyCoursesIcon />,
+        label: (<p className='py-2.5'>&nbsp; My Courses</p>),
+        children: [
+            {
+            key: '4sd',
+            label: (<a href='#'>Graduate Program</a>),
+            },
+            {
+            key: '5sd',
+            label: (<a href='#'>Post-Graduate Program</a>),
+            },
+        ],
+    },
+    {
+        key: 'subsd3',
+        icon: <ExaminationIcon />,
+        label: (<p className='py-2.5'>&nbsp; Examinations</p>),
+        children: [
+            {
+            key: '6sd',
+            label: (<a href='#'>Exam Scheduled</a>),
+            },
+            {
+            key: '7sd',
+            label: (<a href='#'>Upcoming Exam</a>),
+            },
+            {
+            key: '8sd',
+            label: (<a href='#'>Passed Exam</a>),
+            },
+        ],
+    },
+    {
+        key: 'subsd4',
+        icon: <CommunityIcon />,
+        label: (<p className='py-2.5'>&nbsp; Community</p>),
+        children: [
+        {
+            key: '9sd',
+            label: (<a href='#'>Exam Scheduled</a>),
+        },
+        {
+            key: '10sd',
+            label: (<a href='#'>Upcoming Exam</a>),
+        },
+        {
+            key: '11sd',
+            label: (<a href='#'>Passed Exam</a>),
+        },
+        ],
+    },
+    {
+        key: 'subsd5',
+        icon: <NotificationIcon />,
+        label: (<p className='py-2.5'>&nbsp; Notifications</p>),
+        children: [
+            {
+            key: '12sd',
+            label: (<a href='#'>Exam Scheduled</a>),
+            },
+            {
+            key: '13sd',
+            label: (<a href='#'>Upcoming Exam</a>),
+            },
+            {
+            key: '14sd',
+            label: (<a href='#'>Passed Exam</a>),
+            },
+        ],
+    },
+    // getItem('Files', '9', <FileOutlined />),
+    {
+        key: 'grp',
+        label: '',
+        type: 'group',
+        style: { marginTop: '100px' },
+        children: [
+        {   
+            key: '15sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, 
+            icon: React.createElement(SettingOutlined, { style: { color: '#000' } }), 
+            label: (<h2 className='text-[18px] font-[700] text-[#000]'>Settings</h2>)
+        },
+        {
+            key: '16sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'},
+            icon: React.createElement(QuestionCircleOutlined, { style: { color: '#000' } }),
+            label: (<h2 className='text-[18px] font-[700] text-[#000]'>Help & Support</h2>)
+        },
+        {
+            key: '17sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'},
+            icon: React.createElement(LogoutOutlined, { style: { color: '#000' } }),
+            label: (<h2 className='text-[18px] font-[700] text-[#000]'>Logout</h2>)
+        },     
+        ],
+    },
+];
+
+const LeftSideMenu: React.FC = () => {
+    return(
+        <Menu className='custom-menu' mode="inline"  style={{ height: '100%', borderRight: 0, paddingTop: 30, background: 'transparent'}} items={items2} />
+    )
+}
+export default LeftSideMenu;

app/components/StartCourse.tsx

@@ -0,0 +1,124 @@
+import React, { useState } from 'react';
+import { Timeline } from 'antd';
+interface MaterialItem {
+    id: number;
+    material: number;
+    title: string;
+    type: string;
+    time: string;
+    date: string;
+    source: string;
+}
+const materialData: MaterialItem[] = [
+  {
+    id: 1,
+    material: 1,
+    title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+    type: "Video",
+    time: "30 mins",
+    date: "28-01-2024",
+    source: "https://videos.pexels.com/video-files/3195394/3195394-uhd_2560_1440_25fps.mp4"
+  },
+  {
+    id: 2,
+    material: 1,
+    title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+    type: "Video",
+    time: "30 mins",
+    date: "28-01-2024",
+    source: "https://videos.pexels.com/video-files/3195394/3195394-uhd_2560_1440_25fps.mp4"
+  },
+  {
+    id: 3,
+    material: 1,
+    title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+    type: "Reading Material",
+    time: "8 mins",
+    date: "28-01-2024",
+    source: "https://pdfobject.com/pdf/sample.pdf"
+  },
+  {
+    id: 4,
+    material: 1,
+    title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+    type: "MCQ",
+    time: "5 mins",
+    date: "28-01-2024",
+    source: "https://videos.pexels.com/video-files/3195394/3195394-uhd_2560_1440_25fps.mp4"
+  },
+  {
+    id: 5,
+    material: 1,
+    title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+    type: "Video",
+    time: "30 mins",
+    date: "28-01-2024",
+    source: "https://videos.pexels.com/video-files/3195394/3195394-uhd_2560_1440_25fps.mp4"
+  },
+  {
+    id: 6,
+    material: 1,
+    title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+    type: "Video",
+    time: "30 mins",
+    date: "28-01-2024",
+    source: "https://videos.pexels.com/video-files/3195394/3195394-uhd_2560_1440_25fps.mp4"
+  }
+];
+
+const TimelineComponent = () => {
+  const [selectedItem, setSelectedItem] = useState(materialData[0]);
+
+  const handleItemClick = (item : MaterialItem) => {
+    setSelectedItem(item);
+  };
+
+  const timelineItems = materialData.map((item) => ({
+    children: (
+      <div className='p-2' onClick={() => handleItemClick(item)} style={{ cursor: 'pointer', backgroundColor: item.id === selectedItem.id ? '#FFF4EA' : '#FFF'}}>
+        <p className='text-[12px] font-[600] text-[#6E6E6E]'><span>Material {item.material} </span> | <span>{item.date} </span></p>
+        <h2 className='text-[18px] font-[700]'>{item.title}</h2>
+        <p className='text-[14px] font-[600] text-[#EF7A0C]'><span>{item.type}</span> | <span>{item.time}</span></p>
+      </div>
+    ),
+    color: item.id === selectedItem.id ? '#EF7A0C' : '#CFCFCF',
+    dot: item.id === selectedItem.id
+      ? <div className='relative inline-block'>
+            <span className='' style={{ border: '4px solid #EF7A0C', borderRadius: '50%', display: 'inline-block', width: 32, height: 32 }}></span>
+            <span className='absolute inset-0 m-auto mt-[10px] h-10 w-10' style={{ backgroundColor: '#EF7A0C', borderRadius: '50%', display: 'inline-block', width: 12, height: 12 }}></span> 
+        </div>
+      : null,
+  }));
+
+  return (
+    <div>
+        <section className='container mx-auto px-4'>
+            <div className='grid grid-cols-1 md:grid-cols-7'>
+                <div className='md:col-span-2 mt-4'>
+                    <Timeline items={timelineItems} />
+                </div>
+                <div className='md:col-span-5'>
+                    <div>
+                        {selectedItem.type === 'Video' && (
+                            <video autoPlay={true} controls src={selectedItem.source} width="100%" />
+                        )}
+                        {selectedItem.type === 'Reading Material' && (
+                            <iframe src={selectedItem.source} width="100%" height="500px" />
+                        )}
+                        {selectedItem.type === 'MCQ' && (
+                            <div>
+                            {/* Render MCQ content here */}
+                            </div>
+                        )}
+                        <p className='text-[12px] font-[600] text-[#6E6E6E]'><span>Material {selectedItem.material} </span> | <span>{selectedItem.date} </span></p>
+                        <h2 className='text-[18px] font-[700]'>{selectedItem.title}</h2>
+                        <p className='text-[14px] font-[600] text-[#EF7A0C]'><span>{selectedItem.type}</span> | <span>{selectedItem.time}</span></p>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+  );
+};
+
+export default TimelineComponent;

app/components/TheoryCourses.tsx

@@ -0,0 +1,133 @@
+type TheoryData = {
+    id: number;
+    module: number;
+    status: number;
+    time: number;
+    access: number;
+    title: string;
+    description: string;
+    img: string;
+    total_marks: string;
+};
+
+let theoryData: TheoryData[] = [
+    {
+      id: 1,
+      module: 1,
+      status: 2,
+      time: 4,
+      access: 1,
+      title: "Life History of Dr. Maria Montessori",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+      img: "/assets/image1.jpg",
+      total_marks: "50"
+    },
+    {
+      id: 2,
+      module: 2,
+      status: 1,
+      time: 4,
+      access: 1,
+      title: "Introduction to Montessori Methods",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+      img: "/assets/image2.jpg",
+      total_marks: "50"
+    },
+    {
+      id: 3,
+      module: 3,
+      status: 0,
+      time: 4,
+      access: 0,
+      title: "Exercises in Practical Life",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+      img: "/assets/image3.jpg",
+      total_marks: "50"
+    },
+    {
+      id: 1,
+      module: 1,
+      status: 0,
+      time: 4,
+      access: 0,
+      title: "Life History of Dr. Maria Montessori",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+      img: "/assets/image1.jpg",
+      total_marks: "50"
+    },
+    {
+      id: 2,
+      module: 2,
+      status: 0,
+      time: 4,
+      access: 0,
+      title: "Introduction to Montessori Methods",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+      img: "/assets/image2.jpg",
+      total_marks: "50"
+    },
+    {
+      id: 3,
+      module: 3,
+      status: 0,
+      time: 4,
+      access: 0,
+      title: "Exercises in Practical Life",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+      img: "/assets/image3.jpg",
+      total_marks: "50"
+    }
+];
+
+export default function CourseTheory() {
+    const getStatusText = (status: number): string => {
+        if (status === 2) return "<p style='color: #218B32; font-weight: 600; font-size: 18px; display: inline-flex;'><img style='margin-right: 8px;' src='/assets/green-tick.svg' />Finished</p>";
+        if (status === 1) return "<p style='color: #EF7A0C; font-weight: 600; font-size: 18px' >40% Completed</p>";
+        if (status === 0) return " ";
+        return "";
+    }
+
+    return(
+        <div>
+            <section className="container mx-auto p-4 px-10">
+                <div className="flex flex-row justify-between place-items-center rounded-[10px]" style={{background: 'linear-gradient(90.65deg, #4377C6 0%, #3B70C0 100%)'}}>
+                    <div className="flex flex-row h-[107px] place-items-center p-4 space-x-6">
+                        <div className="relative inline-block">
+                            <img className="h-[81px] w-[137px] rounded-[10px]" src="/assets/image3.jpg" alt="" />
+                            <button className="absolute inset-0 m-auto h-10 w-10">
+                                <img  src="/assets/play.svg" alt="" />
+                            </button>
+                        </div>
+                        <div className="">
+                            <h2 className="tet-[18px] font-[700] text-[#FFF] w-[328px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
+                            <p className="text-[14px] font-[600] text-[#EF7A0C]">
+                                <span> Video</span> &nbsp;|&nbsp; 
+                                <span> 30 mins</span>
+                            </p>
+                        </div>
+                    </div>
+                    <div className="pr-4">
+                        <button className="bg-[#FFF] text-[#000] font-[600] px-6 py-2 text-[18px] rounded-[8px]">Continue Learning</button>
+                    </div>
+                </div>
+            </section>
+            <section className="container mx-auto px-4">
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 p-6 gap-10 ">
+                    {
+                        theoryData.map((data, index) => (
+                            <div key={index} className={`border-[1px] border-[#218B32] p-3 rounded-[10px] ${data.access === 0 ? 'contrast-[0.3]' : ''} `}>
+                                <img className="w-full rounded-[8px]" src={data.img} alt="" />
+                                <h2 className="text-[18px] font-[700]">{data.title}</h2>
+                                <p className="text-[14px] font-[700] text-[#EF7A0C] py-2"><span>{data.time} Hours</span> | <span>Net Total Marks {data.total_marks}</span></p>
+                                <p className="text-[14px] font-[500] text-[#6E6E6E] pb-6">{data.description}</p>
+                                <div className="flex flex-row justify-between place-items-center">
+                                <button disabled={data.access === 0} className={`text-[18px] font-[600] bg-[#000] rounded-[8px] px-[50px] py-2 text-[#fff] ${data.access == 0 ? 'cursor-not-allowed' : ''}`}>{data.access === 0 ? 'Locked' : 'View'}</button>                                    <div dangerouslySetInnerHTML={{ __html: getStatusText(data.status) }} />
+                                </div>
+                            </div>
+                        ))
+                    }
+                </div>
+            </section>
+        </div>
+    )
+}

app/routes/ai-quiz.tsx

@@ -36,7 +36,7 @@ function toggleSection() {
 
 export default function Index() {
     const [percent, setPercent] = useState(0);
-    const [secondsLeft, setSecondsLeft] = useState(5);
+    const [secondsLeft, setSecondsLeft] = useState(10);
 
     useEffect(() => {
         const interval = setInterval(() => {
@@ -45,7 +45,7 @@ export default function Index() {
                     clearInterval(interval);
                     return 100;
                 }
-                return Math.round(prevPercent + (100 / 5)); // Round percentage
+                return Math.round(prevPercent + (100 / 10)); // Round percentage
             });
             setSecondsLeft((prevSeconds) => {
                 if (prevSeconds <= 1) {
@@ -76,13 +76,13 @@ export default function Index() {
                         <label className="text-[18px] font-[500] my-4" htmlFor="textToUse">Text to Use</label>
                         <p className="text-[16px] font-[500] text-[#9D9D9D]"><span id="letterLength"></span><span>/2000</span></p>
                     </div>
-                    <textarea onChange={letterCount} name="queryMessage" id="queryMessage" rows="6" maxLength="200" className="focus:outline-none border-[1px] border-[#CFCFCF] rounded-[8px] p-6" placeholder="Enter the topic you’d like to generate a quiz for."></textarea>
+                    <textarea onChange={letterCount} name="queryMessage" id="queryMessage" rows={6} maxLength={2000} className="focus:outline-none border-[1px] border-[#CFCFCF] rounded-[8px] p-6" placeholder="Enter the topic you’d like to generate a quiz for."></textarea>
                 </div>
                 <h2 className="text-[18px] font-[500] my-4">Trending</h2>
                 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                     <div className="border-[1px] border-[#CFCFCF] rounded-[8px]">
                         <div className="bg-[#C5DCFF] rounded-t-[8px] flex justify-center place-items-center">
-                            <img className="p-6" src="../../assets/quiz-logo.svg" alt="" />
+                            <img className="p-6" src="/assets/quiz-logo.svg" alt="" />
                         </div>
                         <div className="flex flex-col justify-center px-3 py-2">
                             <h3 className="text-[14px] font-[500] ">Dr. Marie Montessori Life Journey</h3>
@@ -91,7 +91,7 @@ export default function Index() {
                     </div>
                     <div className="border-[1px] border-[#CFCFCF] rounded-[8px]">
                         <div className="bg-[#E2C5FF] rounded-t-[8px] flex justify-center place-items-center">
-                            <img className="p-6" src="../../assets/quiz-logo.svg" alt="" />
+                            <img className="p-6" src="/assets/quiz-logo.svg" alt="" />
                         </div>
                         <div className="flex flex-col justify-center px-3 py-2">
                             <h3 className="text-[14px] font-[500]">Montessori Methods</h3>
@@ -100,7 +100,7 @@ export default function Index() {
                     </div>
                     <div className="border-[1px] border-[#CFCFCF] rounded-[8px]">
                         <div className="bg-[#FFD0C5] rounded-t-[8px] flex justify-center place-items-center">
-                            <img className="p-6" src="../../assets/quiz-logo.svg" alt="" />
+                            <img className="p-6" src="/assets/quiz-logo.svg" alt="" />
                         </div>
                         <div className="flex flex-col justify-center px-3 py-2">
                             <h3 className="text-[14px] font-[500] ">Practical Methods</h3>
@@ -112,17 +112,17 @@ export default function Index() {
                 <div className="flex flex-col md:flex-row gap-[10px]">
                     <div className="drop-shadow-2xl"> 
                         <button className="inline-flex justify-center place-items-center border-[1px] border-[#CFCFCF] rounded-[8px] px-[20px] py-[12px] text-[16px] font-[500] text-[#525252]">
-                            <img src="../../assets/button-icon.svg" alt="" /> &nbsp; Simplify Questions 
+                            <img src="/assets/button-icon.svg" alt="" /> &nbsp; Simplify Questions 
                         </button>
                     </div>
                     <div className="drop-shadow-2xl"> 
                         <button className="inline-flex justify-center place-items-center border-[1px] border-[#CFCFCF] rounded-[8px] px-[20px] py-[12px] text-[16px] font-[500] text-[#525252]">
-                            <img src="../../assets/button-icon.svg" alt="" /> &nbsp; Similar Topics 
+                            <img src="/assets/button-icon.svg" alt="" /> &nbsp; Similar Topics 
                         </button>
                     </div>
                     <div className="drop-shadow-2xl"> 
                         <button className="inline-flex justify-center place-items-center border-[1px] border-[#CFCFCF] rounded-[8px] px-[20px] py-[12px] text-[16px] font-[500] text-[#525252]">
-                            <img src="../../assets/button-icon.svg" alt="" /> &nbsp; Make it fun & easy 
+                            <img src="/assets/button-icon.svg" alt="" /> &nbsp; Make it fun & easy 
                         </button>
                     </div>
                 </div>
@@ -138,9 +138,9 @@ export default function Index() {
                     <button onClick={toggleSection} className="px-[40px] py-[12px] text-[18px] font-[600] text-[#FFF] rounded-[10px] bg-[#000]">Generate Quiz</button>
                 </div>
             </section>
-            <section id="loadingSection" style={{display: 'none'}} className="container mx-auto max-w-[894px] shadow-xl rounded-xl px-10 py-8 my-8">
+            <section id="loadingSection" style={{display: 'none'}} className="container mx-auto max-w-[894px] shadow-xl rounded-xl px-10 py-8 my-8 mt-[200px]">
                 <div className="flex flex-col justify-center place-items-center my-auto ">
-                    <img src="../../assets/robot.png" alt="" />
+                    <img src="/assets/robot.png" alt="" />
                     <h2 className="text-[24px] font-[500] py-3">Generating Quiz</h2>
                     <p className="text-[14px] font-[400] text-[#525252]">This usually takes <span>{secondsLeft}</span> seconds</p>
                     <div className='w-full sm:w-1/2'>

app/routes/classmate-directory.tsx

@@ -10,6 +10,7 @@ import TopPerformers from '~/components/TopPerformers';
 import ClassmateTutorSection from '~/components/ClassmateTutorSection';
 import {Layout, Menu, theme, Button, Modal, MenuProps, Breadcrumb, Dropdown, Space} from 'antd';
 import '../../public/assets/left_side_nav.css';
+import LeftSideMenu from '~/components/LeftSideMenuItems';
 
 
 const { Content, Sider } = Layout;
@@ -22,123 +23,7 @@ const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({
 type MenuItem = Required<MenuProps>['items'][number];
 
 
-const items2: MenuProps['items'] = [
+
-    {
-        key: 'subsd1',
-        icon: <AdministrationIcon />,
-        label: (<p>&nbsp; Administration</p>),
-        children: [
-            {
-            key: '1sd',
-            label: (<a href='#'>Class Schedules</a>),
-            },
-            {
-            key: '2sd',
-            label: (<a href='#'>Classmate Directory</a>),
-            },
-            {
-            key: '3sd',
-            label: (<a href='#'>Qualifications</a>),
-            },
-        ],
-    },
-    {
-        key: 'subsd2',
-        icon: <MyCoursesIcon />,
-        label: (<p>&nbsp; My Courses</p>),
-        children: [
-            {
-            key: '4sd',
-            label: (<a href='#'>Graduate Program</a>),
-            },
-            {
-            key: '5sd',
-            label: (<a href='#'>Post-Graduate Program</a>),
-            },
-        ],
-    },
-    {
-        key: 'subsd3',
-        icon: <ExaminationIcon />,
-        label: (<p>&nbsp; Examinations</p>),
-        children: [
-            {
-            key: '6sd',
-            label: (<a href='#'>Exam Scheduled</a>),
-            },
-            {
-            key: '7sd',
-            label: (<a href='#'>Upcoming Exam</a>),
-            },
-            {
-            key: '8sd',
-            label: (<a href='#'>Passed Exam</a>),
-            },
-        ],
-    },
-    {
-        key: 'subsd4',
-        icon: <CommunityIcon />,
-        label: (<p>&nbsp; Community</p>),
-        children: [
-        {
-            key: '9sd',
-            label: (<a href='#'>Exam Scheduled</a>),
-        },
-        {
-            key: '10sd',
-            label: (<a href='#'>Upcoming Exam</a>),
-        },
-        {
-            key: '11sd',
-            label: (<a href='#'>Passed Exam</a>),
-        },
-        ],
-    },
-    {
-        key: 'subsd5',
-        icon: <NotificationIcon />,
-        label: (<p>&nbsp; Notifications</p>),
-        children: [
-            {
-            key: '12sd',
-            label: (<a href='#'>Exam Scheduled</a>),
-            },
-            {
-            key: '13sd',
-            label: (<a href='#'>Upcoming Exam</a>),
-            },
-            {
-            key: '14sd',
-            label: (<a href='#'>Passed Exam</a>),
-            },
-        ],
-    },
-    // getItem('Files', '9', <FileOutlined />),
-    {
-        key: 'grp',
-        label: '',
-        type: 'group',
-        style: { marginTop: '100px' },
-        children: [
-        {   
-            key: '15sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, 
-            icon: React.createElement(SettingOutlined, { style: { color: '#000' } }), 
-            label: (<h2 className='text-[18px] font-[700] text-[#000]'>Settings</h2>)
-        },
-        {
-            key: '16sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'},
-            icon: React.createElement(QuestionCircleOutlined, { style: { color: '#000' } }),
-            label: (<h2 className='text-[18px] font-[700] text-[#000]'>Help & Support</h2>)
-        },
-        {
-            key: '17sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'},
-            icon: React.createElement(LogoutOutlined, { style: { color: '#000' } }),
-            label: (<h2 className='text-[18px] font-[700] text-[#000]'>Logout</h2>)
-        },     
-        ],
-    },
-];
 const items: MenuProps['items'] = [
     {
       label: <a href="https://www.antgroup.com">1st menu item</a>,
@@ -164,7 +49,6 @@ const App: React.FC = () => {
     const [collapsed, setCollapsed] = useState(false);
     const [open, setOpen] = React.useState<boolean>(false);
     const [loading, setLoading] = React.useState<boolean>(true);
-
     const showLoading = () => {
         setOpen(true);
         setLoading(true);
@@ -186,10 +70,10 @@ const App: React.FC = () => {
                         <h1 className='text-[22px] font-[700] my-[37px] text-left text-[#000]'>IIMTT Logo</h1>    
                     </div>
                 </div>
-                <Menu className='custom-menu' mode="inline"  style={{ height: '100%', borderRight: 0, paddingTop: 30, background: 'transparent'}} items={items2} />
+                <LeftSideMenu />
             </Sider>
             </div>
-            <Layout style={{marginLeft: 366, background: '#FFF'}}>
+            <Layout style={{marginLeft: collapsed ?  80 : 366, background: '#FFF', transition: 'margin-left 0.2s ease'}}>
                 <Content style={{  overflow: 'initial',}}>
                     <div className='border-b-[1px] py-2 border-[#CFCFCF]'>
                         <div className='container mx-auto flex flex-row justify-between pr-8'>

app/routes/course.theory.tsx

@@ -0,0 +1,112 @@
+import React, {useState} from 'react';
+import { RightOutlined} from '@ant-design/icons';
+import TheoroCourse from '~/components/TheoryCourses';
+import {Layout, theme, Button, MenuProps, Breadcrumb, Dropdown, Space} from 'antd';
+import '../../public/assets/left_side_nav.css';
+import LeftSideMenu from '~/components/LeftSideMenuItems';
+
+
+const { Content, Sider } = Layout;
+
+const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({
+  key,
+  label: `navsd ${key}`,
+}));
+
+type MenuItem = Required<MenuProps>['items'][number];
+
+
+
+const items: MenuProps['items'] = [
+    {
+      label: <a href="https://www.antgroup.com">1st menu item</a>,
+      key: '01sd',
+    },
+    {
+      type: 'divider',
+    },
+    {
+      label: <a href="https://www.aliyun.com">2nd menu item</a>,
+      key: '02sd',
+    },
+    {
+      type: 'divider',
+    },
+    {
+      label: '3rd menu item',
+      key: '03sd',
+    },
+];
+
+const App: React.FC = () => {
+    const [collapsed, setCollapsed] = useState(false);
+    const [open, setOpen] = React.useState<boolean>(false);
+    const [loading, setLoading] = React.useState<boolean>(true);
+    const showLoading = () => {
+        setOpen(true);
+        setLoading(true);
+
+        // Simple loading mock. You should add cleanup logic in real world.
+        setTimeout(() => {
+        setLoading(false);
+        }, 100);
+    };
+    const { token: { colorBgContainer}, } = theme.useToken();
+
+  return (
+    <Layout>
+        <Layout>
+            <div >
+            <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)} width={366} style={{overflow: 'auto', height: '110vh', position: 'fixed', left: 0, top: 0, bottom: 0,  background: '#FFF', borderRight: '1px solid #CFCFCF', borderBottom: '2px solid #000'}}>
+                <div className='flex flex-col justify-center demo-logo-vertical'>
+                    <div className='px-4'>
+                        <h1 className='text-[22px] font-[700] my-[37px] text-left text-[#000]'>IIMTT Logo</h1>    
+                    </div>
+                </div>
+                <LeftSideMenu />
+            </Sider>
+            </div>
+            <Layout style={{marginLeft: collapsed ?  80 : 366, background: '#FFF', transition: 'margin-left 0.2s ease'}}>
+                <Content style={{  overflow: 'initial',}}>
+                    <div className='border-b-[1px] py-2 border-[#CFCFCF]'>
+                        <div className='container mx-auto flex flex-row justify-between pr-8'>
+                            <div className='inline-flex justify-center place-items-center'>
+                                <Breadcrumb separator=">" className='pl-6' style={{fontSize: '18px' , fontWeight: '700'}} items={[{title: <a href="">Course</a>,},{title: 'Theory',},]}/> 
+                            </div>
+                            <div>
+                                <Button className='border-none shadow-none bg-transparent hover:bg-transparent' onClick={showLoading}>
+                                    <div className='border-[1px] border[#525252] rounded-full p-2 w-[47px] h-[47px]'>
+                                        <img src="../../assets/notification-bell.svg" alt="" />
+                                    </div>
+                                </Button>
+                                <Dropdown menu={{ items }} trigger={['click']}>
+                                    <a onClick={(e) => e.preventDefault()}>
+                                    <Space>
+                                        <div className='flex flex-row border-[1px] border-[#BBBBBB] rounded-full p-1 gap-x-6'>
+                                            <img src="/assets/man.png" alt="" />
+                                            <div>
+                                                <p className='text-[12px] text-[#EF7A0C] font-[500]'>My Profile</p>
+                                                <p className='text-[16px] text-[#27549F] font-[700]'>Rayan Holiday</p>
+                                            </div>
+                                            <RightOutlined style={{ fontSize: '12px', paddingRight: '10px' }} />
+                                        </div>
+                                    </Space>
+                                    </a>
+                                </Dropdown>
+                            </div>
+                        </div>
+                    </div>
+                    <div className=''>
+                        <TheoroCourse />
+                    </div>
+                    {/* Place Content from here */}
+                    
+
+                </Content>
+            </Layout>
+        </Layout>
+    </Layout>
+  );
+};
+export default App;
+

app/routes/knowledge-quest.tsx

@@ -10,6 +10,7 @@ import TopPerformers from '~/components/TopPerformers';
 import {Layout, Menu, theme, Button, Modal, MenuProps} from 'antd';
 import { Dropdown, Space } from 'antd';
 import '../../public/assets/left_side_nav.css';
+import LeftSideMenu from '~/components/LeftSideMenuItems';
 
 
 const { Content, Sider } = Layout;
@@ -22,123 +23,6 @@ const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({
 type MenuItem = Required<MenuProps>['items'][number];
 
 
-const items2: MenuProps['items'] = [
-    {
-        key: 'subsd1',
-        icon: <AdministrationIcon />,
-        label: (<p>&nbsp; Administration</p>),
-        children: [
-            {
-            key: '1sd',
-            label: (<a href='#'>Class Schedules</a>),
-            },
-            {
-            key: '2sd',
-            label: (<a href='/classmate-directory'>Classmate Directory</a>),
-            },
-            {
-            key: '3sd',
-            label: (<a href='#'>Qualifications</a>),
-            },
-        ],
-    },
-    {
-        key: 'subsd2',
-        icon: <MyCoursesIcon />,
-        label: (<p>&nbsp; My Courses</p>),
-        children: [
-            {
-            key: '4sd',
-            label: (<a href='#'>Graduate Program</a>),
-            },
-            {
-            key: '5sd',
-            label: (<a href='#'>Post-Graduate Program</a>),
-            },
-        ],
-    },
-    {
-        key: 'subsd3',
-        icon: <ExaminationIcon />,
-        label: (<p>&nbsp; Examinations</p>),
-        children: [
-            {
-            key: '6sd',
-            label: (<a href='#'>Exam Scheduled</a>),
-            },
-            {
-            key: '7sd',
-            label: (<a href='#'>Upcoming Exam</a>),
-            },
-            {
-            key: '8sd',
-            label: (<a href='#'>Passed Exam</a>),
-            },
-        ],
-    },
-    {
-        key: 'subsd4',
-        icon: <CommunityIcon />,
-        label: (<p>&nbsp; Community</p>),
-        children: [
-        {
-            key: '9sd',
-            label: (<a href='#'>Exam Scheduled</a>),
-        },
-        {
-            key: '10sd',
-            label: (<a href='#'>Upcoming Exam</a>),
-        },
-        {
-            key: '11sd',
-            label: (<a href='#'>Passed Exam</a>),
-        },
-        ],
-    },
-    {
-        key: 'subsd5',
-        icon: <NotificationIcon />,
-        label: (<p>&nbsp; Notifications</p>),
-        children: [
-            {
-            key: '12sd',
-            label: (<a href='#'>Exam Scheduled</a>),
-            },
-            {
-            key: '13sd',
-            label: (<a href='#'>Upcoming Exam</a>),
-            },
-            {
-            key: '14sd',
-            label: (<a href='#'>Passed Exam</a>),
-            },
-        ],
-    },
-    // getItem('Files', '9', <FileOutlined />),
-    {
-        key: 'grp',
-        label: '',
-        type: 'group',
-        style: { marginTop: '100px' },
-        children: [
-        {   
-            key: '15sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, 
-            icon: React.createElement(SettingOutlined, { style: { color: '#000' } }), 
-            label: (<h2 className='text-[18px] font-[700] text-[#000]'>Settings</h2>)
-        },
-        {
-            key: '16sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'},
-            icon: React.createElement(QuestionCircleOutlined, { style: { color: '#000' } }),
-            label: (<h2 className='text-[18px] font-[700] text-[#000]'>Help & Support</h2>)
-        },
-        {
-            key: '17sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'},
-            icon: React.createElement(LogoutOutlined, { style: { color: '#000' } }),
-            label: (<h2 className='text-[18px] font-[700] text-[#000]'>Logout</h2>)
-        },     
-        ],
-    },
-];
 const items: MenuProps['items'] = [
     {
       label: <a href="https://www.antgroup.com">1st menu item</a>,
@@ -186,7 +70,7 @@ const App: React.FC = () => {
                         <h1 className='text-[22px] font-[700] my-[37px] text-left text-[#000]'>IIMTT Logo</h1>    
                     </div>
                 </div>
-                <Menu className='custom-menu' mode="inline"  style={{ height: '100%', borderRight: 0, paddingTop: 30, background: 'transparent'}} items={items2} />
+                <LeftSideMenu />
             </Sider>
             </div>
             <Layout style={{marginLeft: 366, background: '#FFF'}}>

app/routes/progress-review.tsx

@@ -12,6 +12,7 @@ import QuizzesScore from '~/components/QuizzesScore'
 import YourCertificates from '~/components/YourCertificates'
 import { Dropdown, Space } from 'antd';
 import '../../public/assets/left_side_nav.css';
+import LeftSideMenu from '~/components/LeftSideMenuItems';
 
 
 const { Content, Sider } = Layout;
@@ -23,124 +24,6 @@ const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({
 
 type MenuItem = Required<MenuProps>['items'][number];
 
-
-const items2: MenuProps['items'] = [
-    {
-        key: 'subsd1',
-        icon: <AdministrationIcon />,
-        label: (<p>&nbsp; Administration</p>),
-        children: [
-            {
-            key: '1sd',
-            label: (<a href='#'>Class Schedules</a>),
-            },
-            {
-            key: '2sd',
-            label: (<a href='#'>Classmate Directory</a>),
-            },
-            {
-            key: '3sd',
-            label: (<a href='#'>Qualifications</a>),
-            },
-        ],
-    },
-    {
-        key: 'subsd2',
-        icon: <MyCoursesIcon />,
-        label: (<p>&nbsp; My Courses</p>),
-        children: [
-            {
-            key: '4sd',
-            label: (<a href='#'>Graduate Program</a>),
-            },
-            {
-            key: '5sd',
-            label: (<a href='#'>Post-Graduate Program</a>),
-            },
-        ],
-    },
-    {
-        key: 'subsd3',
-        icon: <ExaminationIcon />,
-        label: (<p>&nbsp; Examinations</p>),
-        children: [
-            {
-            key: '6sd',
-            label: (<a href='#'>Exam Scheduled</a>),
-            },
-            {
-            key: '7sd',
-            label: (<a href='#'>Upcoming Exam</a>),
-            },
-            {
-            key: '8sd',
-            label: (<a href='#'>Passed Exam</a>),
-            },
-        ],
-    },
-    {
-        key: 'subsd4',
-        icon: <CommunityIcon />,
-        label: (<p>&nbsp; Community</p>),
-        children: [
-        {
-            key: '9sd',
-            label: (<a href='#'>Exam Scheduled</a>),
-        },
-        {
-            key: '10sd',
-            label: (<a href='#'>Upcoming Exam</a>),
-        },
-        {
-            key: '11sd',
-            label: (<a href='#'>Passed Exam</a>),
-        },
-        ],
-    },
-    {
-        key: 'subsd5',
-        icon: <NotificationIcon />,
-        label: (<p>&nbsp; Notifications</p>),
-        children: [
-            {
-            key: '12sd',
-            label: (<a href='#'>Exam Scheduled</a>),
-            },
-            {
-            key: '13sd',
-            label: (<a href='#'>Upcoming Exam</a>),
-            },
-            {
-            key: '14sd',
-            label: (<a href='#'>Passed Exam</a>),
-            },
-        ],
-    },
-    // getItem('Files', '9', <FileOutlined />),
-    {
-        key: 'grp',
-        label: '',
-        type: 'group',
-        style: { marginTop: '100px' },
-        children: [
-        {   
-            key: '15sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, 
-            icon: React.createElement(SettingOutlined, { style: { color: '#000' } }), 
-            label: (<h2 className='text-[18px] font-[700] text-[#000]'>Settings</h2>)
-        },
-        {
-            key: '16sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'},
-            icon: React.createElement(QuestionCircleOutlined, { style: { color: '#000' } }),
-            label: (<h2 className='text-[18px] font-[700] text-[#000]'>Help & Support</h2>)
-        },
-        {
-            key: '17sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'},
-            icon: React.createElement(LogoutOutlined, { style: { color: '#000' } }),
-            label: (<h2 className='text-[18px] font-[700] text-[#000]'>Logout</h2>)
-        },     
-        ],
-    },
-];
 const items: MenuProps['items'] = [
     {
       label: <a href="https://www.antgroup.com">1st menu item</a>,
@@ -188,7 +71,7 @@ const App: React.FC = () => {
                         <h1 className='text-[22px] font-[700] my-[37px] text-left text-[#000]'>IIMTT Logo</h1>    
                     </div>
                 </div>
-                <Menu className='custom-menu' mode="inline"  style={{ height: '100%', borderRight: 0, paddingTop: 30, background: 'transparent'}} items={items2} />
+                <LeftSideMenu />
             </Sider>
             </div>
             <Layout style={{marginLeft: 366, background: '#FFF'}}>

app/routes/start-course.tsx

@@ -0,0 +1,113 @@
+import React, {useState} from 'react';
+import { RightOutlined} from '@ant-design/icons';
+
+import StartCourse from '~/components/StartCourse';
+import {Layout, theme, Button, MenuProps, Breadcrumb, Dropdown, Space} from 'antd';
+import '../../public/assets/left_side_nav.css';
+import LeftSideMenu from '~/components/LeftSideMenuItems';
+
+
+const { Content, Sider } = Layout;
+
+const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({
+  key,
+  label: `navsd ${key}`,
+}));
+
+type MenuItem = Required<MenuProps>['items'][number];
+
+
+
+const items: MenuProps['items'] = [
+    {
+      label: <a href="https://www.antgroup.com">1st menu item</a>,
+      key: '01sd',
+    },
+    {
+      type: 'divider',
+    },
+    {
+      label: <a href="https://www.aliyun.com">2nd menu item</a>,
+      key: '02sd',
+    },
+    {
+      type: 'divider',
+    },
+    {
+      label: '3rd menu item',
+      key: '03sd',
+    },
+];
+
+const Course: React.FC = () => {
+    const [collapsed, setCollapsed] = useState(false);
+    const [open, setOpen] = React.useState<boolean>(false);
+    const [loading, setLoading] = React.useState<boolean>(true);
+    const showLoading = () => {
+        setOpen(true);
+        setLoading(true);
+
+        // Simple loading mock. You should add cleanup logic in real world.
+        setTimeout(() => {
+        setLoading(false);
+        }, 100);
+    };
+    const { token: { colorBgContainer}, } = theme.useToken();
+
+  return (
+    <Layout>
+        <Layout>
+            <div >
+            <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)} width={366} style={{overflow: 'auto', height: '110vh', position: 'fixed', left: 0, top: 0, bottom: 0,  background: '#FFF', borderRight: '1px solid #CFCFCF', borderBottom: '2px solid #000'}}>
+                <div className='flex flex-col justify-center demo-logo-vertical'>
+                    <div className='px-4'>
+                        <h1 className='text-[22px] font-[700] my-[37px] text-left text-[#000]'>IIMTT Logo</h1>    
+                    </div>
+                </div>
+                <LeftSideMenu />
+            </Sider>
+            </div>
+            <Layout style={{marginLeft: collapsed ?  80 : 366, background: '#FFF', transition: 'margin-left 0.2s ease'}}>
+                <Content style={{  overflow: 'initial',}}>
+                    <div className='border-b-[1px] py-2 border-[#CFCFCF]'>
+                        <div className='container mx-auto flex flex-row justify-between pr-8'>
+                            <div className='inline-flex justify-center place-items-center'>
+                                <Breadcrumb separator=">" className='pl-6' style={{fontSize: '18px' , fontWeight: '700'}} items={[{title: <a href="">Course</a>,},{title: 'Theory',},]}/> 
+                            </div>
+                            <div>
+                                <Button className='border-none shadow-none bg-transparent hover:bg-transparent' onClick={showLoading}>
+                                    <div className='border-[1px] border[#525252] rounded-full p-2 w-[47px] h-[47px]'>
+                                        <img src="../../assets/notification-bell.svg" alt="" />
+                                    </div>
+                                </Button>
+                                <Dropdown menu={{ items }} trigger={['click']}>
+                                    <a onClick={(e) => e.preventDefault()}>
+                                    <Space>
+                                        <div className='flex flex-row border-[1px] border-[#BBBBBB] rounded-full p-1 gap-x-6'>
+                                            <img src="/assets/man.png" alt="" />
+                                            <div>
+                                                <p className='text-[12px] text-[#EF7A0C] font-[500]'>My Profile</p>
+                                                <p className='text-[16px] text-[#27549F] font-[700]'>Rayan Holiday</p>
+                                            </div>
+                                            <RightOutlined style={{ fontSize: '12px', paddingRight: '10px' }} />
+                                        </div>
+                                    </Space>
+                                    </a>
+                                </Dropdown>
+                            </div>
+                        </div>
+                    </div>
+                    <div className=''>
+                        <StartCourse />
+                    </div>
+                    {/* Place Content from here */}
+                    
+
+                </Content>
+            </Layout>
+        </Layout>
+    </Layout>
+  );
+};
+export default Course;
+

app/routes/student-dashboard._index.tsx

@@ -11,6 +11,7 @@ import TopPerformers from '~/components/TopPerformers';
 import {Layout, Menu, theme, Button, Modal, MenuProps} from 'antd';
 import { Dropdown, Space } from 'antd';
 import '../../public/assets/left_side_nav.css';
+import LeftSideMenu from '~/components/LeftSideMenuItems';
 
 
 const { Content, Sider } = Layout;
@@ -22,124 +23,6 @@ const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({
 
 type MenuItem = Required<MenuProps>['items'][number];
 
-
-const items2: MenuProps['items'] = [
-    {
-        key: 'subsd1',
-        icon: <AdministrationIcon />,
-        label: (<p>&nbsp; Administration</p>),
-        children: [
-            {
-            key: '1sd',
-            label: (<a href='#'>Class Schedules</a>),
-            },
-            {
-            key: '2sd',
-            label: (<a href='#'>Classmate Directory</a>),
-            },
-            {
-            key: '3sd',
-            label: (<a href='#'>Qualifications</a>),
-            },
-        ],
-    },
-    {
-        key: 'subsd2',
-        icon: <MyCoursesIcon />,
-        label: (<p>&nbsp; My Courses</p>),
-        children: [
-            {
-            key: '4sd',
-            label: (<a href='#'>Graduate Program</a>),
-            },
-            {
-            key: '5sd',
-            label: (<a href='#'>Post-Graduate Program</a>),
-            },
-        ],
-    },
-    {
-        key: 'subsd3',
-        icon: <ExaminationIcon />,
-        label: (<p>&nbsp; Examinations</p>),
-        children: [
-            {
-            key: '6sd',
-            label: (<a href='#'>Exam Scheduled</a>),
-            },
-            {
-            key: '7sd',
-            label: (<a href='#'>Upcoming Exam</a>),
-            },
-            {
-            key: '8sd',
-            label: (<a href='#'>Passed Exam</a>),
-            },
-        ],
-    },
-    {
-        key: 'subsd4',
-        icon: <CommunityIcon />,
-        label: (<p>&nbsp; Community</p>),
-        children: [
-        {
-            key: '9sd',
-            label: (<a href='#'>Exam Scheduled</a>),
-        },
-        {
-            key: '10sd',
-            label: (<a href='#'>Upcoming Exam</a>),
-        },
-        {
-            key: '11sd',
-            label: (<a href='#'>Passed Exam</a>),
-        },
-        ],
-    },
-    {
-        key: 'subsd5',
-        icon: <NotificationIcon />,
-        label: (<p>&nbsp; Notifications</p>),
-        children: [
-            {
-            key: '12sd',
-            label: (<a href='#'>Exam Scheduled</a>),
-            },
-            {
-            key: '13sd',
-            label: (<a href='#'>Upcoming Exam</a>),
-            },
-            {
-            key: '14sd',
-            label: (<a href='#'>Passed Exam</a>),
-            },
-        ],
-    },
-    // getItem('Files', '9', <FileOutlined />),
-    {
-        key: 'grp',
-        label: '',
-        type: 'group',
-        style: { marginTop: '100px' },
-        children: [
-        {   
-            key: '15sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, 
-            icon: React.createElement(SettingOutlined, { style: { color: '#000' } }), 
-            label: (<h2 className='text-[18px] font-[700] text-[#000]'>Settings</h2>)
-        },
-        {
-            key: '16sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'},
-            icon: React.createElement(QuestionCircleOutlined, { style: { color: '#000' } }),
-            label: (<h2 className='text-[18px] font-[700] text-[#000]'>Help & Support</h2>)
-        },
-        {
-            key: '17sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'},
-            icon: React.createElement(LogoutOutlined, { style: { color: '#000' } }),
-            label: (<h2 className='text-[18px] font-[700] text-[#000]'>Logout</h2>)
-        },     
-        ],
-    },
-];
 const items: MenuProps['items'] = [
     {
       label: <a href="https://www.antgroup.com">1st menu item</a>,
@@ -187,7 +70,7 @@ const App: React.FC = () => {
                         <h1 className='text-[22px] font-[700] my-[37px] text-left text-[#000]'>IIMTT Logo</h1>    
                     </div>
                 </div>
-                <Menu className='custom-menu' mode="inline"  style={{ height: '100%', borderRight: 0, paddingTop: 30, background: 'transparent'}} items={items2} />
+                <LeftSideMenu />
             </Sider>
             </div>
             <Layout style={{marginLeft: 366, background: '#FFF'}}>
@@ -195,13 +78,13 @@ const App: React.FC = () => {
                     <div className='border-b-[1px] py-2 border-[#CFCFCF]'>
                         <div className='container mx-auto flex flex-row justify-between pr-8'>
                             <div className='inline-flex justify-center place-items-center'>
-                                <img src="../../assets/student-dash.svg" alt=""/>
+                                <img src="/assets/student-dash.svg" alt=""/>
                                 <p className='pl-1 text-[18px] font-[700] whitespace-nowrap'>Student Dashboard</p>
                             </div>
                             <div>
                                 <Button className='border-none shadow-none bg-transparent hover:bg-transparent' onClick={showLoading}>
                                     <div className='border-[1px] border[#525252] rounded-full p-2 w-[47px] h-[47px]'>
-                                        <img src="../../assets/notification-bell.svg" alt="" />
+                                        <img src="/assets/notification-bell.svg" alt="" />
                                     </div>
                                 </Button>
                                 <Dropdown menu={{ items }} trigger={['click']}>

public/assets/play.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.80859 17.6077L16.9753 12.3577L8.80859 7.10771V17.6077ZM11.7253 24.0244C10.1114 24.0244 8.5947 23.7181 7.17526 23.1056C5.75582 22.4931 4.52109 21.6619 3.47109 20.6119C2.42109 19.5619 1.58984 18.3272 0.977344 16.9077C0.364844 15.4883 0.0585938 13.9716 0.0585938 12.3577C0.0585938 10.7438 0.364844 9.22715 0.977344 7.80771C1.58984 6.38826 2.42109 5.15354 3.47109 4.10354C4.52109 3.05354 5.75582 2.22229 7.17526 1.60979C8.5947 0.99729 10.1114 0.69104 11.7253 0.69104C13.3391 0.69104 14.8558 0.99729 16.2753 1.60979C17.6947 2.22229 18.9294 3.05354 19.9794 4.10354C21.0294 5.15354 21.8607 6.38826 22.4732 7.80771C23.0857 9.22715 23.3919 10.7438 23.3919 12.3577C23.3919 13.9716 23.0857 15.4883 22.4732 16.9077C21.8607 18.3272 21.0294 19.5619 19.9794 20.6119C18.9294 21.6619 17.6947 22.4931 16.2753 23.1056C14.8558 23.7181 13.3391 24.0244 11.7253 24.0244Z" fill="white"/>
+</svg>