account menu

This commit is contained in:
insanity 2017-09-01 15:14:30 +09:00
parent 130594e42d
commit 8c73c1360f
2 changed files with 46 additions and 39 deletions

View File

@ -2,7 +2,7 @@ import * as React from 'react';
import { connect, Dispatch } from 'react-redux'; import { connect, Dispatch } from 'react-redux';
import { push as routerPush } from 'react-router-redux'; import { push as routerPush } from 'react-router-redux';
import { Menu, Dropdown, Icon, Header, Image } from 'semantic-ui-react'; import { Menu, Dropdown, Icon, Header, Image, Accordion } from 'semantic-ui-react';
export interface StateProps { export interface StateProps {
} }
@ -23,22 +23,52 @@ class LeftMenu extends React.Component<Props, State> {
this.state = { this.state = {
}; };
window.addEventListener('resize', () => { // window.addEventListener('resize', () => {
console.log(window); // console.log(window);
}); // });
} }
public render(): JSX.Element { public render(): JSX.Element {
let userMenu =
<Menu.Item>
<Menu.Header name='Account' >
<Header inverted sub icon='user' content='Account' />
</Menu.Header>
<Menu.Menu>
<Menu.Item onClick={(e) => this.props.onChangeUrl('/account/signin')} style={{ 'marginLeft': '30px' }}>
Sign In
</Menu.Item>
<Menu.Item onClick={(e) => this.props.onChangeUrl('/account/signup')} style={{ 'marginLeft': '30px' }}>
Sign Up
</Menu.Item>
<Menu.Item onClick={(e) => this.props.onChangeUrl('/account/pw_confirm')} style={{ 'marginLeft': '30px' }}>
PW Confirm
</Menu.Item>
<Menu.Item onClick={(e) => this.props.onChangeUrl('/account/modify')} style={{ 'marginLeft': '30px' }}>
Modify
</Menu.Item>
<Menu.Item onClick={(e) => this.props.onChangeUrl('/account/logout')} style={{ 'marginLeft': '30px' }}>
Log Out
</Menu.Item>
</Menu.Menu>
</Menu.Item>;
return ( return (
<Menu fixed='left' inverted vertical borderless> <Menu fixed='left' inverted vertical borderless>
<Menu.Item name='User'> <Accordion>
<Header textAlign='center'> <Accordion.Title>
<Image src='http://glia.ca/scm/2013/ge1127_b/wp-content/uploads/2013/10/594partner-profile-pic-An.jpg' <Menu.Item name='User' >
size='mini' shape='circular' href='/' /> <Header textAlign='center'>
</Header> <Image src='http://glia.ca/scm/2013/ge1127_b/wp-content/uploads/2013/10/594partner-profile-pic-An.jpg'
</Menu.Item> size='mini' shape='circular' />
</Header>
</Menu.Item>
</Accordion.Title>
<Accordion.Content>
{userMenu}
</Accordion.Content>
</Accordion>
<Menu.Item name='Home' href='/' > <Menu.Item name='Home' href='/' >
<Header inverted sub icon='home' content='Home' /> <Header inverted sub icon='home' content='Home' />
</Menu.Item> </Menu.Item>
@ -108,36 +138,13 @@ class LeftMenu extends React.Component<Props, State> {
<Menu.Item name='Settings' href='/' > <Menu.Item name='Settings' href='/' >
<Header inverted sub icon='setting' content='Settings' /> <Header inverted sub icon='setting' content='Settings' />
</Menu.Item> </Menu.Item>
<Menu.Item>
<Menu.Header name='Account' >
<Header inverted sub icon='user' content='Account' />
</Menu.Header>
<Menu.Menu>
<Menu.Item onClick={(e) => this.props.onChangeUrl('/account/signin')} style={{ 'marginLeft': '30px' }}>
Sign In
</Menu.Item>
<Menu.Item onClick={(e) => this.props.onChangeUrl('/account/signup')} style={{ 'marginLeft': '30px' }}>
Sign Up
</Menu.Item>
<Menu.Item onClick={(e) => this.props.onChangeUrl('/account/pw_confirm')} style={{ 'marginLeft': '30px' }}>
PW Confirm
</Menu.Item>
<Menu.Item onClick={(e) => this.props.onChangeUrl('/account/modify')} style={{ 'marginLeft': '30px' }}>
Modify
</Menu.Item>
<Menu.Item onClick={(e) => this.props.onChangeUrl('/account/logout')} style={{ 'marginLeft': '30px' }}>
Log Out
</Menu.Item>
<Menu.Item onClick={(e) => this.props.onChangeUrl('/temp/discoveryTree')} style={{ 'marginLeft': '30px' }}>
Discovery Tree
</Menu.Item>
</Menu.Menu>
</Menu.Item>
</Menu> </Menu>
); );
} }
private handleMemberMenu = () => {
alert('member');
}
} }