87 lines
2.4 KiB
JavaScript
87 lines
2.4 KiB
JavaScript
import util from "../util"
|
|
|
|
class Sidebar extends Shadow {
|
|
SIDEBAR_WIDTH
|
|
|
|
constructor(width) {
|
|
super()
|
|
this.SIDEBAR_WIDTH = width
|
|
}
|
|
|
|
SidebarItem(text) {
|
|
return p(text)
|
|
.fontSize(1.5, em)
|
|
.fontWeight("bold")
|
|
.color("var(--headertext)")
|
|
.fontFamily("Arial")
|
|
.marginLeft(1, em)
|
|
.onTap(function (done) {
|
|
if (done) {
|
|
if (this.innerText === "Logout") {
|
|
global.onLogout()
|
|
$("home-").closeSidebar();
|
|
return
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
render() {
|
|
VStack(() => {
|
|
HStack(() => {
|
|
if (global.profile.image_path) {
|
|
img(`${util.HOST}${global.profile.image_path}`, "10em", "10em")
|
|
.borderRadius(100, pct)
|
|
}
|
|
})
|
|
.boxSizing("border-box")
|
|
.height(10, em)
|
|
.width(10, em)
|
|
.border("1px solid var(--accent)")
|
|
.borderRadius(100, pct)
|
|
.background("var(--darkaccent)")
|
|
.alignSelf("center")
|
|
.onClick((done) => {
|
|
if(done)
|
|
this.openProfile()
|
|
})
|
|
|
|
h2(global.profile.first_name + " " + global.profile.last_name)
|
|
.color("var(--headertext")
|
|
.textAlign("center")
|
|
.marginVertical(0.25, em)
|
|
.paddingBottom(0.5, em)
|
|
.textAlign("center")
|
|
.alignSelf("center")
|
|
.overflowWrap("break-word")
|
|
.wordBreak("break-word")
|
|
.width(100, pct)
|
|
.borderBottom("2px solid var(--divider)")
|
|
.onClick((done) => {
|
|
if(done)
|
|
this.openProfile()
|
|
})
|
|
|
|
this.SidebarItem("Logout")
|
|
})
|
|
.gap(1, em)
|
|
.paddingTop(15, vh)
|
|
.paddingHorizontal(1, em)
|
|
.height(105, vh)
|
|
.top(-5, vh)
|
|
.minWidth(0)
|
|
.boxSizing("border-box")
|
|
.width(this.SIDEBAR_WIDTH, px)
|
|
.borderLeft("1px solid var(--divider)")
|
|
.color("var(--text)")
|
|
.position("fixed")
|
|
.background("var(--sidebar)")
|
|
}
|
|
|
|
openProfile() {
|
|
$("appwindowcontainer-").openProfile()
|
|
$("home-").closeSidebar();
|
|
}
|
|
}
|
|
|
|
register(Sidebar) |