106 lines
3.0 KiB
JavaScript
106 lines
3.0 KiB
JavaScript
import React from "react";
|
|
import { Dropdown, Icon, Grid, Divider } from "semantic-ui-react";
|
|
import { Segment, Image } from "semantic-ui-react";
|
|
import { BrowserView, MobileView } from "react-device-detect";
|
|
|
|
const AvatarImage = () => (
|
|
<Image src="avatar3.png" style={{ width: "25px", height: "auto" }} centered />
|
|
);
|
|
|
|
const IconHomeImage = () => (
|
|
<Image
|
|
src="smart-home.png"
|
|
style={{ width: "50px", height: "auto" }}
|
|
centered
|
|
as="a"
|
|
href="/"
|
|
/>
|
|
);
|
|
|
|
const TitleImage = () => <Image src="title7.png" size="medium" centered />;
|
|
|
|
const BrowserStructure = (props) => (
|
|
<Grid columns="equal" divided inverted padded>
|
|
<Grid.Row color="black" textAlign="center">
|
|
<Grid.Column width={3} height={0.5}>
|
|
<Segment color="black" inverted>
|
|
<IconHomeImage />
|
|
</Segment>
|
|
</Grid.Column>
|
|
<Grid.Column>
|
|
<Segment color="black" inverted>
|
|
<TitleImage />
|
|
</Segment>
|
|
</Grid.Column>
|
|
<Grid.Column width={2} heigth={1}>
|
|
<AvatarImage />
|
|
<Divider />
|
|
<Dropdown item icon="setting" size="huge">
|
|
<Dropdown.Menu>
|
|
<Dropdown.Item>
|
|
<Icon name="dropdown" />
|
|
<span className="text">Settings</span>
|
|
<Dropdown.Menu>
|
|
<Dropdown.Item>Document</Dropdown.Item>
|
|
<Dropdown.Item>Image</Dropdown.Item>
|
|
</Dropdown.Menu>
|
|
</Dropdown.Item>
|
|
<Dropdown.Item>See profile...</Dropdown.Item>
|
|
<Dropdown.Divider />
|
|
<Dropdown.Item onClick={props.logout}>Logout</Dropdown.Item>
|
|
</Dropdown.Menu>
|
|
</Dropdown>
|
|
</Grid.Column>
|
|
</Grid.Row>
|
|
</Grid>
|
|
);
|
|
|
|
const MobileStructure = (props) => (
|
|
<Grid columns="equal" divided inverted padded>
|
|
<Grid.Row color="black" textAlign="center">
|
|
<Segment color="black" inverted>
|
|
<TitleImage />
|
|
</Segment>
|
|
</Grid.Row>
|
|
<Grid.Row color="black" textAlign="center">
|
|
<Grid.Column>
|
|
<IconHomeImage />
|
|
</Grid.Column>
|
|
<Grid.Column>
|
|
<AvatarImage />
|
|
<Divider />
|
|
<Dropdown item icon="setting" size="huge">
|
|
<Dropdown.Menu>
|
|
<Dropdown.Item>
|
|
<Icon name="dropdown" />
|
|
<span className="text">Settings</span>
|
|
<Dropdown.Menu>
|
|
<Dropdown.Item>Document</Dropdown.Item>
|
|
<Dropdown.Item>Image</Dropdown.Item>
|
|
</Dropdown.Menu>
|
|
</Dropdown.Item>
|
|
<Dropdown.Item>See profile...</Dropdown.Item>
|
|
<Dropdown.Divider />
|
|
<Dropdown.Item onClick={props.logout}>Logout</Dropdown.Item>
|
|
</Dropdown.Menu>
|
|
</Dropdown>
|
|
</Grid.Column>
|
|
</Grid.Row>
|
|
</Grid>
|
|
);
|
|
|
|
export default class MyHeader extends React.Component {
|
|
render() {
|
|
return (
|
|
<div>
|
|
<BrowserView>
|
|
<BrowserStructure logout={this.props.logout} />
|
|
</BrowserView>
|
|
<MobileView>
|
|
<MobileStructure />
|
|
</MobileView>
|
|
</div>
|
|
);
|
|
}
|
|
}
|