From 33602206692d3ef2141cca855d58a404fc18c298 Mon Sep 17 00:00:00 2001
From: Nicola Brunner <brunnn@usi.ch>
Date: Wed, 18 Mar 2020 17:12:29 +0100
Subject: [PATCH 1/2] more responsive than before ;)

---
 smart-hut/src/views/Navbar.js | 82 ++++++++++++++++++++++++++++++++---
 1 file changed, 75 insertions(+), 7 deletions(-)

diff --git a/smart-hut/src/views/Navbar.js b/smart-hut/src/views/Navbar.js
index 121d4b7..4123011 100644
--- a/smart-hut/src/views/Navbar.js
+++ b/smart-hut/src/views/Navbar.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Menu, Grid, Icon, Button, Header, Image, Modal, Responsive, Segment } from "semantic-ui-react";
+import { Menu, Grid, Icon, Button, Header, Image, Modal, Responsive, Segment,  Dropdown } from "semantic-ui-react";
 import {editButtonStyle} from "../components/dashboard/devices/styleComponents";
 import ModalWindow from "../components/modalform";
 
@@ -13,9 +13,7 @@ class Navbar extends Component {
     }
   }
 
-  editModeController = (e) => {
-    this.setState((prevState) => ({ editMode: !prevState.editMode }));
-  };
+  editModeController = (e) => this.setState((prevState) => ({ editMode: !prevState.editMode }));
 
   handleClick = (e, {id}) => {
     console.log(id);
@@ -29,7 +27,7 @@ class Navbar extends Component {
     return (
       <div>
       <Segment.Group>
-       <Responsive as={Segment}>
+       <Responsive as={Segment} minWidth={768}>
           <Grid>
             <Grid.Row color='black'>
                 <button style={editButtonStyle} onClick={this.editModeController}>Edit</button>
@@ -74,7 +72,7 @@ class Navbar extends Component {
                             {e.name}
                           </Grid.Column>
                           <Grid.Column floated="right">
-                          {this.state.edit ?
+                          {this.state.editMode ?
                             <ModalWindow type="modify" idRoom={e} modifyRoom={this.props.updateRoom} deleteRoom={this.props.deleteRoom}/>
                             : null
                           }
@@ -102,9 +100,79 @@ class Navbar extends Component {
                 </Grid.Row>
               </Grid>
             </Responsive>
+
             <Responsive as={Segment} maxWidth={768}>
-            //dropdown menu
+
+              <Menu inverted>
+                <Dropdown item fluid text='Select Room'>
+                  <Dropdown.Menu>
+
+                    <Dropdown.Item
+                      key={-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>
+              <Grid.Row>
+                <Grid.Column width={8}>
+                  <Button icon fluid labelPosition='left'>
+                    <Icon name='plus' size='small'/>
+                    ADD ROOM
+                  </Button>
+                </Grid.Column>
+                <Grid.Column width={8}>
+                  <Button icon fluid labelPosition='left'>
+                    <Icon name='pencil' size='small'/>
+                    EDIT ROOM
+                  </Button>
+                </Grid.Column>
+              </Grid.Row>
+              </Grid>
+
+
             </Responsive>
+
           </Segment.Group>
        </div>
     );

From c6e483ea6ce13526bd0fa3e87a5d7378bc6aff36 Mon Sep 17 00:00:00 2001
From: Nicola Brunner <brunnn@usi.ch>
Date: Thu, 19 Mar 2020 11:49:00 +0100
Subject: [PATCH 2/2] done minor fixes responive navbar

---
 smart-hut/src/views/Navbar.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/smart-hut/src/views/Navbar.js b/smart-hut/src/views/Navbar.js
index 4123011..0a8876a 100644
--- a/smart-hut/src/views/Navbar.js
+++ b/smart-hut/src/views/Navbar.js
@@ -8,6 +8,7 @@ class Navbar extends Component {
     super(props);
     this.state = {
       activeItem: 'Home',
+      activeItemName: 'Home',
       edited: "",
       editMode : false
     }
@@ -15,9 +16,10 @@ class Navbar extends Component {
 
   editModeController = (e) => this.setState((prevState) => ({ editMode: !prevState.editMode }));
 
-  handleClick = (e, {id}) => {
+  handleClick = (e, {id, name}) => {
     console.log(id);
     this.setState({ activeItem: id,
+                    activeItemName: name
      });
     this.props.handleItemClick(id)
   }
@@ -104,7 +106,7 @@ class Navbar extends Component {
             <Responsive as={Segment} maxWidth={768}>
 
               <Menu inverted>
-                <Dropdown item fluid text='Select Room'>
+                <Dropdown item fluid text={this.state.activeItemName}>
                   <Dropdown.Menu>
 
                     <Dropdown.Item