s1

app/components/KnowledgeQuests.tsx

@@ -40,27 +40,22 @@ export default function KnowledgeQuests() {
       }
     return(
         <section className=''>
-            <div 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='flex flex-col gap-6'>
-                        {knowledgeData.map(data => (
-                            <div key={data.id} className='flex flex-row justify-between px-6 place-items-center'>
-                                <div className='flex flex-row justify-between gap-6'>
-                                    <img src={data.img} alt="" />
-                                    <div className='flex flex-col space-y-3'>
-                                      <h2 className='text-[16px] font-[700] text-[#000]'>{data.title}</h2>
-                                      <p className='text-[14px] font-[600] text-[#525252]'>{data.challenge}</p>
-                                      <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>                             
-                </div>
-               
-            </div>
+          <h2 className='text-[20px] font-[700] inline-flex p-6'>Knowledge Quests <img src="/assets/right-arrow.svg" alt="" /></h2>   
+          <div className='flex flex-col gap-6'>
+              {knowledgeData.map(data => (
+                  <div key={data.id} className='flex flex-row justify-between px-6 place-items-center'>
+                      <div className='flex flex-row justify-between gap-6'>
+                          <img src={data.img} alt="" />
+                          <div className='flex flex-col space-y-3'>
+                            <h2 className='text-[16px] font-[700] text-[#000]'>{data.title}</h2>
+                            <p className='text-[14px] font-[600] text-[#525252]'>{data.challenge}</p>
+                            <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>                             
         </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']}>