import './demo1.css';
import Nav from '..';
import React from 'react';
import ReactDOM from 'react-dom';
const { Item, SubNav } = Nav;

const header = <span className="fusion">FUSION</span>;
const footer = (
  <a className="login-in" href="javascript:;">
        Login in
  </a>
);
ReactDOM.render(
  <div style={{ padding: '10px', backgroundColor: '#f3f3f3' }}>
    <Nav
      className="basic-nav"
      mode="popup"
      direction="hoz"
      type="normal"
      header={header}
      footer={footer}
      defaultSelectedKeys={[ 'home' ]}
      triggerType="click"
    >
      <Item key="home">Home</Item>
      <SubNav
        label="Component"
        // @ts-ignore
      >
        <Item key="1234">这是文字</Item>
        <SubNav label="Next">
          <Item key="next-design">Design</Item>
          <Item key="next-doc">Document</Item>
        </SubNav>
        <SubNav label="Meet">
          <Item key="meet-design">Design</Item>
          <Item key="meet-doc">Document</Item>
        </SubNav>
        <Item key="meet-doc">
                    <a href="11111">这是链接</a>
        </Item>
      </SubNav>
      <Item key="document">Document</Item>
    </Nav>
    <br />
    <Nav
      className="basic-nav"
      mode="popup"
      direction="hoz"
      type="primary"
      header={header}
      footer={footer}
      defaultSelectedKeys={[ 'home' ]}
      triggerType="click"
    >
      <Item key="home">Home</Item>
      <SubNav
        label="Component"
        // @ts-ignore
      >
        <SubNav label="Next">
          <Item key="next-design">Design</Item>
          <Item key="next-doc">Document</Item>
        </SubNav>
        <SubNav label="Meet">
          <Item key="meet-design">Design</Item>
          <Item key="meet-doc">Document</Item>
        </SubNav>
        <Item key="meet-doc">
                    <a href="11111">这是链接</a>
        </Item>
      </SubNav>
      <Item key="document">Document</Item>
    </Nav>
    <br />
    <Nav
      className="basic-nav"
      mode="popup"
      direction="hoz"
      type="secondary"
      header={header}
      footer={footer}
      defaultSelectedKeys={[ 'home' ]}
      triggerType="click"
    >
      <Item key="home">
        <a href="#">Home</a>
      </Item>
      <SubNav
        label="Component"
        // @ts-ignore
      >
        <SubNav label="Next">
          <Item key="next-design">
            <a href="#">Design</a>
          </Item>
          <Item key="next-doc">Document</Item>
        </SubNav>
        <SubNav label="Meet">
          <Item key="meet-design">Design</Item>
          <Item key="meet-doc">Document</Item>
        </SubNav>
        <Item key="meet-doc">
                    <a href="11111">这是链接</a>
        </Item>
      </SubNav>
      <Item key="document">Document</Item>
    </Nav>
    <br />
    <Nav
      className="basic-nav"
      mode="popup"
      direction="hoz"
      type="line"
      header={header}
      footer={footer}
      defaultSelectedKeys={[ 'home' ]}
      triggerType="click"
    >
      <Item key="home">Home</Item>
      <SubNav
        label="Component"
        // @ts-ignore
      >
        <SubNav label="Next">
          <Item key="next-design">Design</Item>
          <Item key="next-doc">Document</Item>
        </SubNav>
        <SubNav label="Meet">
          <Item key="meet-design">Design</Item>
          <Item key="meet-doc">Document</Item>
        </SubNav>
      </SubNav>
      <Item key="document">Document</Item>
    </Nav>
  </div>,

  document.getElementById('nav-demo-1'),
);