render(){ return <Dropdown item simple className={'right'} text={this.props.store.configStore.language}> <Dropdown.Menu> { AVAILABLE_LANGUAGES.map(locale => { return <Dropdown.Item key={locale} onClick={() => this.props.store.configStore.language = locale}>{locale}</Dropdown.Item>; }) } </Dropdown.Menu> </Dropdown> }
render() { const {t} = this.props; const {activeIndex} = this.state; return <React.Fragment> <Menu.Item as={NavLink} exact={true} to={route('/')} onClick={this.handleMenuItemClick}> <Icon name='home'/> {t('link.home')} </Menu.Item> <Menu.Item as={NavLink} to={route('/books')} onClick={this.handleMenuItemClick}> <Icon name='book'/> {t('activerecord.models.book.other')} </Menu.Item> <ExampleSubmenu activeIndex={activeIndex} onClick={(e, {index}) => this.setState({activeIndex: (index === this.state.activeIndex ? -1 : index)})}/> </React.Fragment>; }
render() { return ( <Visibility onBottomPassed={this.stickTopMenu} onBottomVisible={this.unStickTopMenu} once={false}> <Menu borderless fixed={this.state.menuFixed && 'top'} style={this.state.menuFixed ? styleHelper.fixedMenuStyle : styleHelper.menuStyle}> <Container text> <Menu.Item as={Link} to='/' exact="true"> <Image size='mini' src='https://react.semantic-ui.com/logo.png'/> <Menu.Item header>Movie App</Menu.Item> </Menu.Item> <Menu.Item as={NavLink} to='/movies' exact>Movies</Menu.Item> <Menu.Item as={NavLink} to='/movies/new' exact>Add New</Menu.Item> </Container> </Menu> </Visibility> ); }
function AppLayout({ showBack, title = "Pop Movie", children, router }) { const goBack = e => { e.preventDefault(); return router.history.goBack(); }; return ( <div> <Menu inverted size="large" borderless className="app-nav"> {showBack && <Menu.Item icon="chevron left" onClick={goBack} />} <Menu.Item header> <Header as="h3" inverted> <Header.Content>{title}</Header.Content> </Header> </Menu.Item> <Menu.Menu position="right"> <Menu.Item name="" icon="ellipsis vertical" /> </Menu.Menu> </Menu> <Container fluid className="app-container"> {children} </Container> </div> ); }
const ExampleSubmenu = props => <React.Fragment> <Accordion as={Menu.Item} inverted> <Accordion.Title active={props.activeIndex === 0} content='More' index={0} onClick={props.onClick} /> <Accordion.Content active={props.activeIndex === 0}> <Menu.Item as={Link} to={route("/")}><Icon name='edit'/>Edit Stuff</Menu.Item> <Menu.Item as={Link} to={route("/")}><Icon name='tree'/>Save the world</Menu.Item> </Accordion.Content> </Accordion> <Accordion as={Menu.Item} inverted> <Accordion.Title active={props.activeIndex === 1} content='Even More' index={1} onClick={props.onClick} /> <Accordion.Content active={props.activeIndex === 1}> <Menu.Item as={Link} to={route("/")}><Icon name='user'/>Show Profile</Menu.Item> </Accordion.Content> </Accordion> </React.Fragment>
render() { return ( <Menu inverted fixed="top"> <Container> <Menu.Item header> <img src="assets/logo.png" alt="logo" /> MGX ĐĂNG KÝ </Menu.Item> <Menu.Item as={NavLink} exact to="/boss" name="DANG KY CHU" /> <Menu.Item as={NavLink} to="/employee" name="DANG KY NHAN VIEN" /> <Menu.Item as={NavLink} to="/test" name="Test MGX" /> </Container> </Menu> ); }
render() { return ( <Menu fixed='top' inverted borderless> <Container> <Menu.Item header> MobX Demo </Menu.Item> <Menu.Item active={this.isActivePage(0)}> <Link href="/"> <a onClick={() => {this.setActivePage(0)}}>Home</a> </Link> </Menu.Item> <Menu.Item active={this.isActivePage(1)}> <Link href="/counter"> <a onClick={() => {this.setActivePage(1)}}>Counter</a> </Link> </Menu.Item> </Container> </Menu> ) }