antd#Menu JavaScript Examples

render() {
    const { className } = this.props;
    const selectedLang = getLocale();
    const locales = ['zh-CN', 'zh-TW', 'en-US', 'pt-BR'];
    const languageLabels = {
      'zh-CN': '简体中文',
      'zh-TW': '繁体中文',
      'en-US': 'English',
      'pt-BR': 'Português',
    };
    const languageIcons = {
      'zh-CN': '??',
      'zh-TW': '??',
      'en-US': '??',
      'pt-BR': '??',
    };
    const langMenu = (
      <Menu className={styles.menu} selectedKeys={[selectedLang]} onClick={this.changeLang}>
        {locales.map(locale => (
          <Menu.Item key={locale}>
            <span role="img" aria-label={languageLabels[locale]}>
              {languageIcons[locale]}
            </span>{' '}
            {languageLabels[locale]}
          </Menu.Item>
        ))}
      </Menu>
    );
    return (
      <HeaderDropdown overlay={langMenu} placement="bottomRight">
        <span className={classNames(styles.dropDown, className)}>
          <Icon type="global" title={formatMessage({ id: 'navBar.lang' })} />
        </span>
      </HeaderDropdown>
    );
  }

render() {
        return (
            <div>
                <div className="logo">
                    <img src="/assets/logo-ant.svg" alt=""/>
                    <h2>Ant Design of React</h2>   
                </div>

                <Menu theme="dark" defaultOpenKeys={['/admin/manage_blog']}  mode="inline">
                    {this.state.menuTreeNode}
                </Menu>
            </div>
        );
    }

ExportTabSwitcher = ({ changeTab }) => {
  const [current, setCurrent] = useState("json");

  const handleClick = (e) => {
    changeTab(e.key);
    setCurrent(e.key);
  };

  return (
    <Menu onClick={handleClick} selectedKeys={[current]} mode="horizontal">
      <Menu.Item key="json">
        <Icon type="code" />
        JSON Values
      </Menu.Item>
    </Menu>
  );
}

App = () => (
  <Layout>
    <Header style={{ position: 'fixed', zIndex: 1, width: '100%' }}>
      <div className="logo" />
      <Menu theme="light" mode="horizontal" defaultSelectedKeys={['1']}>
        <Menu.Item key="logo"><img className="ant-menu-item" src={"qiskitflow_logo.png"}/></Menu.Item>
        <Menu.Item key="1"> 
          Experiments
        </Menu.Item>
      </Menu>
    </Header>
    <Content className="site-layout" style={{ padding: '0 50px', marginTop: 64 }}>
      <Breadcrumb style={{ margin: '16px 0' }}>
        <Breadcrumb.Item>QiskitFlow</Breadcrumb.Item>
        <Breadcrumb.Item>Experiments</Breadcrumb.Item>
      </Breadcrumb>
      <div className="site-layout-background" style={{ padding: 24, minHeight: "80vh", backgroundColor: "white" }}>
       <ExperimentsPage />
      </div>
    </Content>
    <Footer style={{ textAlign: 'center' }}>QiskitFlow ©2020 </Footer>
  </Layout>
)

AssetMenu = styled(Menu)`
  background: ${(props) => props.theme.sidePanelBackground}!important;
  max-height: 260px;
  overflow-y: scroll;

  li {
    padding-left: 16px;
    border-bottom: 1px solid ${(props) => props.theme.seperator}!important;

    :hover {
      background: ${(props) => props.theme.primary} !important;
      color: ${(props) => props.theme.textBigButton} !important;
    }
  }
`

App = () => {
  const [refresh, setRefresh] = useState(0);
  const [selectedKeys, setSelectKeys] = useState(["react"]);
  useEffect(() => {
    const { pathname } = window.location;
    const menu = menus.find((item) => `${BASE_NAME}${item.route}` === pathname);
    setSelectKeys(() => [menu ? menu.key : "react"]);
  }, [refresh]);

  // 设置路由命名空间
  return (
    <Router basename={BASE_NAME}>
      <section>
        <Menu
          onClick={() => setRefresh((refresh) => ++refresh)}
          selectedKeys={selectedKeys}
          mode="horizontal"
        >
          {menus.map((item) => (
            <Menu.Item key={item.key}>
              <Link to={item.route}>{item.title}</Link>
            </Menu.Item>
          ))}
        </Menu>
        <Suspense fallback={null}>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/list" component={List} />
          </Switch>
        </Suspense>
      </section>
    </Router>
  );
}

Nav = ({ user }) => {
  return (
    <Menu mode="horizontal" className="navUsers">
      <Menu.Item>
      <HomeOutlined />
        <Link to="/Home">Inicio</Link>
      </Menu.Item>
      <Menu.Item key="app">
        <Link to="/Projects">
          <AppstoreOutlined />
          Proyectos
        </Link>
      </Menu.Item>
      <Menu.Item>
        <Link to="/Tecnologias">
          <SettingOutlined />
          Tecnologías
        </Link>
      </Menu.Item>
      {user.admin ? (
        <Menu.Item>
          <UserOutlined />
          <Link to="/AdminUser">Usuarios</Link>
        </Menu.Item>
      ) : null}
      {user.admin ? (
        <Menu.Item>
          <MailOutlined />
          <Link to="/Informes">Informes</Link>
        </Menu.Item>
      ) : null}
    </Menu>
  );
}

render() {
    const { className } = this.props;
    const selectedLang = getLocale();
    const locales = ['zh-CN', 'zh-TW', 'en-US', 'pt-BR'];
    const languageLabels = {
      'zh-CN': '简体中文',
      'zh-TW': '繁体中文',
      'en-US': 'English',
      'pt-BR': 'Português',
    };
    const languageIcons = {
      'zh-CN': '??',
      'zh-TW': '??',
      'en-US': '??',
      'pt-BR': '??',
    };
    const langMenu = (
      <Menu className={styles.menu} selectedKeys={[selectedLang]} onClick={this.changeLang}>
        {locales.map(locale => (
          <Menu.Item key={locale}>
            <span role="img" aria-label={languageLabels[locale]}>
              {languageIcons[locale]}
            </span>{' '}
            {languageLabels[locale]}
          </Menu.Item>
        ))}
      </Menu>
    );
    return (
      <HeaderDropdown overlay={langMenu} placement="bottomRight">
        <span className={classNames(styles.dropDown, className)}>
          <Icon type="global" title={formatMessage({ id: 'navBar.lang' })} />
        </span>
      </HeaderDropdown>
    );
  }

function LeftMenu(props) {
  return (
    <Menu mode={props.mode}>
      <Menu.Item key="mail">
        <a href="/">Home</a>
      </Menu.Item>
      {/* <Menu.Item key="mail">
        <a href="/list"></a>
      </Menu.Item> */}
      <SubMenu title={<a href="/list">사연게시판</a>}>
        {/* <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>
  );
}

menu = (signOut, history) => (
  <Menu>
    <Menu.Item>
      <a
        href="https://github.com/cnscorpions/React-Nest-Admin"
        target="_blank"
        rel="noopener noreferrer"
      >
        源码
      </a>
    </Menu.Item>
    <Menu.Item onClick={() => signOut(history)}>
      <span>退出</span>
    </Menu.Item>
  </Menu>
)

SocialSharing = ({ message }) => {
  const handleWpSharing = () => {
    const url = `whatsapp://send?text=${encodeURIComponent(message())}`;
    window.open(url, '_blank');
  };

  const handleFbSharing = () => {
    const url = `https://www.facebook.com/sharer/sharer.php?u=${document.location.href}`;
    window.open(url, '_blank');
  };

  const menu = (
    <Menu>
      <Menu.Item key='1' onClick={handleWpSharing}>
        <WhatsAppOutlined /> Via WhatsApp
      </Menu.Item>
      <Menu.Item key='2' onClick={handleFbSharing}>
        <FacebookOutlined /> Via Facebook
      </Menu.Item>
    </Menu>
  );
  return (
    <div className='social-sharing'>
      <Dropdown overlay={menu} trigger={['click', 'hover']}>
        <Button>
          <ShareAltOutlined /> Compartilhar
        </Button>
      </Dropdown>
    </div>
  );
}

UserMenuDropdown = props => {
  const onMenuClick = event => {
    const { key } = event;
    const { dispatch } = props;

    if (key === 'logout') {
      if (dispatch) {
        dispatch({
          type: 'user/logout',
        });
      }

      return;
    }
  };

  const UserMenu = () => {
    return (
      <Menu onClick={onMenuClick}>
        <Menu.Item key="logout">退出登陆</Menu.Item>
      </Menu>
    );
  };

  return (
    <Dropdown overlay={UserMenu} trigger={['click']}>
      <div>
        <UserOutlined style={{ fontSize: '22px' }} />
        用户中心 <DownOutlined />
      </div>
    </Dropdown>
  );
}

render() {
    const menu = (
      <Menu className="menu" onClick={this.handleDropdownClick}>
        <Menu.Item key="logout">
          <span>
            <Icon type="logout" />
            退出登录
          </span>
        </Menu.Item>
      </Menu>
    )
    return getCookies('username') ? (
      <Header style={{ zIndex: 9 }}>
        <a href="/" style={{ color: '#fff', fontSize: 24 }}>
          AgileTC
        </a>
        {getCookies('username') ? (
          <Dropdown overlay={menu} overlayClassName="dropStyle" placement="bottomLeft">
            <div className="user">
              <Icon type="user" className="userIcon" />
              <span className="username">{getCookies('username')}</span>
              <Icon type="down" className="dowm" />
            </div>
          </Dropdown>
        ) : (
          <a href="/login" className="loginCss">
            登录/注册
          </a>
        )}
      </Header>
    ) : null
  }

MenuUser = props => (
  <Menu theme="dark" className="user-menu">
    {Object.keys(HeaderMenu).map(key => {
      let item = HeaderMenu[key];
      const isAdmin = props.role === 'admin';
      if (item.adminFlag && !isAdmin) {
        return null;
      }
      return (
        <Menu.Item key={key}>
          {item.name === '个人中心' ? (
            <Link to={item.path + `/${props.uid}`}>
              <Icon type={item.icon} />
              {item.name}
            </Link>
          ) : (
            <Link to={item.path}>
              <Icon type={item.icon} />
              {item.name}
            </Link>
          )}
        </Menu.Item>
      );
    })}
    <Menu.Item key="9">
      <a onClick={props.logout}>
        <Icon type="logout" />退出
      </a>
    </Menu.Item>
  </Menu>
)

ProjectManagement = () => {
  const menu = (
    <Menu selectable={false}>
      <Menu.ItemGroup title="Active">
        <Menu.Item>
          <Link to="/">Project Management</Link>
        </Menu.Item>
        <Menu.Item>
          <Link to="/">User Interface Development</Link>
        </Menu.Item>
        <Menu.Item>
          <Link to="/">Documentation</Link>
        </Menu.Item>
      </Menu.ItemGroup>
      <Menu.ItemGroup title="Inactive">
        <Menu.Item>
          <Link to="/">Marketing</Link>
        </Menu.Item>
      </Menu.ItemGroup>
      <Menu.Divider />
      <Menu.Item>
        <Link to="/">
          <i className="fe fe-settings mr-2" /> Settings
        </Link>
      </Menu.Item>
    </Menu>
  )
  return (
    <Dropdown overlay={menu} trigger={['click']} placement="bottomLeft">
      <div className={styles.dropdown}>
        <i className={`${styles.icon} fe fe-database`} />
        <span className="d-none d-xl-inline">
          <FormattedMessage id="topBar.projectManagement" />
        </span>
      </div>
    </Dropdown>
  )
}

render() {
        const {
            theme,
            selectedKeys,
        } = this.props;
        return (
            <div styleName="header-menu">
                <Menu
                    selectedKeys={selectedKeys}
                    mode="horizontal"
                    theme={theme}
                >
                    {this.renderMenus()}
                </Menu>
            </div>
        );
    }

render() {
    const { className } = this.props;
    const selectedLang = getLocale();
    const langMenu = (
      <Menu className={styles.menu} selectedKeys={[selectedLang]} onClick={this.changLang}>
        <Menu.Item key="zh-CN">
          <FormattedMessage id="lang.simplified-chinese" />
        </Menu.Item>
        <Menu.Item key="zh-TW">
          <FormattedMessage id="lang.traditional-chinese" />
        </Menu.Item>
        <Menu.Item key="en-US">
          <FormattedMessage id="lang.english" />
        </Menu.Item>
        <Menu.Item key="pt-BR">
          <FormattedMessage id="lang.portuguese" />
        </Menu.Item>
      </Menu>
    );
    return (
      <Dropdown overlay={langMenu}>
        <span className={classNames(styles.dropDown, className)}>
          <FormattedMessage id="navBar.lang" /> <Icon type="down" />
        </span>
      </Dropdown>
    );
  }

render() {
    const {openKeys, selectedKeys} = this.state
    return (
      <Menu
        onOpenChange={this.onOpenChange}
        onClick={({key}) => this.setState({selectedKeys: [key]})}
        openKeys={openKeys}
        selectedKeys={selectedKeys}
        theme={this.props.theme ? this.props.theme : 'dark'}
        mode='inline'>
        {
          this.props.menus && this.props.menus.map(item => {
            return item.subs && item.subs.length > 0 ? this.renderSubMenu(item) : this.renderMenuItem(item)
          })
        }
      </Menu>
    )
  }

export default function Sidebar({ defaultSelected }) {
  const [collapsed, setCollapsed] = useState(false);

  return (
    <Sider collapsible collapsed={collapsed} onCollapse={setCollapsed}>
      <div className="dashboard-logo">
        <Link href="/">
          <a className="dashboard-logo__link">{collapsed ? '⏰' : 'ZeroQueue ⏰'}</a>
        </Link>
      </div>
      <Menu theme="dark" defaultSelectedKeys={[defaultSelected || null]} mode="inline">
        <Menu.Item key="overview">
          <Link href="/dashboard">
            <a className="dashboard-logo__link">
              <BookOutlined />
              <span>Overview</span>
            </a>
          </Link>
        </Menu.Item>
        <Menu.Item key="settings">
          <Link href="/settings">
            <a className="dashboard-logo__link">
              <SettingOutlined />
              <span>Settings</span>
            </a>
          </Link>
        </Menu.Item>
      </Menu>
    </Sider>
  );
}

GroupMenu = ({ regionStore }) => {
  return (
    <Menu selectedKeys={[regionStore.view]}>
      <Menu.Item key="regions">
        <div
          onClick={ev => {
            regionStore.setView("regions");
            ev.preventDefault();
            return false;
          }}
          style={{ width: "135px", display: "flex", justifyContent: "space-between" }}
        >
          <div>Regions</div>
        </div>
      </Menu.Item>
      <Menu.Item key="labels">
        <div
          onClick={ev => {
            regionStore.setView("labels");
            ev.preventDefault();
            return false;
          }}
          style={{ width: "135px", display: "flex", justifyContent: "space-between" }}
        >
          <div>Labels</div>
        </div>
      </Menu.Item>
    </Menu>
  );
}

HeatmapSettings = (props) => {
  const { componentType } = props;

  const renderMenu = () => (
    <Menu size='small'>
      <SubMenu key='metadataTracks' title='Metadata tracks' icon={<></>} popupClassName='no-style-menu-item'>
        <NoStyleAntdMenuItem>
          <HeatmapMetadataTrackSettings componentType={componentType} />
        </NoStyleAntdMenuItem>
      </SubMenu>
      <SubMenu key='groupBy' title='Group by' icon={<></>}>
        <NoStyleAntdMenuItem>
          <HeatmapGroupBySettings componentType={componentType} />
        </NoStyleAntdMenuItem>
      </SubMenu>
    </Menu>
  );

  return (
    <Dropdown arrow type='link' size='small' overlay={renderMenu()} trigger={['click']}>
      <Tooltip title='Settings'>
        <Button
          type='text'
          icon={<SettingOutlined />}
          // these classes are added so that the settings button
          // is the same style as the remove button
          className='bp3-button bp3-minimal'
        />
      </Tooltip>
    </Dropdown>
  );
}

function DropDownRowMenu({ row }) {
  const Show = () => {};
  function Edit() {}
  function Delete() {}
  return (
    <Menu style={{ width: 130 }}>
      <Menu.Item icon={<EyeOutlined />} onClick={Show}>
        Show
      </Menu.Item>
      <Menu.Item icon={<EditOutlined />} onClick={Edit}>
        Edit
      </Menu.Item>
      <Menu.Item icon={<DeleteOutlined />} onClick={Delete}>
        Delete
      </Menu.Item>
    </Menu>
  );
}

function DropDownRowMenu({ row }) {
  const Show = () => {};
  function Edit() {}
  function Delete() {}
  return (
    <Menu style={{ width: 130 }}>
      <Menu.Item icon={<EyeOutlined />} onClick={Show}>
        Show
      </Menu.Item>
      <Menu.Item icon={<EditOutlined />} onClick={Edit}>
        Edit
      </Menu.Item>
      <Menu.Item icon={<DeleteOutlined />} onClick={Delete}>
        Delete
      </Menu.Item>
    </Menu>
  );
}

render() {
    const { openKeys, selectedKeys } = this.state;
    return (
      <Menu
        onOpenChange={this.onOpenChange}
        onClick={({ key }) => this.setState({ selectedKeys: [key] })}
        openKeys={openKeys}
        selectedKeys={selectedKeys}
        theme={this.props.theme ? this.props.theme : 'dark'}
        mode="inline"
        inlineCollapsed={false}
      >
        {this.props.menus &&
          this.props.menus.map((item) => {
            return item.subs && item.subs.length > 0
              ? this.renderSubMenu(item)
              : this.renderMenuItem(item);
          })}
      </Menu>
    );
  }

render() {
    const { onMenuClick, theme } = this.props;
    const role = localStorage.getItem('role');
    console.log('GlobalHeaderRight render role', role);
    const menu = (
      <Menu className={styles.menu} selectedKeys={[]} onClick={onMenuClick}>
        <Menu.Item key="logout">
          <Icon type="logout" />
          <FormattedMessage id="menu.account.logout" defaultMessage="logout" />
        </Menu.Item>
      </Menu>
    );
    let className = styles.right;
    if (theme === 'dark') {
      className = `${styles.right}  ${styles.dark}`;
    }
    return (
      <div className={className}>
        <Tooltip title={formatMessage({ id: 'component.globalHeader.help' })}>
          <a
            target="_blank"
            href="https://pro.ant.design/docs/getting-started"
            rel="noopener noreferrer"
            className={styles.action}
          >
            <p style={{ color: '#666' }}>
              <Icon type="question-circle-o" /> 使用文档
            </p>
          </a>
        </Tooltip>
        <HeaderDropdown overlay={menu}>
          <span className={`${styles.action} ${styles.account}`}>
            <p>{role ? role.split('/')[1] : '管理员'}</p>
          </span>
        </HeaderDropdown>
      </div>
    );
  }

{ SubMenu } = Menu

render() {
    const {
      currentUser = {
        avatar: '',
        name: '',
      },
      menu,
    } = this.props;
    const menuHeaderDropdown = (
      <Menu className={styles.menu} selectedKeys={[]} onClick={this.onMenuClick}>
        {menu && (
          <Menu.Item key="center">
            <UserOutlined />
            个人中心
          </Menu.Item>
        )}
        {menu && (
          <Menu.Item key="settings">
            <SettingOutlined />
            个人设置
          </Menu.Item>
        )}
        {menu && <Menu.Divider />}

        <Menu.Item key="logout">
          <LogoutOutlined />
          退出登录
        </Menu.Item>
      </Menu>
    );
    return currentUser && currentUser.name ? (
      <HeaderDropdown overlay={menuHeaderDropdown}>
        <span className={`${styles.action} ${styles.account}`}>
          <Avatar size="small" className={styles.avatar} src={currentUser.avatar} alt="avatar" />
          {/*<span className={`${styles.name} anticon`}>{currentUser.name}</span>*/}
        </span>
      </HeaderDropdown>
    ) : (
      <span className={`${styles.action} ${styles.account}`}>
        <Spin
          size="small"
          style={{
            marginLeft: 8,
            marginRight: 8,
          }}
        />
      </span>
    );
  }

function NotificationNav(props) {
	const { fetchUserVideos, userId, videos, organizations, defaultOrganization, selectedOrganization } = props;

	useEffect(() => {
		socket.on("insertedFeedback", () => {
			fetchUserVideos(userId, organization_id);
		});
	}, []);

	let organization_id = "";

	if (typeof selectedOrganization === "undefined" || typeof defaultOrganization === "undefined") {
		organization_id = "";
	} else {
		organization_id = selectedOrganization.id ? selectedOrganization.id : defaultOrganization.id;
	}

	//getting feedback data for each video
	let feedback = videos.map((item) => {
		return item.feedback;
	});

	let userFeedback = gatherFeedback(feedback);

	// loop through Array or array for feedback and then obtain one single array
	function gatherFeedback(arr) {
		let newArray = [];
		for (let i = 0; i < arr.length; i++) {
			if (arr[i].length > 0) {
				for (let k = 0; k < arr[i].length; k++) {
					if (arr[i][k].viewed === false) {
						newArray.push(arr[i][k]);
					}
				}
			}
		}
		return newArray;
	}
	//populate feedback data into the menu itemm

	const menu = (
		<Menu>
			{userFeedback.length > 0 ? (
				userFeedback.map((item) => (
					<Menu.Item>
						<Link to={`/videos/${item.video_id}`}>
							{item.first_name} {item.last_name} left feedback on  {item.video_title}
						</Link>
					</Menu.Item>
				))
			) : (
				<Menu.Item>No new comments</Menu.Item>
			)}
		</Menu>
	);

	return (
		<>
			<Dropdown overlay={menu} className="margin-right">
				<a className="ant-dropdown-link" style={{ color: "grey" }} onClick={(e) => e.preventDefault()}>
					<Badge count={userFeedback.length} className="badger">
						<BellOutlined style={{ fontSize: "40px", color: "#FF7F50" }} />
					</Badge>
				</a>
			</Dropdown>
		</>
	);
}

{ SubMenu } = Menu