HeaderCanvasXTemplate.jsx

import React from 'react'
import { Layout, Row, Col, Menu, Icon, Comment, Avatar } from 'antd'

import logo from './resources/images/logo.png'

import { style, logoStyle } from './resources/style/js/headerStyle'

const { Header } = Layout
const SubMenu = Menu.SubMenu
const MenuItemGroup = Menu.ItemGroup

export default class HeaderCanvasXTemplate extends React.Component {
  constructor(props) {
    super(props)
    this.state = { current: '' }
  }

  handleClick = e => {
    console.log('click ', e)
    this.setState({
      current: e.key,
    })
  }

  render() {
    return (
      <Header className="header" style={style}>
        <Row>
          {/* <Col span={8}>
            <Comment
              avatar={<Avatar src={logo} alt="logo" />}
              content={<p>Canvas X</p>}
              style={logoStyle}
            />
          </Col> */}
          <Col span={8} offset={8}>
            <Menu
              onClick={this.handleClick}
              selectedKeys={[this.state.current]}
              mode="horizontal"
              style={style}
              theme="dark">
              <SubMenu
                // style={{ float: 'right' }}
                title={
                  <span className="submenu-title-wrapper">
                    <Icon type="user" />
                    User
                  </span>
                }>
                <MenuItemGroup title="Item 1">
                  <Menu.Item key="setting:1">Option 1</Menu.Item>
                  <Menu.Item key="setting:2">Option 2</Menu.Item>
                </MenuItemGroup>
                <MenuItemGroup title="Item 2">
                  <Menu.Item key="setting:3">Option 3</Menu.Item>
                  <Menu.Item key="setting:4">Option 4</Menu.Item>
                </MenuItemGroup>
              </SubMenu>
            </Menu>
          </Col>
        </Row>
      </Header>
    )
  }
}