diff --git a/ui/_/code/shared.css b/ui/_/code/shared.css
index 73921a8..ebe0f26 100644
--- a/ui/_/code/shared.css
+++ b/ui/_/code/shared.css
@@ -20,7 +20,7 @@
@media (prefers-color-scheme: dark) {
:root {
--main: #000000;
- --accent: #453C33;
+ --accent: #695b4d;
--accent2: var(--gold);
--house-src: /_/icons/housedark.svg;
diff --git a/ui/_/icons/nodesblack.svg b/ui/_/icons/nodesblack.svg
new file mode 100644
index 0000000..51c5e6b
--- /dev/null
+++ b/ui/_/icons/nodesblack.svg
@@ -0,0 +1,11 @@
+
diff --git a/ui/_/icons/peopleblack.svg b/ui/_/icons/peopleblack.svg
new file mode 100644
index 0000000..e05077c
--- /dev/null
+++ b/ui/_/icons/peopleblack.svg
@@ -0,0 +1,3 @@
+
diff --git a/ui/desktop/components/Home.js b/ui/desktop/Home.js
similarity index 76%
rename from ui/desktop/components/Home.js
rename to ui/desktop/Home.js
index 184c99e..b1ef75d 100644
--- a/ui/desktop/components/Home.js
+++ b/ui/desktop/Home.js
@@ -1,28 +1,14 @@
-import "./AppWindow.js"
-import "./AppMenu.js"
-import "./ProfileButton.js"
-import "./InputBox.js"
-import "./Sidebar.js"
+import "./components/AppWindow.js"
+import "./components/AppMenu.js"
+import "./components/ProfileButton.js"
+import "./components/InputBox.js"
+import "./components/Sidebar.js"
class Home extends Shadow {
-
render() {
ZStack(() => {
- VStack(() => {
- img(document.documentElement.classList.contains("red") ? "/_/icons/quillblack.svg" : "/_/icons/quill.svg", "2.25em")
- .paddingLeft(3, em)
- .paddingTop(5, vh)
- .onClick(() => {
- window.navigateTo("/")
- })
- })
- .paddingRight(2, em)
- .position("fixed")
- .x(0).y(0)
- .height(100, vh)
- .borderRight("0.5px solid var(--accent)")
- .zIndex(3)
+ Sidebar()
switch(window.location.pathname) {
case "/":
@@ -81,7 +67,6 @@ class Home extends Shadow {
.xRight(2, em).y(2.3, em)
.position("fixed")
.verticalAlign("center")
-
})
}
}
diff --git a/ui/desktop/components/AppMenu.js b/ui/desktop/components/AppMenu.js
index a028e56..83d1419 100644
--- a/ui/desktop/components/AppMenu.js
+++ b/ui/desktop/components/AppMenu.js
@@ -23,8 +23,8 @@ class AppMenu extends Shadow {
.trim();
}
HStack(() => {
- img(cssVariable("house-src"), "1.7em")
- img(cssVariable("people-src"), "1.9em")
+ img(cssVariable("house-src"), "1.5em")
+ img(cssVariable("people-src"), "1.7em")
})
.justifyContent("center")
.gap(3.5, em)
@@ -34,7 +34,7 @@ class AppMenu extends Shadow {
.x(0).yBottom(0)
.width(100, vw)
.paddingVertical(1, em)
- .borderTop("1px solid var(--accent)")
+ .borderTop("0.5px solid var(--accent)")
.onNavigate(() => {
if(window.location.pathname === "/") {
this.styleMaximized()
diff --git a/ui/desktop/components/Sidebar.js b/ui/desktop/components/Sidebar.js
index 58d1b82..56f7964 100644
--- a/ui/desktop/components/Sidebar.js
+++ b/ui/desktop/components/Sidebar.js
@@ -1,39 +1,46 @@
-css(`
- side-bar {
- position: fixed;
- top: 0;
- left: 0;
- height: 100vh;
- width: 16vw;
- border-right: 0.5px solid var(--accent2);
- display: flex;
- flex-direction: column;
- padding-top: 13vh;
- }
-
- side-bar button {
- color: var(--darkbrown);
- margin: 1.5em;
- background-color: color-mix(in srgb, var(--accent2) 35%, var(--orange) 65%);
- border: 1px solid var(--orange);
- border-radius: 12px;
- padding: 0.5em;
- font-weight: bold;
- }
-`)
-
-
-class Sidebar extends HTMLElement {
- connectedCallback() {
- this.render()
- }
-
+class Sidebar extends Shadow {
render() {
- this.innerHTML = /* html */ `
- hyperia
-
- `
+ VStack(() => {
+ img(document.documentElement.classList.contains("red") ? "/_/icons/quillblack.svg" : "/_/icons/quill.svg", "2.25em")
+ .paddingLeft(3, em)
+ .paddingTop(5, vh)
+ .onClick(() => {
+ window.navigateTo("/")
+ })
+ })
+ .paddingRight(2, em)
+ .position("fixed")
+ .x(0).y(0)
+ .height(100, vh)
+ .borderRight("0.5px solid var(--accent)")
+ .zIndex(3)
+ .onAppear(async () => {
+ if(!window.profile) {
+ window.profile = await this.fetchProfile()
+ this.rerender()
+ }
+ })
+ }
+
+ async fetchProfile() {
+ try {
+ const res = await fetch("/profile", {
+ method: "GET",
+ credentials: "include",
+ headers: {
+ "Content-Type": "application/json"
+ }
+ });
+
+ if (!res.ok) throw new Error("Failed to fetch profile");
+
+ const profile = await res.json();
+ console.log(profile);
+ return profile
+ } catch (err) {
+ console.error(err);
+ }
}
}
-customElements.define("side-bar", Sidebar)
\ No newline at end of file
+register(Sidebar)
\ No newline at end of file
diff --git a/ui/desktop/index.js b/ui/desktop/index.js
index d0acae8..a02be9c 100644
--- a/ui/desktop/index.js
+++ b/ui/desktop/index.js
@@ -1,5 +1,5 @@
import Socket from "./ws/Socket.js"
-import "./components/Home.js"
+import "./Home.js"
import util from "./util.js"
window.util = util
diff --git a/ui/public/pages/Home.js b/ui/public/pages/Home.js
index 831a21b..b4e2ecb 100644
--- a/ui/public/pages/Home.js
+++ b/ui/public/pages/Home.js
@@ -32,7 +32,7 @@ class Home extends Shadow {
.verticalAlign("center")
.horizontalAlign("center")
- p("Parchment helps you connect to every group you are a part of.")
+ p("Parchment provides spaces for every group you are a part of.")
.color("var(--red)")
.borderTop("1px solid var(--red)")
.borderHorizontal("1px solid var(--red)")