s1

2024-08-07 11:13:48 +05:30
parent d049614691
commit 2512a918fb
16 changed files with 660 additions and 510 deletions
--- a/app/routes/ai-quiz.tsx
+++ b/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'>
--- a/app/routes/classmate-directory.tsx
+++ b/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'>
--- a/app/routes/course._index.tsx
+++ b/app/routes/course._index.tsx
--- a/app/routes/course.theory.tsx
+++ b/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;
+
--- a/app/routes/knowledge-quest.tsx
+++ b/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'}}>
--- a/app/routes/progress-review.tsx
+++ b/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'}}>
--- a/app/routes/start-course.tsx
+++ b/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;
+
--- a/app/routes/student-dashboard._index.tsx
+++ b/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']}>