app menu, sidebar displaying

ui/desktop/components/AppMenu.js

@@ -1,44 +1,6 @@
-css(`
-    app-menu {
-        color: var(--tan);
-        transform: translateX(-50%);
-        transition: transform .3s;
-        display: flex; gap: 2em; position: fixed; left: 50vw; bottom: 2em;
-    }
-
-    app-menu.minimized {
-        color: var(--accent);
-        transform: translate(-50%, 65%);
-        border: 0.2px solid var(--accent);
-        padding-top: 0.5em;
-        padding-left: 2em; 
-        padding-right: 2em;
-        padding-bottom: 4em;
-        bottom: 1em;
-        border-radius: 12px;
-    }
-    
-    app-menu p {
-        cursor: default;
-        transition: transform .3s, text-decoration .3s;
-        padding: 0.5em;
-        border-radius: 5px;
-        text-underline-offset: 5px;
-    }
+css(`    
     app-menu img:hover {
-        border: "1px solid black";
-    }
-    app-menu p.touched {
-        text-decoration: underline;
-        transform: translateY(0%)
-    }
-    app-menu p.selected {
-        text-decoration: underline;
-        transform: translateY(-10%)
-    }
-
-    #divider.minimized {
-        display: none;
+        opacity: 0.8;
     }
 `)
 
@@ -54,17 +16,25 @@ class AppMenu extends Shadow {
 
     render() {
         VStack(() => {
+            
+            function cssVariable(value) {
+                return getComputedStyle(document.documentElement)
+                .getPropertyValue("--" + value)
+                .trim();
+            }
             HStack(() => {
-                img("/_/icons/house.svg", "1.5em")
-                img("/_/icons/nodes.svg", "1.5em")
-                img("/_/icons/forum.svg", "1.5em")
-                img("/_/icons/people.svg", "1.5em")
+                img(cssVariable("house-src"), "1.7em")
+                img(cssVariable("people-src"), "1.9em")
             })
             .justifyContent("center")
-            .gap(3, em)
+            .gap(3.5, em)
             .paddingRight(2, em)
         })
-        .gap(0.5, em)
+        .position("fixed")
+        .x(0).yBottom(0)
+        .width(100, vw)
+        .paddingVertical(1, em)
+        .borderTop("1px solid var(--accent)")
         .onNavigate(() => {
             if(window.location.pathname === "/") {
                 this.styleMaximized()

ui/desktop/components/Home.js

@@ -10,15 +10,19 @@ class Home extends Shadow {
         ZStack(() => {
 
             VStack(() => {
-                img(document.documentElement.classList.contains("red") ? "/_/icons/quillblack.svg" : "/_/icons/quill.svg", "2.5em")
-                    .position("fixed")
-                    .left(3, em)
-                    .top(3, vh)
-                    .zIndex(3)
+                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)
 
             switch(window.location.pathname) {
                 case "/":
@@ -47,9 +51,9 @@ class Home extends Shadow {
 
 
             HStack(() => {
-                ProfileButton()
-                    .zIndex(1)
-                    .cursor("default")
+                // ProfileButton()
+                //     .zIndex(1)
+                //     .cursor("default")
     
                 a("/signout", "Sign Out")
                     .background("transparent")