fix events icon, misc errors, new sidebar started

src/Home/Home.js

@@ -4,6 +4,9 @@ import "../components/AppWindowContainer.js"
 
 class Home extends Shadow {
 
+    dragStartX = null
+    sidebarOpen = false
+
     render() {
         ZStack(() => {
 
@@ -36,6 +39,83 @@ class Home extends Shadow {
         .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)
+            }
+        })
+    }
+
+    sidebarOpenDrag(start, e) {
+        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
+                document.addEventListener("touchmove", this.moveSidebar)
+            }
+        } else {
+            if(!this.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.sidebarOpen = false
+            } else {
+                this.style.transition = "left .2s"
+                this.sidebarOpen = true
+                this.style.left = `${oneThird * 2}px`
+            }
+
+            this.style.transition = ""
+            this.dragStartX = null
+            document.removeEventListener("touchmove", this.moveSidebar)
+        }
+    }
+
+    sidebarClosedDrag(start, e) {
+        console.log(e)
+        if(start) {
+            let oneTenth = window.outerWidth / 10
+            let amount = e.targetTouches[0].clientX
+            if(amount < oneTenth) {
+                this.dragStartX = e.touches[0].clientX
+                document.addEventListener("touchmove", this.moveSidebar)
+            }
+        } else {
+            if(!this.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.sidebarOpen = true
+            } else {
+                this.sidebarOpen = false
+                this.style.left = "0px"
+            }
+
+            this.style.transition = ""
+            this.dragStartX = null
+            document.removeEventListener("touchmove", this.moveSidebar)
+        }
+    }
+
+    moveSidebar = (e) => {
+        let twoThirds = window.outerWidth * .66
+        let amount = e.targetTouches[0].clientX
+        if(e.targetTouches[0] && amount < twoThirds) {
+            console.log("dragtivated: ", amount, twoThirds)
+            this.style.left = `${amount}px`
+        }
     }
 }