Duyên Kim

25 bundles
1 file9 days ago
1

Drawer

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788import React, { useState } from "react";
import Link from "next/link";
import Router, { withRouter } from "next/router";
import classNames from "classnames";
import _ from "lodash";
import { useWindowSize } from "@reach/window-size";
import { SmileOutlined } from "@ant-design/icons";
import { LinkOutlined } from "@ant-design/icons";
import { MenuOutlined } from "@ant-design/icons";

import { ROUTES } from "../../../config";

import styles from "./StdioHeader.less";

import { Drawer } from 'antd';

export default class StdioHeader extends React.Component {
  state = { visible: false, isShowA: false, isShowB: false, isShowC: false };

  showDrawer = () => {
    this.setState({
      visible: true
    });
  };

  onClose = () => {
    this.setState({
      visible: false,
      isShowA: false,
      isShowB: false,
      isShowC: false
    });
  };

  render() {
    return (
      <div className={styles.stdioHeader} >
        <div className={styles.stdioHeaderMargin} />
        <div className={styles.stdioHeaderFloat}>
          <div className={styles.stdioHeaderFloatBox}>
            <div className={styles.logo}>
              <Link href={`/${ROUTES.INDEX}`} as={`/${ROUTES.INDEX}`}>STDIO</Link>
            </div>
          </div>

          <div className={styles.menuButton}
            onClick={() => { this.setState({ isShowA: true }, this.showDrawer) }}>
            <LinkOutlined style={{ fontSize: '20px' }} />
          </div>


          <div className={styles.menuButton}
            onClick={() => { this.setState({ isShowB: true }, this.showDrawer) }}>
            <SmileOutlined style={{ fontSize: '20px' }} />
          </div>

          <div className={styles.menuButton}
            onClick={() => { this.setState({ isShowC: true }, this.showDrawer) }}>
            <MenuOutlined style={{ fontSize: '20px' }} />
          </div>

        </div>

        <Drawer
          placement="right"
          closable={false}
          onClose={this.onClose}
          visible={this.state.visible}>
          {this.state.isShowA && <div>
            <div>
              <p>Giao diện 1</p>
            </div>
          </div>}
          {this.state.isShowB && <div>
            <div>
              <p>Giao diện 2</p>
            </div>
          </div>}
          {this.state.isShowC && <div>
            <div>
              <p>Giao diện 3</p>
            </div>
          </div>}
        </Drawer>
      </div >
    );
  };
}