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 { 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 {
}
@ -23,22 +23,52 @@ class LeftMenu extends React.Component<Props, State> {
this.state = {
};
window.addEventListener('resize', () => {
console.log(window);
});
// window.addEventListener('resize', () => {
// console.log(window);
// });
}
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 (
<Menu fixed='left' inverted vertical borderless>
<Menu.Item name='User'>
<Accordion>
<Accordion.Title>
<Menu.Item name='User' >
<Header textAlign='center'>
<Image src='http://glia.ca/scm/2013/ge1127_b/wp-content/uploads/2013/10/594partner-profile-pic-An.jpg'
size='mini' shape='circular' href='/' />
size='mini' shape='circular' />
</Header>
</Menu.Item>
</Accordion.Title>
<Accordion.Content>
{userMenu}
</Accordion.Content>
</Accordion>
<Menu.Item name='Home' href='/' >
<Header inverted sub icon='home' content='Home' />
</Menu.Item>
@ -108,36 +138,13 @@ class LeftMenu extends React.Component<Props, State> {
<Menu.Item name='Settings' href='/' >
<Header inverted sub icon='setting' content='Settings' />
</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>
);
}
private handleMemberMenu = () => {
alert('member');
}
}