import React, { Component } from "react";
import DevicePanel from "../components/dashboard/DevicePanel";
import Navbar from "./Navbar";
import MyHeader from "../components/HeaderController";
import { Grid, Responsive } from "semantic-ui-react";

export default class Dashboard extends Component {
  render() {
    return (
      <div style={{ height: "110vh", background: "#1b1c1d" }}>
        <Responsive minWidth={768}>
          <Grid>
            <Grid.Row color="black">
              <Grid.Column>
                <MyHeader />
              </Grid.Column>
            </Grid.Row>
            <Grid.Row color="black">
              <Grid.Column width={3}>
                <Navbar />
              </Grid.Column>

              <Grid.Column width={13}>
                <DevicePanel />
              </Grid.Column>
            </Grid.Row>
          </Grid>
        </Responsive>
        <Responsive maxWidth={768}>
          <Grid inverted>
            <Grid.Row color="black">
              <Grid.Column>
                <MyHeader />
              </Grid.Column>
            </Grid.Row>
            <Grid.Row color="black">
              <Grid.Column color="black">
                <Navbar />
              </Grid.Column>
            </Grid.Row>
            <Grid.Row>
              <Grid.Column>
                <DevicePanel />
              </Grid.Column>
            </Grid.Row>
          </Grid>
        </Responsive>
      </div>
    );
  }
}