From c7ddb02ac10c784f0909f972ba2a5499da69967c Mon Sep 17 00:00:00 2001 From: matiasc18 Date: Fri, 20 Mar 2026 13:43:11 -0400 Subject: [PATCH] Sidebar content moved to new draggable sidebar --- src/Home/Home.js | 124 +++++++++++++++++++++++--------------- src/components/Sidebar.js | 18 ++---- src/components/TopBar.js | 4 +- 3 files changed, 81 insertions(+), 65 deletions(-) diff --git a/src/Home/Home.js b/src/Home/Home.js index 729ff3e..fdd1017 100644 --- a/src/Home/Home.js +++ b/src/Home/Home.js @@ -2,6 +2,12 @@ import "../components/Sidebar.js" import "../components/AppMenu.js" import "../components/AppWindowContainer.js" +css(` + #homeContainer { + transition: left .2s; + } +`) + class Home extends Shadow { dragStartX = null @@ -9,73 +15,91 @@ class Home extends Shadow { render() { ZStack(() => { + 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() - // } - // }) + ZStack(() => { - 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(() => { - AppWindowContainer() + VStack(() => { + AppWindowContainer() - AppMenu() + AppMenu() + }) + .height(100, pct) + .minHeight(0) }) - .height(100, pct) - .minHeight(0) - }) - .backgroundColor("var(--main)") - .overflowX("hidden") - .height(window.visualViewport.height - 20, px) - .position("fixed") - .top(20, px) - .borderLeft("1px solid var(--accent)") - .onTouch((start, e) => { - // console.log(e) - if(this.sidebarOpen) { - this.sidebarOpenDrag(start, e) - } else { - this.sidebarClosedDrag(start, e) - } + .backgroundColor("var(--main)") + .overflowX("hidden") + .height(window.visualViewport.height - 20, px) + .position("fixed") + .top(20, px) + .borderLeft("1px solid var(--accent)") + .onTouch((start, e) => { + // console.log(e) + if(this.sidebarOpen) { + 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) { - 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` } } } diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js index 9231df3..e27162c 100644 --- a/src/components/Sidebar.js +++ b/src/components/Sidebar.js @@ -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" - } } } diff --git a/src/components/TopBar.js b/src/components/TopBar.js index 93584d1..256c105 100644 --- a/src/components/TopBar.js +++ b/src/components/TopBar.js @@ -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 {