Navigation Drawer

class MyApp extends App{
	
	isDrawerOpen = false
	
	createStartPage(){
		return HomePage
	}
	
	openDrawer(){
		a.isDrawerOpen = true
	}
	
	closeDrawer(){
		a.isDrawerOpen = false
	}
	
	createLayout(pageContent){
		
		let drawerButton = Button.font(Font.size(sw(5))).padding(0, `lr`)
		
		if(a.isDrawerOpen){
			drawerButton.text(`←`).onClick(a.closeDrawer)
		}else{
			drawerButton.text(`☰`).onClick(a.openDrawer)
		}
		
		const topRow = Columns.padding(1).children(
			Box.width(10).child(
				drawerButton,
			),
			Text.grow(1).text(`Sample App`).font(Font.size(sw(13)))
		)
		
		const drawer = Columns.keepIf(a.isDrawerOpen).backgroundColor(`#77777777`).children(
			Rows.backgroundColor(`white`).padding(2).children(
				Button.onClick(a.closeDrawer).text(`Home`).page(HomePage),
				Box.height(2),
				Button.onClick(a.closeDrawer).text(`About`).page(AboutPage),
				Box.height(2),
				Button.onClick(a.closeDrawer).text(`Contact`).page(ContactPage),
				Space,
			),
			Space,
		)
		
		return Rows.backgroundColor(`skyblue`).children(
			topRow,
			Box.height(1).backgroundColor(`black`),
			Layers.growShrink(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!`),
		)
	}
}