COLS & ROWS

App.css

@@ -7,7 +7,7 @@
   width: 100%;
 }*/
  .mainbar{
-    z-index: 1;
+    z-index: 2;
     display: flex;
     justify-content: space-between;
     position: fixed;
@@ -31,8 +31,8 @@
   background: #F1F1F1;
   z-index: 1;
   flex-shrink: 0;
-  position: fixed;
-  height: calc( 100vh - 50px );
+  position: absolute;
+  height: 80vh;
   display: flex;
   flex-direction: row;
 
@@ -60,7 +60,7 @@
   right: 0;
   height: calc(100vh - 50px);
   background: #F1F1F1 0% 0% no-repeat padding-box;
-opacity: 1;
+  opacity: 1;
 
 }
 

Systems/Gui.js

@@ -42,6 +42,7 @@ export default class Gui extends BaseSystem {
       this.SideBar.tool = this.ToolBox.activeTool;
       this.forceUpdate();
     });
+    this.MainBar.onUpdate(() => this.forceUpdate())
     this.MainBar.onSave( () => {
       this.saveEnv();
       this.forceUpdate()

Systems/MainBar.js

@@ -2,11 +2,51 @@ import React from 'react';
 import {StyleSheet, View, Text , Button } from 'react-native';
 import { Icon } from 'react-native-elements'
 import {  TextInput } from 'react-native';
+import BaseSystem from './System'
 
+class Menu extends BaseSystem {
+	constructor() {
+		super();
+		this.items = [];
+	}
+	addItem(item) {
+		this.items.push(item);
+		return this;
+	}
+	show() { this.visible = true; this.forceUpdate() }
+	hide() { this.visible = false; this.forceUpdate() }
+	toggle() { this.visible = !this.visible; this.forceUpdate() }
+	render() {
+		return this.visible ? <div style={{position:'absolute', left: 0, top: 50}}
+						onMouseLeave={() => this.hide()}>
+			<View style={styles.menu}>
+			{this.items.map((item) => {
+				let {
+					text,
+					...rest
+				} = item;
+				return <View style={{cursor: 'pointer'}} {...rest}>
+					<Text>{item.text}</Text>
+				</View>
+			})}
+			</View>
+		</div> : null;
+	}
+}
 
-export default class MainBar{
+export default class MainBar extends BaseSystem {
 	constructor(){
+		super();
 		this.__save = null
+
+		this.Menu = new Menu();
+		this.Menu.addItem({
+			text: "New page",
+			onClick: () => this.createPage()
+		}).addItem({
+			text: "Save",
+			onClick: () => this.save()
+		}).onUpdate(() => this.forceUpdate());
 	}
 
 	onSave(fn){
@@ -20,8 +60,26 @@ export default class MainBar{
 	triggerSave(){
 		this.save();
 	}
+
+	createPage() {
+		// think!
+		// Create a new page on CoreSystem
+		// switch to it as active view
+		// Decide how page switching works
+		
+	}
+
 	none(){
 		
+	}
+	toggleMenu() {
+		this.Menu.toggle();
+	}
+	showMenu() {
+		this.Menu.show();
+	}
+	hideMenu() {
+		this.Menu.hide();
 	}
 	render(){
 		return (
@@ -29,29 +87,29 @@ export default class MainBar{
 			<Button 
 				color="#f1f1f1"
 				title={<Icon  name='menu'
-  				color="#606060"
+  					color="#606060"
   				/>}
-  				/>
+  				onPress={(e) => this.toggleMenu()}
+  			/>
   			<Button 
 				color="#f1f1f1"
 				title={<Icon  name='home'
-  				color="#606060"
+  					color="#606060"
   				/>}
-  				/>
+  			/>
 			<Text style={{height:30,width:80,fontSize:11,marginTop:6}}>
 			<Button
 				onPress={(e) => this.triggerSave()} 
 				title="Save"
   				color="#606060" 
-
   			/>
   			</Text>
-  			
-  			
+  			{this.Menu.render()}
 		</View>)
 	}
 }
 
+
 const styles = StyleSheet.create({
 	container:{
 		flex:1,
@@ -59,5 +117,10 @@ const styles = StyleSheet.create({
 
 		flexDirection:'row',
 
+	},
+	menu: {
+		height:100,
+		width: 200,
+		backgroundColor: 'gray'
 	}
-	})
+})

Systems/ToolBox.js

@@ -67,7 +67,9 @@ export default class ToolBox extends BaseSystem {
 					toolStyle = styles.activeTool;
 				}
 			}
-			return(<View onClick={() => this.selectTool(key) }  style={toolStyle} >{this.tools[key].render()}</View>)
+			return(<View onClick={() => this.selectTool(key) }  style={toolStyle} >
+				{this.tools[key].render()}
+			</View>)
 		});
 		return tools;
 	}