configworker/web/src/siderConfig.js
2020-01-02 05:33:26 +08:00

68 lines
1.9 KiB
JavaScript

import React from 'react';
import { Layout, Menu, Breadcrumb, Icon, Button, Row, Col } from 'antd';
import { Input } from 'antd';
import NamespaceSelect from './namespaceSelect';
const { TextArea } = Input;
const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;
class SiderConfig extends React.Component {
state = {
collapsed: false,
};
onCollapse = collapsed => {
console.log(collapsed);
this.setState({ collapsed });
};
render() {
return (
<Layout style={{ minHeight: '100vh' }}>
<Sider collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
<div className="logo" />
<Menu theme="dark" defaultOpenKeys={['namespace']} defaultSelectedKeys={['namespace']} mode="inline" >
<SubMenu
collapsed="true"
key="namespace"
title={
<span>
<Icon type="team" />
Namespace
</span>
}>
<NamespaceSelect>
</NamespaceSelect>
</SubMenu>
</Menu>
</Sider>
<Layout>
<Header style={{ background: '#fff', padding: 0, }}>
<Row type="flex" justify="end">
<Col span={4}><Button type="primary" style={{width: '100px',}}>退出</Button></Col>
</Row>
</Header >
<Content style={{ margin: '0 16px' }}>
<Breadcrumb style={{ margin: '8px 0' }}>
<Breadcrumb.Item>User</Breadcrumb.Item>
<Breadcrumb.Item>Bill</Breadcrumb.Item>
</Breadcrumb>
<TextArea style={{ minHeight: '100%' }}>
</TextArea>
</Content>
<Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
</Layout>
</Layout>
);
}
}
export default SiderConfig;