bs-p2/app/components/Sidebar.tsx

import React,{useState} from "react";
import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, RightOutlined } from '@ant-design/icons';
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 { Layout, Menu, theme, Button, Modal, MenuProps } from 'antd';
import { Dropdown, Space } from 'antd';
import '../../public/assets/left_side_nav.css';
const { Content, Sider } = Layout;


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>,
        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',
    },
];
///
interface SidebarProps {
    isCollapsed: boolean;
    toggleSidebar: () => void;
  }



const App: React.FC <SidebarProps>  = ({isCollapsed, toggleSidebar}) => {

    const [collapsed, setCollapsed] = useState(false);
    


    return(
        <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' }}> */}
        <Sider
      collapsible
      collapsed={isCollapsed}
      onCollapse={toggleSidebar}
      width={366}
      style={{
        overflow: 'auto',
        height: '100vh',
        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>
            <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>
            <Menu className='custom-menu' defaultSelectedKeys={['1sd']} defaultOpenKeys={['subsd1']} mode="inline" style={{ height: '100%', borderRight: 0, paddingTop: 30, background: 'transparent' }} items={items2} />
        </Sider>
    </div>

    )

}

export default App;