Navigation Drawer

class MyApp extends App{
	
	isDrawerOpen = false
	
	createStartPage(){
		return HomePage
	}
	
	openDrawer(){
		a.isDrawerOpen = true
	}
	
	closeDrawer(){
		a.isDrawerOpen = false
	}
	
	createLayout(pageContent){
		
		const closeDrawerButton = Button.keepIf(a.isDrawerOpen).onClick(a.closeDrawer).text(`←`)
		const openDrawerButton = Button.keepIf(!a.isDrawerOpen).onClick(a.openDrawer).text(`☰`)
		
		const drawer = Columns.keepIf(a.isDrawerOpen).backgroundColor(`#77777777`).children(
			Rows.backgroundColor(`white`).padding(2).children(
				Button.onClick(a.closeDrawer).text(`Home`).page(HomePage),
				Space.size(0.01),
				Button.onClick(a.closeDrawer).text(`About`).page(AboutPage),
				Space.size(0.01),
				Button.onClick(a.closeDrawer).text(`Contact`).page(ContactPage),
				Space,
			),
			Space,
		)
		
		return Rows.backgroundColor(`skyblue`).children(
			Columns.border(1, `black`, `b`).children(
				closeDrawerButton,
				openDrawerButton,
				Text.size(1).text(`Sample App`)
			),
			Layers.size(1).children(
				pageContent,
				drawer,
			),
		)
	}
	
}

class HomePage extends Page{
	createGui(){
		return a.createLayout(
			Text.text(`Home!`),
		)
	}
}

class AboutPage extends Page{
	createGui(){
		return a.createLayout(
			Text.text(`About!`),
		)
	}
}

class ContactPage extends Page{
	createGui(){
		return a.createLayout(
			Text.text(`Contact us!`),
		)
	}
}