sam/ForumMobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sidebar content moved to new draggable sidebar

Browse Source
This commit is contained in:
matiasc18
2026-03-20 13:43:11 -04:00
parent 63fbab34ce
commit c7ddb02ac1
3 changed files with 81 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
src/Home/Home.js
View File

@@ -2,6 +2,12 @@ import "../components/Sidebar.js"
import "../components/AppMenu.js" import "../components/AppMenu.js"
import "../components/AppWindowContainer.js" import "../components/AppWindowContainer.js"
css(`
#homeContainer {
transition: left .2s;
}
`)
class Home extends Shadow { class Home extends Shadow {
dragStartX = null dragStartX = null
@@ -9,73 +15,91 @@ class Home extends Shadow {
render() { render() {
ZStack(() => { ZStack(() => {
Sidebar()
// img("/_/icons/hamburger.svg", "3em") ZStack(() => {
// .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() // 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()
// }
// })
VStack(() => { VStack(() => {
AppWindowContainer() AppWindowContainer()
AppMenu() AppMenu()
})
.height(100, pct)
.minHeight(0)
}) })
.height(100, pct) .backgroundColor("var(--main)")
.minHeight(0) .overflowX("hidden")
}) .height(window.visualViewport.height - 20, px)
.backgroundColor("var(--main)") .position("fixed")
.overflowX("hidden") .top(20, px)
.height(window.visualViewport.height - 20, px) .borderLeft("1px solid var(--accent)")
.position("fixed") .onTouch((start, e) => {
.top(20, px) // console.log(e)
.borderLeft("1px solid var(--accent)") if(this.sidebarOpen) {
.onTouch((start, e) => { this.sidebarOpenDrag(start, e)
// console.log(e) } else {
if(this.sidebarOpen) { this.sidebarClosedDrag(start, e)
this.sidebarOpenDrag(start, e) }
} else { })
this.sidebarClosedDrag(start, e) .attr({ id: "homeContainer" })
}
}) })
} }
openSidebar() {
const home = this.$("#homeContainer");
const oneThird = window.outerWidth / 3;
home.style.transition = "left .2s";
home.style.left = `${oneThird * 2}px`;
this.sidebarOpen = true;
}
closeSidebar() {
const home = this.$("#homeContainer");
home.style.transition = "left .2s";
home.style.left = "0px";
this.sidebarOpen = false;
}
sidebarOpenDrag(start, e) { sidebarOpenDrag(start, e) {
console.log("sidebaropendrag") // console.log("sidebaropendrag")
if(start) { if(start) {
let fiveSixths = (window.outerWidth * 5) / 6 let fiveSixths = (window.outerWidth * 5) / 6
let amount = e.targetTouches[0].clientX let amount = e.targetTouches[0].clientX
if(amount < fiveSixths) { if(amount < fiveSixths) {
this.dragStartX = e.touches[0].clientX this.$("#homeContainer").dragStartX = e.touches[0].clientX
document.addEventListener("touchmove", this.moveSidebar) document.addEventListener("touchmove", this.moveSidebar)
} }
} else { } else {
if(!this.dragStartX) return; if(!this.$("#homeContainer").dragStartX) return;
let oneThird = window.outerWidth / 3 let oneThird = window.outerWidth / 3
let endX = e.changedTouches[0].clientX let endX = e.changedTouches[0].clientX
if(endX < oneThird) { if(endX < oneThird) {
this.style.transition = "left .2s" this.$("#homeContainer").style.transition = "left .2s"
this.style.left = `0px` this.$("#homeContainer").style.left = `0px`
this.sidebarOpen = false this.sidebarOpen = false
} else { } else {
this.style.transition = "left .2s" this.$("#homeContainer").style.transition = "left .2s"
this.sidebarOpen = true this.sidebarOpen = true
this.style.left = `${oneThird * 2}px` this.$("#homeContainer").style.left = `${oneThird * 2}px`
} }
this.style.transition = "" this.$("#homeContainer").style.transition = ""
this.dragStartX = null this.$("#homeContainer").dragStartX = null
document.removeEventListener("touchmove", this.moveSidebar) document.removeEventListener("touchmove", this.moveSidebar)
} }
} }
@@ -86,25 +110,25 @@ class Home extends Shadow {
let oneTenth = window.outerWidth / 10 let oneTenth = window.outerWidth / 10
let amount = e.targetTouches[0].clientX let amount = e.targetTouches[0].clientX
if(amount < oneTenth) { if(amount < oneTenth) {
this.dragStartX = e.touches[0].clientX this.$("#homeContainer").dragStartX = e.touches[0].clientX
document.addEventListener("touchmove", this.moveSidebar) document.addEventListener("touchmove", this.moveSidebar)
} }
} else { } else {
if(!this.dragStartX) return; if(!this.$("#homeContainer").dragStartX) return;
let oneThird = window.outerWidth / 3 let oneThird = window.outerWidth / 3
let endX = e.changedTouches[0].clientX let endX = e.changedTouches[0].clientX
if(endX > oneThird) { if(endX > oneThird) {
this.style.transition = "left .2s" this.$("#homeContainer").style.transition = "left .2s"
this.style.left = `${oneThird * 2}px` this.$("#homeContainer").style.left = `${oneThird * 2}px`
this.sidebarOpen = true this.sidebarOpen = true
} else { } else {
this.sidebarOpen = false this.sidebarOpen = false
this.style.left = "0px" this.$("#homeContainer").style.left = "0px"
} }
this.style.transition = "" this.$("#homeContainer").style.transition = ""
this.dragStartX = null this.$("#homeContainer").dragStartX = null
document.removeEventListener("touchmove", this.moveSidebar) document.removeEventListener("touchmove", this.moveSidebar)
} }
} }
@@ -114,7 +138,7 @@ class Home extends Shadow {
let amount = e.targetTouches[0].clientX let amount = e.targetTouches[0].clientX
if(e.targetTouches[0] && amount < twoThirds) { if(e.targetTouches[0] && amount < twoThirds) {
console.log("dragtivated: ", amount, twoThirds) console.log("dragtivated: ", amount, twoThirds)
this.style.left = `${amount}px` this.$("#homeContainer").style.left = `${amount}px`
} }
} }
} }

18
src/components/Sidebar.js
View File

@@ -12,10 +12,11 @@ class Sidebar extends Shadow {
if(done) { if(done) {
if (this.innerText === "Logout") { if (this.innerText === "Logout") {
global.onLogout() global.onLogout()
$("home-").closeSidebar();
return return
} else if (this.innerText === "Profile") { } else if (this.innerText === "Profile") {
$("appwindowcontainer-").openProfile() $("appwindowcontainer-").openProfile()
$("sidebar-").toggle() $("home-").closeSidebar();
return return
} }
} }
@@ -29,24 +30,13 @@ class Sidebar extends Shadow {
}) })
.gap(2, em) .gap(2, em)
.paddingTop(30, vh) .paddingTop(30, vh)
.height(105, vh) .height(window.visualViewport.height - 20, px)
.top(20, px)
.width(70, vw) .width(70, vw)
.borderLeft("1px solid var(--divider)") .borderLeft("1px solid var(--divider)")
.color("var(--text)") .color("var(--text)")
.position("fixed") .position("fixed")
.background("var(--sidebar)") .background("var(--sidebar)")
.xRight(-71, vw)
.top(-5, vh)
.transition("right .3s")
.zIndex(3)
}
toggle() {
if(this.style.right === "-71vw") {
this.style.right = "0vw"
} else {
this.style.right = "-71vw"
}
} }
} }

4
src/components/TopBar.js
View File

@@ -14,7 +14,9 @@ class TopBar extends Shadow {
this.style.scale = "0.8" this.style.scale = "0.8"
} else if(start === false) { } else if(start === false) {
this.style.scale = "" this.style.scale = ""
$("sidebar-").toggle() if (!$("home-").sidebarOpen) {
$("home-").openSidebar()
}
} }
}) })
} else { } else {