96 lines
3.6 KiB
JavaScript
96 lines
3.6 KiB
JavaScript
class DesktopSettingsSidebar extends Shadow {
|
|
constructor(activeSection, onSectionChange) {
|
|
super()
|
|
this.activeSection = activeSection
|
|
this.onSectionChange = onSectionChange
|
|
}
|
|
|
|
render() {
|
|
VStack(() => {
|
|
VStack(() => {
|
|
p("Settings")
|
|
.fontFamily("Laandbrau")
|
|
.margin(0).fontSize(1.8, em).fontWeight("700").color("var(--headertext)")
|
|
p(global.currentNetwork.name)
|
|
.margin(0).marginTop(0.2, em).fontSize(0.72, em)
|
|
.color("var(--headertext)").opacity(0.38)
|
|
})
|
|
.marginTop(30, px)
|
|
.paddingHorizontal(1.1, em).paddingTop(1.2, em).paddingBottom(0.9, em)
|
|
|
|
VStack(() => {}).height(1, px).background("var(--divider)").marginHorizontal(1, em)
|
|
|
|
VStack(() => {
|
|
this.sectionLabel("MANAGE")
|
|
this.navItem("🎭", "Roles & Apps", "roles")
|
|
})
|
|
.paddingTop(0.75, em)
|
|
|
|
VStack(() => {}).height(1, px).background("var(--divider)").marginHorizontal(1, em).marginVertical(0.5, em)
|
|
|
|
VStack(() => {
|
|
this.sectionLabel("INTEGRATIONS")
|
|
this.navItem("💳", "Stripe", "integrations")
|
|
})
|
|
|
|
VStack(() => {}).flex(1)
|
|
|
|
VStack(() => {
|
|
p("NETWORK")
|
|
.margin(0).marginBottom(0.4, em)
|
|
.fontSize(0.6, em).fontWeight("700").letterSpacing("0.07em")
|
|
.color("var(--headertext)").opacity(0.35)
|
|
|
|
VStack(() => {
|
|
this.infoRow("ID", String(global.currentNetwork.id))
|
|
this.infoRow("Slug", global.currentNetwork.abbreviation)
|
|
})
|
|
.background("var(--darkaccent)").border("1px solid var(--divider)")
|
|
.borderRadius(0.5, em).gap(0)
|
|
})
|
|
.paddingHorizontal(0.75, em).paddingBottom(1.1, em).flexShrink(0)
|
|
})
|
|
.width(230, px).height(100, pct)
|
|
.borderRight("1px solid var(--divider)")
|
|
.flexShrink(0).overflowY("auto").boxSizing("border-box")
|
|
}
|
|
|
|
navItem(icon, label, sectionId) {
|
|
const isActive = this.activeSection === sectionId
|
|
HStack(() => {
|
|
p(icon).margin(0).fontSize(0.9, em).lineHeight("1").flexShrink(0)
|
|
p(label).margin(0).fontSize(0.88, em)
|
|
.fontWeight(isActive ? "600" : "400")
|
|
.color("var(--headertext)").opacity(isActive ? 1 : 0.65)
|
|
})
|
|
.gap(0.62, em).paddingHorizontal(0.85, em).paddingVertical(0.45, em)
|
|
.marginHorizontal(0.4, em).borderRadius(0.45, em)
|
|
.background(isActive ? "var(--app)" : "transparent")
|
|
.cursor("pointer").alignItems("center")
|
|
.width("calc(100% - 0.8em)").boxSizing("border-box")
|
|
.onClick((done) => { if (done) this.onSectionChange(sectionId) })
|
|
}
|
|
|
|
sectionLabel(text) {
|
|
p(text)
|
|
.margin(0).marginBottom(0.28, em).paddingHorizontal(1.1, em)
|
|
.fontSize(0.62, em).fontWeight("700").letterSpacing("0.07em")
|
|
.color("var(--headertext)").opacity(0.35)
|
|
}
|
|
|
|
infoRow(label, value) {
|
|
HStack(() => {
|
|
p(label)
|
|
.margin(0).fontSize(0.68, em).color("var(--headertext)").opacity(0.4)
|
|
.width(4, em).flexShrink(0)
|
|
p(value)
|
|
.margin(0).fontSize(0.72, em).fontWeight("600").color("var(--headertext)")
|
|
})
|
|
.paddingVertical(0.3, em).paddingHorizontal(0.65, em)
|
|
.borderBottom("1px solid var(--divider)")
|
|
.alignItems("center").gap(0.4, em)
|
|
}
|
|
}
|
|
|
|
register(DesktopSettingsSidebar)
|