bs-p2/app/components/LeftSideMenuItems.tsx

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';
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';




const items2: MenuProps['items'] = [
    {
        key: '1',
        icon: <AdministrationIcon />,
        label: (<p className='py-2.5'>&nbsp; Administration</p>),
        children: [
            {
            key: 'administration1',
            label: (<a href='#'>Class Schedules</a>),
            },
            {
            key: 'administration2',
            label: (<a href='#'>Classmate Directory</a>),
            },
            {
            key: 'administration3',
            label: (<a href='#'>Qualifications</a>),
            },
        ],
    },
    {
        key: '2',
        icon: <MyCoursesIcon />,
        label: (<p className='py-2.5'>&nbsp; Courses</p>),
        children: [
            {
                key: 'courses1',
                label: (<a href='/mycourse/theory'>Theory</a>),
            },
            {
                key: 'courses2',
                label: (<a href='/mycourse/practical'>Practical</a>),
            },
            {
                key: 'courses3',
                label: (<a href='/mycourse/albums'>Albums</a>),
            },
        ],
    },
    {
        key: '3',
        icon: <ExaminationIcon />,
        label: (<p className='py-2.5'>&nbsp; Examinations</p>),
        children: [
            {
            key: 'examinations1',
            label: (<a href='#'>Exam Scheduled</a>),
            },
            {
            key: 'examinations2',
            label: (<a href='#'>Upcoming Exam</a>),
            },
            {
            key: 'examinations3',
            label: (<a href='#'>Passed Exam</a>),
            },
        ],
    },
    {
        key: '4',
        icon: <CommunityIcon />,
        label: (<p className='py-2.5'>&nbsp; Community</p>),
        children: [
        {
            key: 'community1',
            label: (<a href='#'>Exam Scheduled</a>),
        },
        {
            key: 'community2',
            label: (<a href='#'>Upcoming Exam</a>),
        },
        {
            key: 'community3',
            label: (<a href='#'>Passed Exam</a>),
        },
        ],
    },
    {
        key: '5',
        icon: <NotificationIcon />,
        label: (<p className='py-2.5'>&nbsp; Notifications</p>),
        children: [
            {
            key: 'notifications1',
            label: (<a href='#'>Exam Scheduled</a>),
            },
            {
            key: 'notifications2',
            label: (<a href='#'>Upcoming Exam</a>),
            },
            {
            key: 'notifications3',
            label: (<a href='#'>Passed Exam</a>),
            },
        ],
    },
    // getItem('Files', '9', <FileOutlined />),
    {
        key: 'grp',
        label: '',
        type: 'group',
        style: { marginTop: '100px' },
        children: [
        {   
            key: '6', 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: '7', 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: '8', 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;