Ant Design 侧边栏菜单项问题

Answer 1

它们可能是多种解决方案来实现所需的电流。我使用 Flex，一个额外的菜单项（将可见性设置为隐藏的分隔项）。如果顶部项目和注销项目之间有足够的空间，则分隔符将占用剩余空间。这是完整的代码。

import { Badge, Button, ConfigProvider, Input, Layout, Menu, MenuProps, Select } from 'antd';
import {
    BookFilled,
    CalendarFilled,
    CreditCardOutlined,
    DashOutlined,
    FolderAddFilled,
    LoginOutlined,
    NotificationFilled,
    PaperClipOutlined,
    SearchOutlined,
    SettingFilled,
    UserOutlined,
    UsergroupAddOutlined,
    WalletFilled
} from '@ant-design/icons';

const { Header, Content, Sider } = Layout;

const sidebarItems: MenuProps['items'] = [
    { key: '/dashboard', label: 'Dashboard', icon: <DashOutlined /> },
    { key: '/students', label: 'Students', icon: <UserOutlined /> },
    { key: '/student/dashboard', label: 'StudentDashboard', icon: <UsergroupAddOutlined /> },
    { key: `/profile/1`, label: 'Profile', icon: <UserOutlined /> },
    { key: '/courses', label: 'Courses', icon: <BookFilled /> },
    { key: '/mentors', label: 'Mentors', icon: <UserOutlined /> },
    { key: '/MentorsDashboard', label: 'MentorsDashboard', icon: <UsergroupAddOutlined /> },
    { key: '/departments', label: 'Departments', icon: <FolderAddFilled /> },
    { key: '/attendence', label: 'Attendence', icon: <CreditCardOutlined /> },
    { key: '/events', label: 'Events', icon: <CalendarFilled /> },
    { key: '/class-schedule', label: 'Class Schedule', icon: <PaperClipOutlined /> },
    { key: '/wallet', label: 'Wallet', icon: <WalletFilled /> },
    { key: '/setting', label: 'setting', icon: <SettingFilled /> },
    { type: 'divider', style: { margin: 0, border: 0, flexGrow: 1, visibility: 'hidden' } },
    { key: '/logout', label: 'Log Out', icon: <LoginOutlined /> }
];

const App = () => {
    return (
        <Layout>
            <Sider
                width='220px'
                trigger={null}
                collapsible
                style={{ backgroundColor: '#2492EB', height: '100vh', zIndex: 2, overflow: 'auto', position: 'fixed' }}
            >
                <div style={{ display: 'flex', flexDirection: 'column', height: 'inherit' }}>
                    <div className='demo-logo-vertical' />
                    <div style={{ backgroundColor: 'white', padding: '14px 0' }}>
                        <img src='https://t.ly/18Nvk' alt='' style={{ width: '2rem', height: '2rem', borderRadius: '50%', marginLeft: '80px' }} />
                    </div>
                    <Menu
                        items={sidebarItems}
                        style={{
                            backgroundColor: '#2492EB',
                            color: 'white',
                            marginTop: '10px',
                            flexGrow: 1,
                            display: 'flex',
                            flexDirection: 'column',
                            paddingBlockEnd: '1rem'
                        }}
                    />
                </div>
            </Sider>

            <Layout>
                <Header style={{ padding: 0, height: '100px', display: 'flex', alignItems: 'center' }}>
                    <Button type='text' style={{ fontSize: '16px', width: 45, height: 45, marginRight: '10px' }} />
                    <div className='flex items-center justify-between  container mx-auto'>
                        <div className='flex '>
                            <ConfigProvider theme={{ components: { Input: { colorBgContainer: 'rgb(244, 244, 244)' } } }}>
                                <Input
                                    allowClear={true}
                                    prefix={<SearchOutlined className='text-[#A7A7A7] ' />}
                                    placeholder='search here'
                                    className='h-[50px] w-[461px] border-0'
                                />
                            </ConfigProvider>
                        </div>
                        <div className='flex items-center gap-x-6'>
                            <Select />
                            <a className='flex items-center'>
                                <Badge count={5} className='cursor-pointer'>
                                    <NotificationFilled style={{ width: '30px', height: '30px' }} />
                                </Badge>
                            </a>
                            <div className='flex items-center gap-x-2'>
                                <img src='https://t.ly/18Nvk' className='w-[40px] h-[40px] object-cover rounded-full' alt='' />

                                <div className='my-[2px]'>
                                    <h1 className='font-semibold'>Mr. Admin John Doe</h1>
                                </div>
                            </div>
                        </div>
                    </div>
                </Header>
                <Content style={{ margin: '0 16px', padding: 24, backgroundColor: '#F6F8FA' }}></Content>
            </Layout>
        </Layout>
    );
};

export default App;