mobile version of the header controller now working, I installed 'yarn add react-device-detect', since it automatically modified the file package. json, neither of you need to install it, correct?

smart-hut/package.json

@@ -15,6 +15,7 @@
     "react-axios": "^2.0.3",
     "react-circular-input": "^0.1.6",
     "react-circular-slider-svg": "^0.1.5",
+    "react-device-detect": "^1.11.14",
     "react-dom": "^16.12.0",
     "react-round-slider": "^1.0.1",
     "react-router": "^5.1.2",

smart-hut/src/components/HeaderController.js

@@ -1,9 +1,18 @@
 import React from "react";
 import { Dropdown, Icon, Grid, Divider } from "semantic-ui-react";
 import { Segment, Image } from "semantic-ui-react";
+import {
+  BrowserView,
+  MobileView,
+  isBrowser,
+  isMobile
+} from "react-device-detect";
 
 const AvatarImage = () => (
-  <Image src="avatar3.png" style={{ width: "25px", height: "auto" }} centered />
+  <Image 
+  src="avatar3.png" 
+  style={{ width: "25px", height: "auto" }} 
+  centered />
 );
 
 const IconHomeImage = () => (
@@ -16,9 +25,25 @@ const IconHomeImage = () => (
   />
 );
 
-const TitleImage = () => <Image src="title7.png" size="medium" centered />;
+const IconHomeImageMobile = () => (
+  <Image
+    src="smart-home.png"
+    style={{ width: "10px", height: "auto" }}
+    centered
+    as="a"
+    href="/"
+  />
+);
 
-const GridExampleInverted = (props) => (
+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}>
@@ -51,119 +76,61 @@ const GridExampleInverted = (props) => (
         </Dropdown>
       </Grid.Column>
     </Grid.Row>
-  </Grid>
+  </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>
-        <GridExampleInverted logout={this.props.logout} />
+        <BrowserView>
+          <BrowserStructure logout={this.props.logout} />
+        </BrowserView>
+        <MobileView>
+          <MobileStructure />
+        </MobileView>
       </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>
-//       )
-//     }
-//   }

smart-hut/yarn.lock

@@ -8715,6 +8715,13 @@ react-dev-utils@^10.2.0:
     strip-ansi "6.0.0"
     text-table "0.2.0"
 
+react-device-detect@^1.11.14:
+  version "1.11.14"
+  resolved "https://registry.yarnpkg.com/react-device-detect/-/react-device-detect-1.11.14.tgz#02ba2398e2ce81fb0eaed3e62a9ad713ab3870a7"
+  integrity sha512-WSjch241xI+rXHVtJaSYxNUT2WAykzfJgMI2Hg9xjNNTlIZdJu/fmWf4iedNH7qzFq+JaJ6fDJu3mrKFLerKBw==
+  dependencies:
+    ua-parser-js "^0.7.20"
+
 react-dom@^16.12.0:
   version "16.12.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.12.0.tgz#0da4b714b8d13c2038c9396b54a92baea633fe11"
@@ -10368,7 +10375,7 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-ua-parser-js@^0.7.18:
+ua-parser-js@^0.7.18, ua-parser-js@^0.7.20:
   version "0.7.21"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.21.tgz#853cf9ce93f642f67174273cc34565ae6f308777"
   integrity sha512-+O8/qh/Qj8CgC6eYBVBykMrNtp5Gebn4dlGD/kKXVkJNDwyrAwSIqwz8CDf+tsAIWVycKcku6gIXJ0qwx/ZXaQ==