import "../components/Sidebar.js"
import "../components/AppMenu.js"
import "../components/AppWindow.js"

class Home extends Shadow {

    render() {
        ZStack(() => {

            img("/_/icons/hamburger.svg", "3em")
                .position("absolute")
                .zIndex(2)
                .left(1.5, em)
                .top(1, em)
                .onTouch(function (start) {
                    if(start) {
                        this.style.scale = "0.8"
                    } else if(start === false) {
                        this.style.scale = ""
                        $("sidebar-").toggle()
                    }
                })

			Sidebar()

            VStack(() => {
                AppWindow()

                AppMenu()
            })
            .height(100, pct)
            .minHeight(0)
        })
        .backgroundColor("var(--main)")
        .overflowX("hidden")
        .height(window.visualViewport.height - 20, px)
        .position("fixed")
        .top(20, px)
    }
}

register(Home)