71 lines
2.4 KiB
JavaScript
71 lines
2.4 KiB
JavaScript
import "./components/AppWindow.js"
|
|
import "./components/AppMenu.js"
|
|
import "./components/ProfileButton.js"
|
|
import "./components/InputBox.js"
|
|
import "./components/Sidebar.js"
|
|
|
|
class Home extends Shadow {
|
|
render() {
|
|
ZStack(() => {
|
|
|
|
Sidebar()
|
|
|
|
AppMenu()
|
|
|
|
AppWindow()
|
|
|
|
HStack(() => {
|
|
let selected = document.documentElement.className
|
|
console.log(selected)
|
|
select(() => {
|
|
option("")
|
|
option("Light").attr({value: "light"})
|
|
option("Dark").attr({value: "dark"})
|
|
option("Red").attr({value: "red"})
|
|
|
|
$(`option[value=${selected}]`).selected = "true"
|
|
})
|
|
.outline("none")
|
|
.background("transparent")
|
|
.height(2, em)
|
|
.color("var(--accent)")
|
|
.border("1px solid var(--accent)")
|
|
.attr({value: "dark"})
|
|
.onChange((e) => {
|
|
console.log("onchange")
|
|
document.documentElement.className = e.target.value
|
|
localStorage.setItem("theme", e.target.value);
|
|
const event = new CustomEvent('themechange', {
|
|
detail: {}
|
|
});
|
|
window.dispatchEvent(event)
|
|
})
|
|
.onHover(function (hovering) {
|
|
if(hovering) {
|
|
this.style.background = "var(--green)"
|
|
} else {
|
|
this.style.background = "transparent"
|
|
}
|
|
})
|
|
|
|
a("/signout", "Sign Out")
|
|
.background("transparent")
|
|
.border("1px solid var(--accent")
|
|
.color("var(--accent)")
|
|
.onHover(function (hovering) {
|
|
if(hovering) {
|
|
this.style.background = "var(--green)"
|
|
} else {
|
|
this.style.background = ""
|
|
}
|
|
})
|
|
})
|
|
.gap(1, em)
|
|
.xRight(2, em).y(2.3, em)
|
|
.position("fixed")
|
|
.verticalAlign("center")
|
|
})
|
|
}
|
|
}
|
|
|
|
register(Home) |