adding menu overlay

Author: sarahlawrence

public/forest.png

@@ -7,7 +7,7 @@ export default class App extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      loading: true,
+      loading: false,
     }
   }
 

public/log.png

@@ -7,7 +7,7 @@ export default class Login extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      loggedIn: false,
+      loggedIn: true,
     }
   }
 

public/sprout.png

@@ -3,8 +3,11 @@ import L from 'leaflet'
 import { Map as LeafletMap, TileLayer, Marker } from 'react-leaflet'
 import Markers from './Markers'
 import TreeInfo from '../TreeInfo'
+import Menu from '../Menu'
 import './Map.css';
 
+import { Pane } from 'evergreen-ui'
+
 class Map extends Component {
   constructor() {
     super()
@@ -13,7 +16,7 @@ class Map extends Component {
       lat: -33.883006,
       lng: 151.206536,
       zoom: 15,
-      showMap: false,
+      showMap: true,
     }
   }
 
@@ -35,8 +38,9 @@ class Map extends Component {
 
   render() {
     const position = [this.state.lat, this.state.lng];
-    return (
-      this.state.showMap ? <LeafletMap center={position} zoom={this.state.zoom}>
+    return (<Pane>
+      <Menu />
+      {this.state.showMap ? <LeafletMap center={position} zoom={this.state.zoom}>
         <TileLayer
           attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
           url='https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png'
@@ -58,7 +62,9 @@ class Map extends Component {
         <Marker position={Markers.markerPos14} onClick={this.handleClick} icon={this.treeIcon} />
         <Marker position={Markers.markerPos15} onClick={this.handleClick} icon={this.treeIcon} />
         <Marker position={Markers.markerPos16} onClick={this.handleClick} icon={this.treeIcon} />
-      </LeafletMap> : <TreeInfo onClose={this.handleClose} />
+      </LeafletMap> : <TreeInfo onClose={this.handleClose} />}
+
+    </Pane>
     );
   }
 }

src/App.js

@@ -0,0 +1,20 @@
+import React, { Component } from 'react'
+import { Text, Pane } from 'evergreen-ui'
+
+
+import './index.css';
+
+export default class MenuButton extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <Pane display="flex" flexDirection="column" className="menu-button">
+        <img src={this.props.source} className="menu-button-icon" />
+        <Text marginTop={5} size={100}>{this.props.text}</Text>
+      </Pane>
+    );
+  }
+}

src/Login/Login.js

@@ -0,0 +1,17 @@
+.menu {
+    position: absolute;
+    z-index: 9999;
+    bottom: 0;
+    
+
+    background-color: #C2D796;
+}
+
+.menu-button {
+    height: 65px
+}
+
+.menu-button-icon {
+    height: 40px;
+    object-fit: contain;
+}

src/Map/Map.js

@@ -0,0 +1,24 @@
+import React, { Component } from 'react'
+import { Heading, Checkbox, Paragraph, Button, Pane } from 'evergreen-ui'
+
+import MenuButton from './MenuButton'
+
+import './index.css';
+
+export default class Menu extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+
+
+    return (
+      <Pane display="flex" flexDirection="row" className="menu" paddingTop={10} paddingBottom={10} height={80} justifyContent="space-around" width="100%">
+        <MenuButton source="./forest.png" text="The Forest" />
+        <MenuButton source="./log.png" text="My Log" />
+        <MenuButton source="./sprout.png" text="My Growth" />
+      </Pane>
+    );
+  }
+}