react学习之路（2）——调整页面布局

首先展示一下页面效果

相比较上篇文章，进行了以下调整

1.增加了菜单的收缩展开功能

2.调整页面高度，充满整个页面，底栏一直在底端。

3.调整菜单宽度和logo大小

App.js

import React from 'react';
import './App.css';
import {Layout,  Button, Menu, Breadcrumb} from 'antd';
import {
    AppstoreOutlined,
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    PieChartOutlined,
    DesktopOutlined,
    ContainerOutlined,
    MailOutlined,
} from '@ant-design/icons';

const { Header, Footer, Content , Sider} = Layout;
const { SubMenu } = Menu;
class App extends React.Component{
    state = {
        collapsed: false,
    };


    toggleCollapsed = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    };
    render(){
        return <Layout className="layout">
            <Header>

                <Button className="menufoldBtn" type="primary" ghost={true} onClick={this.toggleCollapsed} style={
  { marginBottom: 16 }}>
                    {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined)}
                </Button>