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

62
src/Home/Home.js
View File

@@ -2,12 +2,21 @@ import "../components/Sidebar.js"
import "../components/AppMenu.js"
import "../components/AppWindowContainer.js"
css(`
#homeContainer {
transition: left .2s;
}
`)
class Home extends Shadow {
dragStartX = null
sidebarOpen = false
render() {
ZStack(() => {
Sidebar()
ZStack(() => {
// img("/_/icons/hamburger.svg", "3em")
@@ -24,8 +33,6 @@ class Home extends Shadow {
// }
// })
Sidebar()
VStack(() => {
AppWindowContainer()
@@ -48,34 +55,51 @@ class Home extends Shadow {
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) {
console.log("sidebaropendrag")
// console.log("sidebaropendrag")
if(start) {
let fiveSixths = (window.outerWidth * 5) / 6
let amount = e.targetTouches[0].clientX
if(amount < fiveSixths) {
this.dragStartX = e.touches[0].clientX
this.$("#homeContainer").dragStartX = e.touches[0].clientX
document.addEventListener("touchmove", this.moveSidebar)
}
} else {
if(!this.dragStartX) return;
if(!this.$("#homeContainer").dragStartX) return;
let oneThird = window.outerWidth / 3
let endX = e.changedTouches[0].clientX
if(endX < oneThird) {
this.style.transition = "left .2s"
this.style.left = `0px`
this.$("#homeContainer").style.transition = "left .2s"
this.$("#homeContainer").style.left = `0px`
this.sidebarOpen = false
} else {
this.style.transition = "left .2s"
this.$("#homeContainer").style.transition = "left .2s"
this.sidebarOpen = true
this.style.left = `${oneThird * 2}px`
this.$("#homeContainer").style.left = `${oneThird * 2}px`
}
this.style.transition = ""
this.dragStartX = null
this.$("#homeContainer").style.transition = ""
this.$("#homeContainer").dragStartX = null
document.removeEventListener("touchmove", this.moveSidebar)
}
}
@@ -86,25 +110,25 @@ class Home extends Shadow {
let oneTenth = window.outerWidth / 10
let amount = e.targetTouches[0].clientX
if(amount < oneTenth) {
this.dragStartX = e.touches[0].clientX
this.$("#homeContainer").dragStartX = e.touches[0].clientX
document.addEventListener("touchmove", this.moveSidebar)
}
} else {
if(!this.dragStartX) return;
if(!this.$("#homeContainer").dragStartX) return;
let oneThird = window.outerWidth / 3
let endX = e.changedTouches[0].clientX
if(endX > oneThird) {
this.style.transition = "left .2s"
this.style.left = `${oneThird * 2}px`
this.$("#homeContainer").style.transition = "left .2s"
this.$("#homeContainer").style.left = `${oneThird * 2}px`
this.sidebarOpen = true
} else {
this.sidebarOpen = false
this.style.left = "0px"
this.$("#homeContainer").style.left = "0px"
}
this.style.transition = ""
this.dragStartX = null
this.$("#homeContainer").style.transition = ""
this.$("#homeContainer").dragStartX = null
document.removeEventListener("touchmove", this.moveSidebar)
}
}
@@ -114,7 +138,7 @@ class Home extends Shadow {
let amount = e.targetTouches[0].clientX
if(e.targetTouches[0] && 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 (this.innerText === "Logout") {
global.onLogout()
$("home-").closeSidebar();
return
} else if (this.innerText === "Profile") {
$("appwindowcontainer-").openProfile()
$("sidebar-").toggle()
$("home-").closeSidebar();
return
}
}
@@ -29,24 +30,13 @@ class Sidebar extends Shadow {
})
.gap(2, em)
.paddingTop(30, vh)
.height(105, vh)
.height(window.visualViewport.height - 20, px)
.top(20, px)
.width(70, vw)
.borderLeft("1px solid var(--divider)")
.color("var(--text)")
.position("fixed")
.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"
} else if(start === false) {
this.style.scale = ""
$("sidebar-").toggle()
if (!$("home-").sidebarOpen) {
$("home-").openSidebar()
}
}
})
} else {