frontend/smart-hut/src/components/HeaderController.js

import React from "react";
import { Dropdown, Icon, Grid, Divider } from "semantic-ui-react";
import { Segment, Image } from "semantic-ui-react";

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 GridExampleInverted = (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>
);

export default class MyHeader extends React.Component {
  render() {
    return (
      <div>
        <GridExampleInverted logout={this.props.logout} />
      </div>
    );
  }
}

// const navbar = {
//     backgroundColor: "#20222b",
//     color: "white",
//     marginBottom: "4.6rem",
//     padding: "3.2rem 0"
// };
// const navbar__buttons = {
//     borderBottom: "1px solid lighten($light-blue, 10%)",
//     display: "flex",
//     justifyContent: "space-between",
//     padding: "3.2rem 1.6rem"
// }
// const button = {
//         background: "#8357c5",
//         border: "none",
//         borderBottom: "1px solid purple",
//         color: "white",
//         fontWeight: "500",
//         padding: "1.2rem"
// }

//   const MenuExampleButtons = () => (
//     <Menu>
//       <Menu.Item>
//         <Button primary>Sign up</Button>
//       </Menu.Item>

//       <Menu.Item>
//         <Button>Log-in</Button>
//       </Menu.Item>
//       <Menu.Item>
//         <Button>Log-in</Button>
//       </Menu.Item>
//       <Menu.Item>
//         <Button>Log-in</Button>
//       </Menu.Item>
//     </Menu>
//   )

// class MenuExampleInvertedSegment extends Component {
//     state = { activeItem: 'home' }

//     handleItemClick = (e, { name }) => this.setState({ activeItem: name })

//     render() {
//       const { activeItem } = this.state

//       return (
//         <Segment inverted>
//           <Menu inverted secondary>
//             <Menu.Item
//               name='home'
//               active={activeItem === 'home'}
//               onClick={this.handleItemClick}
//             />
//             <Menu.Item
//               name='messages'
//               active={activeItem === 'messages'}
//               onClick={this.handleItemClick}
//             />
//             <Menu.Item />
//             <Menu.Item />
//             <Menu.Item />
//             <Menu.Item />
//             <Menu.Item />
//             <Menu.Item />
//             <HeaderExampleIconProp />
//             <Menu.Item />
//             <Menu.Item />
//             <Menu.Item />
//             <Menu.Item />
//             <Menu.Item />
//             <Menu.Item
//                 name='messages'
//                 active={activeItem === 'messages'}
//                 onClick={this.handleItemClick}
//             />
//             <Dropdown item icon='wrench' simple>
//             <Dropdown.Menu>
//               <Dropdown.Item>
//                 <Icon name='dropdown' />
//                 <span className='text'>New</span>

//                 <Dropdown.Menu>
//                   <Dropdown.Item>Document</Dropdown.Item>
//                   <Dropdown.Item>Image</Dropdown.Item>
//                 </Dropdown.Menu>
//               </Dropdown.Item>
//               <Dropdown.Item>Open</Dropdown.Item>
//               <Dropdown.Item>Save...</Dropdown.Item>
//               <Dropdown.Item>Edit Permissions</Dropdown.Item>
//               <Dropdown.Divider />
//               <Dropdown.Header>Export</Dropdown.Header>
//               <Dropdown.Item>Share</Dropdown.Item>
//             </Dropdown.Menu>
//           </Dropdown>
//             <ImageExampleWrapped />
//             <Menu.Item />
//           </Menu>
//         </Segment>
//       )
//     }
//   }