Modal

class MyApp extends App{
	
	shownModal = ``
	
	createStartPage(){
		return StartPage
	}
	
	showHelpModal(){
		a.shownModal = `help`
	}
	
	closeModal(){
		a.shownModal = ``
	}
	
	createLayout(pageContent){
		
		const helpModal = Box.keepIf(a.shownModal == `help`).padding(7).backgroundColor(`#77777777`).child(
			Rows.padding(4).backgroundColor(`white`).cornerRadius(5).children(
				Text.text(`Help`).font(Font.bold().sizeMm(5)),
				Text.text(`Here comes a long descriptive text helping you...`).left(),
				Space,
				Columns.children(
					Space,
					Button.text(`Close`).onClick(a.closeModal),
					Space,
				),
			),
		)
		
		return Layers.backgroundColor(`aliceblue`).children(
			pageContent.padding(2),
			helpModal,
		)
		
	}
	
}

class StartPage extends Page{
	createGui(){
		return a.createLayout(
			Rows.children(
				Text.text(`Need help?`),
				Button.text(`Yes`).onClick(a.showHelpModal),
			)
		)
	}
}