import React, { Component } from 'react'; import GuestMenu from './components/GuestMenu'; import CustomMenu from './components/CustomMenu'; import { Link } from 'react-router-dom' import { Menu, Dropdown } from 'semantic-ui-react'
class Toolbar extends Component {
constructor (props) { super(props) this.handleItemClick = (e, { name }) => this.setState({ activeItem: name }) this.handleMastMenuClick = (e, { name }) => this.setState({ activeItem: name, activeTitle : e.target.text }) this.state = {activeItem: "", activeTitle: "テーブル管理"} } render() { const { activeItem, activeTitle } = this.state if(this.props.user === undefined || this.props.user === null){ return (<Menu inverted pointing secondary> <GuestMenu activeItem={activeItem} onClick={this.handleItemClick}/> <Menu.Menu position='right'> <Menu.Item as={Link} to='/login'>ログイン</Menu.Item> <Menu.Item as={Link} to='/regist'>サインアップ</Menu.Item> </Menu.Menu> </Menu>) } const admin = this.props.user.role === "ADMIN" return( <Menu inverted pointing secondary> <GuestMenu activeItem={activeItem} onClick={this.handleItemClick}/> <CustomMenu activeItem={activeItem} onClick={this.handleItemClick} user={this.props.user} /> <Dropdown item text={activeTitle} style={ {display: admin ? 'block' : 'none'} } > <Dropdown.Menu> {{# sheet_arr}} <Menu.Item name='{{resource_path}}' active={activeItem === '{{resource_path}}'} as={Link} to='/{{resource_path}}' onClick={this.handleMastMenuClick} >{{model_title}}</Menu.Item> {{/ sheet_arr}} </Dropdown.Menu> </Dropdown> <Menu.Menu position='right'> <Menu.Item as={Link} to='/logout'> ログアウト </Menu.Item> </Menu.Menu> </Menu> ) }
}
export default Toolbar;