STCloudFrontEnd/src/components/Sider/MySider.js

import React, {Component} from "react";
import {Layout, Menu} from "antd";
import {FolderOutlined, SettingOutlined, TeamOutlined, UserOutlined} from "@ant-design/icons";
import {Link} from "react-router-dom";

const {Sider} = Layout;
const {SubMenu} = Menu;

class MySider extends Component {
    constructor(props) {
        super(props);
        this.state = {
            collapsed: true,
            isLogged: false,
        }
    }

    onCollapse = collapsed => {
        console.log(collapsed);
        this.setState({collapsed});
    };

    render() {
        return (
            <Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
                <div className="logo"/>
                <Menu theme="dark" defaultSelectedKeys={['file']} mode="inline">
                    <Menu.Item key="account" icon={<UserOutlined/>}>
                        <Link to={'/cloud/account'}>
                            Account
                        </Link>
                    </Menu.Item>
                    <Menu.Item key="file" icon={<FolderOutlined/>}>
                        <Link to={'/cloud/file'}>
                            My Files
                        </Link>
                    </Menu.Item>
                    <SubMenu key="team" icon={<TeamOutlined/>} title="Team">
                        <Menu.Item key="my_team">
                            <Link to={'/cloud/teams'}>
                                My Team
                            </Link>
                        </Menu.Item>
                        <Menu.Item key="join_team">
                            <Link to={'/cloud/join'}>
                                Join Team
                            </Link>
                        </Menu.Item>
                    </SubMenu>
                    <Menu.Item key="setting" icon={<SettingOutlined/>}>
                        <Link to={'/cloud/setting'}>
                            Setting
                        </Link>
                    </Menu.Item>
                </Menu>
            </Sider>
        )
    }
}

export default MySider;