使用ant design 创建简单的页面布局

import { Layout, Menu, Popconfirm, Button } from 'antd'
import { PieChartOutlined, SolutionOutlined, FileWordOutlined, LogoutOutlined } from '@ant-design/icons'
import './index.scss'
const { Header, Sider, Content } = Layout

const GeekLayout = () => {
  return (
    <Layout className="papap-layout">
      <Sider width={148} className="site-layout-background">
        <div className="logo">PAPAP</div>
        <Menu defaultSelectedKeys={['1']} mode="inline" theme="dark">
          <Menu.Item icon={<PieChartOutlined />} key="1">
            数据面板
          </Menu.Item>
          <Menu.Item icon={<SolutionOutlined />} key="2">
            内容管理
          </Menu.Item>
          <Menu.Item icon={<FileWordOutlined />} key="3">
            发布文章
          </Menu.Item>
        </Menu>
      </Sider>
      <Layout>
        <Header>
          <span style={{ fontSize: 16 }}>简单的布局</span>
          <div>
            <span>{}</span>
            <Popconfirm placement="bottomRight" title="您确认退出吗?" okText="确认" cancelText="取消">
              <Button type="link" icon={<LogoutOutlined />}>
                退出
              </Button>
            </Popconfirm>
          </div>
        </Header>
        <Content>内容</Content>
      </Layout>
    </Layout>
  )
}

export default GeekLayout

.papap-layout {
  height: 100%;
  overflow: hidden;
  .ant-layout-header {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
  }
  .ant-menu.ant-menu-dark {
    .ant-menu-item {
      padding-left: 50px;
    }
    .ant-menu-item-selected {
      background: #048;
    }
  }
  .ant-layout-content {
    height: 100%;
    overflow-y: auto;
  }
  .logo {
    width: 100%;
    height: 64px;
    color: #f8f8f8;
    font-size: 30px;
    text-align: center;
    text-shadow: 3px 3px 5px #f8f8f8;
    line-height: 64px;
    letter-spacing: 0.1em;
    transform: skew(-10deg);
    margin-bottom: 20px;
    user-select: none;
  }
}

实现效果

 

ps:  ant提供的theme有两种light | dark模式可选择

 高度撑开要在父级盒子有高度(100vh或者height:100%)情况下 height:100% 才会生效