Sidebar + Profile changes

- Sidebar displays profile photo and name, can be tapped on
- Profile now has "Tap to edit" button on photo

src/Profile/Profile.js

@@ -66,11 +66,16 @@ class Profile extends Shadow {
 					inputSelector.click()
 				})
 
+				p("Tap to edit")
+				.color("var(--headertext)")
+				.opacity(0.5)
+				.marginTop(0.5, em)
+
 				h1(this.profile.first_name + " " + this.profile.last_name)
 				.color("var(--headertext")
 				.width(70, pct)
+				.marginVertical(0.25, em)
 				.textAlign("center")
-				.marginBottom(0.25, em)
 
 				p("Joined " + this.convertDate(this.profile.created))
 				.color("var(--headertext)")

src/components/Sidebar.js

@@ -6,18 +6,15 @@ class Sidebar extends Shadow {
         return p(text)
             .fontSize(1.5, em)
             .fontWeight("bold")
+            .color("var(--headertext)")
             .fontFamily("Arial")
-            .marginLeft(2, em)
+            .marginLeft(1, em)
             .onTap(function (done) {
-                if(done) {
+                if (done) {
                     if (this.innerText === "Logout") {
                         global.onLogout()
                         $("home-").closeSidebar();
                         return
-                    } else if (this.innerText === "Profile") {
-                        $("appwindowcontainer-").openProfile()
-                        $("home-").closeSidebar();
-                        return
                     }
                 }
             })
@@ -25,19 +22,58 @@ class Sidebar extends Shadow {
 
     render() {
         VStack(() => {
-            this.SidebarItem("Profile")
+            HStack(() => {
+                if (global.profile.image_path) {
+                    img(`${util.HOST}${global.profile.image_path}`, "10em", "10em")
+                        .borderRadius(100, pct)
+                }
+            })
+            .boxSizing("border-box")
+            .height(10, em)
+            .width(10, em)
+            .border("1px solid var(--accent)")
+            .borderRadius(100, pct)
+            .background("var(--darkaccent)")
+            .alignSelf("center")
+            .onTap(() => {
+                this.openProfile()
+            })
+
+            h2(global.profile.first_name + " " + global.profile.last_name)
+				.color("var(--headertext")
+				.textAlign("center")
+                .marginVertical(0.25, em)
+                .paddingBottom(0.5, em)
+                .textAlign("center")
+                .alignSelf("center")
+                .overflowWrap("break-word")
+                .wordBreak("break-word")
+                .width(100, pct)
+                .borderBottom("2px solid var(--divider)")
+                .onTap(() => {
+                    this.openProfile()
+                })
+                
             this.SidebarItem("Logout")
         })
-        .gap(2, em)
+        .gap(1, em)
-        .paddingTop(30, vh)
+        .paddingTop(15, vh)
+        .paddingHorizontal(1, em)
         .height(window.visualViewport.height - 20, px)
         .top(20, px)
-        .width(70, vw)
+        .minWidth(0)
+        .boxSizing("border-box")
+        .width((window.outerWidth / 3) * 2, px)
         .borderLeft("1px solid var(--divider)")
         .color("var(--text)")
         .position("fixed")
         .background("var(--sidebar)")
     }
+
+    openProfile() {
+        $("appwindowcontainer-").openProfile()
+        $("home-").closeSidebar();
+    }
 }
 
 register(Sidebar)