frontend/smart-hut/src/views/Navbar.js

import React, { Component } from 'react';
import { Menu, Grid, Icon, Responsive, Segment,  Dropdown } from "semantic-ui-react";
import {editButtonStyle} from "../components/dashboard/devices/styleComponents";
import ModalWindow from "../components/modalform";

class Navbar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeItemName: 'Home',
      activeItem: -1,
      edited: "",
      editMode : false
    }
  }

  editModeController = (e) => this.setState((prevState) => ({ editMode: !prevState.editMode }));

  handleClick = (e, {id, name}) => {
    let obj = undefined;
    this.props.rooms.forEach((e) => {
      if (e.id === id) {
        obj = e;
      }
    });

    this.setState({
	      activeItem: id,
        activeRoom: obj,
        activeItemName: name
     });
    this.props.handleItemClick(id)
  }

  render(){
    //const { activeItem } = this.state
    return (
      <div style={{background: '#1b1c1d!important'}}>
      <Segment.Group>
       <Responsive as={Segment} minWidth={768}>
          <Grid>
            <Grid.Row color='black'>
                <button style={editButtonStyle} onClick={this.editModeController}>Edit</button>
            </Grid.Row>
            <Grid.Row color='black'>
                <Menu inverted fluid vertical>
                  <Menu.Item
                    key={-1}
                    id={-1}
                    name='Home'
                    active={this.state.activeItem === -1}
                    onClick={this.handleClick}
                  >
                  <Grid>
                    <Grid.Row>
                      <Grid.Column>
                        <Icon name="home" size="small"/>
                      </Grid.Column>
                      <Grid.Column>
                        HOME
                      </Grid.Column>
                    </Grid.Row>
                  </Grid>

                  </ Menu.Item>

                 {this.props.rooms ?
                 this.props.rooms.map((e, i) => {
                   return (
                     <Menu.Item
                       id={e.id}
                       key={i}
                       name={e.name}
                       active={this.state.activeItem === e.id}
                       onClick={this.handleClick}
                      >
                      <Grid>
                        <Grid.Row>
                          <Grid.Column>
                            <Icon name={e.icon} size="small"/>
                          </Grid.Column>
                          <Grid.Column width={8}>
                            {e.name}
                          </Grid.Column>
                          <Grid.Column floated="right">
                            {this.state.editMode ?
                              <ModalWindow type="modify" idRoom={e} updateRoom={this.props.updateRoom} deleteRoom={this.props.deleteRoom}/>
                              : null
                            }
                          </Grid.Column>
                        </Grid.Row>
                      </Grid>
                      </ Menu.Item>
                     )
                   }) : null
                  }

                  <Menu.Item
                    name='newM'
                    active={this.state.activeItem === 'newM'}
                  >

                  <Grid>
                    <Grid.Row centered name='new'>
                      <ModalWindow type="new" addRoom={this.props.addRoom}/>
                    </Grid.Row>
                  </Grid>

                  </ Menu.Item>
                 </Menu>
                </Grid.Row>
              </Grid>
            </Responsive>

            <Responsive as={Segment} maxWidth={768}>
              <Menu inverted>
                <Dropdown item fluid text={this.state.activeItemName}>
                  <Dropdown.Menu>

                    <Dropdown.Item
                      key={-1}
                      id={-1}
                      name='Home'
                      active={this.state.activeItem === 'Home'}
                      onClick={this.handleClick}>
                      <Grid>
                        <Grid.Row>
                          <Grid.Column>
                            <Icon name="home" size="small"/>
                          </Grid.Column>
                          <Grid.Column>
                            Home
                          </Grid.Column>
                        </Grid.Row>
                      </Grid>
                    </Dropdown.Item>

                    {this.props.rooms ?
                    this.props.rooms.map((e, i) => {
                      return (
                        <Dropdown.Item
                          id={e.id}
                          key={i}
                          name={e.name}
                          active={this.state.activeItem === e.id}
                          onClick={this.handleClick}
                         >
                         <Grid>
                           <Grid.Row>
                             <Grid.Column width={1}>
                               <Icon name={e.icon} size="small"/>
                             </Grid.Column>
                             <Grid.Column>
                               {e.name}
                             </Grid.Column>
                           </Grid.Row>
                         </Grid>
                         </ Dropdown.Item>
                        )
                      }) : null
                    }

                  </Dropdown.Menu>
                </Dropdown>
              </Menu >
                <Grid inverted>
                <Grid.Row>
                  <Grid.Column width={8}>
                  <ModalWindow type="new" addRoom={this.props.addRoom} />
                  </Grid.Column>
                  {
                    this.state.activeItem !== -1 ?
                      <Grid.Column width={8}>
                        <ModalWindow type="modify" idRoom={this.state.activeRoom} updateRoom={this.props.updateRoom} deleteRoom={this.props.deleteRoom}/>
                      </Grid.Column>
                      : null
                  }
                </Grid.Row>
                </Grid>
            </Responsive>

          </Segment.Group>
       </div>
    );
  }
}

export default Navbar;