Fix sidebar jitter & improve ui

webroot/index.html

@@ -12,7 +12,7 @@
     <sidebarelement id="sidebar-home">
         <indicator class="active">
         </indicator>
-        <button class="icon-button" aria-label="Homepage">
+        <button class="icon-button" aria-label="Homepage" onclick="gotoHome()">
             <svg viewBox="-1 -1 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                         d="M1 6V15H6V11C6 9.89543 6.89543 9 8 9C9.10457 9 10 9.89543 10 11V15H15V6L8 0L1 6Z"
@@ -29,7 +29,7 @@
     <sidebarelement id="sidebar-add">
         <indicator>
         </indicator>
-        <button class="icon-button" aria-label="Add space">
+        <button class="icon-button" aria-label="Add space" onclick="gotoCreateSpace()">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                  stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <line x1="12" y1="5" x2="12" y2="19"></line>
@@ -38,6 +38,13 @@
         </button>
     </sidebarelement>
     <hr>
+    <sidebarelement id="sidebar-profile" class="bottom-element">
+        <indicator>
+        </indicator>
+        <button class="icon-button" aria-label="Profile"  onclick="gotoSideProfilePopup()">
+            <img id="sidebar-pfp" src="./pfpexamp.png">
+        </button>
+    </sidebarelement>
 </sidebar>
 
 <sidebar class="second" id="roomsbar">
@@ -158,6 +165,10 @@
             showBlahNotification("error:chat.add.failed");
         }
     }
+    
+    async function createGroup() {
+        
+    }
 
     start();
 </script>

webroot/main.js

@@ -49,6 +49,18 @@ try {
 
     var roomContentBar = roomContent.children[0];
 
+    var roomTopBar = document.getElementsByTagName("roomtopbar")[1];
+
+    var sidebarProfile = document.getElementById("sidebar-profile");
+    var sidebarProfileButton = sidebarProfile.children.item(1);
+    var sidebarProfileIndicator = sidebarProfile.children.item(0);
+
+    var sidebarInbox = document.getElementById("sidebar-inbox");
+    var sidebarInboxButton = sidebarInbox.children.item(1);
+    var sidebarInboxIndicator = sidebarInbox.children.item(0);
+
+    
+    
 } catch (e) {
 }
 
@@ -519,6 +531,8 @@ collapseGroupsBtn.addEventListener("click", () => {
 });
 
 addDmBtn.addEventListener("click", () => {
+    roomTopBar.innerHTML = "Invite to dm";
+    roomDetailsBar.style.display = "none";
     roomContentMain.innerHTML =
         `
         <div style="display: flex;justify-content: center;align-items: center;height:100%;flex-direction: column;text-align: center;">
@@ -528,7 +542,7 @@ addDmBtn.addEventListener("click", () => {
             <br>
             <div class="input-group">
                 <label for="addchat-username">Username</label>
-                <input type="text" id="addchat-username" placeholder="@username:serverhost" class="forminput">
+                <input type="text" id="addchat-username" placeholder="username:serverhost" class="forminput">
             </div>
             <div class="input-group">
                 <button class="submit-button" onclick="addDm()">
@@ -536,10 +550,29 @@ addDmBtn.addEventListener("click", () => {
                 </button>
             </div>
         </div>
-        `
+        `;
 });
 addGroupBtn.addEventListener("click", () => {
-
+    roomTopBar.innerHTML = "Create group";
+    roomDetailsBar.style.display = "none";
+    roomContentMain.innerHTML =
+        `
+        <div style="display: flex;justify-content: center;align-items: center;height:100%;flex-direction: column;text-align: center;">
+            <svg xmlns="http://www.w3.org/2000/svg" width="3rem" viewBox="0 -960 960 960" fill="var(--text-color)"><path d="M500-482q29-32 44.5-73t15.5-85q0-44-15.5-85T500-798q60 8 100 53t40 105q0 60-40 105t-100 53Zm220 322v-120q0-36-16-68.5T662-406q51 18 94.5 46.5T800-280v120h-80Zm80-280v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80Zm-593-87q-47-47-47-113t47-113q47-47 113-47t113 47q47 47 47 113t-47 113q-47 47-113 47t-113-47ZM0-160v-112q0-34 17.5-62.5T64-378q62-31 126-46.5T320-440q66 0 130 15.5T576-378q29 15 46.5 43.5T640-272v112H0Zm320-400q33 0 56.5-23.5T400-640q0-33-23.5-56.5T320-720q-33 0-56.5 23.5T240-640q0 33 23.5 56.5T320-560ZM80-240h480v-32q0-11-5.5-20T540-306q-54-27-109-40.5T320-360q-56 0-111 13.5T100-306q-9 5-14.5 14T80-272v32Zm240-400Zm0 400Z"/></svg>
+            <herotitle>Create Group</herotitle>
+            <p>Create a private, encrypted group</p>
+            <br>
+            <div class="input-group">
+                <label for="creategroup-name">Name</label>
+                <input type="text" id="creategroup-name" placeholder="My group" class="forminput">
+            </div>
+            <div class="input-group">
+                <button class="submit-button" onclick="createGroup()">
+                    Create group
+                </button>
+            </div>
+        </div>
+        `;
 });
 
 
@@ -557,3 +590,46 @@ sidebarAddButton.addEventListener("mouseleave", () => {
     sidebarAddIndicator.classList.remove("hover");
 });
 
+sidebarProfileButton.addEventListener("mouseenter", () => {
+    sidebarProfileIndicator.classList.add("hover");
+});
+sidebarProfileButton.addEventListener("mouseleave", () => {
+    sidebarProfileIndicator.classList.remove("hover");
+});
+
+sidebarInboxButton.addEventListener("mouseenter", () => {
+    sidebarInboxIndicator.classList.add("hover");
+});
+sidebarInboxButton.addEventListener("mouseleave", () => {
+    sidebarInboxIndicator.classList.remove("hover");
+});
+
+
+function gotoSideProfilePopup() {
+    
+}
+function gotoCreateSpace() {
+    roomTopBar.innerHTML = "Create space";
+    roomDetailsBar.style.display = "none";
+    roomContentMain.innerHTML =
+        `
+        <div style="display: flex;justify-content: center;align-items: center;height:100%;flex-direction: column;text-align: center;">
+            <svg xmlns="http://www.w3.org/2000/svg" width="3rem" viewBox="0 -960 960 960" fill="var(--text-color)"><path d="M80-120v-720h400v160h400v320h-80v-240H480v80h80v80h-80v80h80v80h-80v80h160v80H80Zm80-80h80v-80h-80v80Zm0-160h80v-80h-80v80Zm0-160h80v-80h-80v80Zm0-160h80v-80h-80v80Zm160 480h80v-80h-80v80Zm0-160h80v-80h-80v80Zm0-160h80v-80h-80v80Zm0-160h80v-80h-80v80ZM800-40v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80ZM640-440v-80h80v80h-80Zm0 160v-80h80v80h-80Z"/></svg>
+            <herotitle>Create Space</herotitle>
+            <p>Create a space for your community</p>
+            <br>
+            <div class="input-group">
+                <label for="addgroup-name">Name</label>
+                <input type="text" id="createspace-name" placeholder="My space" class="forminput">
+            </div>
+            <div class="input-group">
+                <button class="submit-button" onclick="createGroup()">
+                    Create space
+                </button>
+            </div>
+        </div>
+        `;
+}
+function gotoHome() {
+
+}

webroot/style.css

@@ -68,6 +68,11 @@ button, input {
     align-items: center;
     justify-content: flex-start;
     border: var(--border-width) solid var(--light-border-color);
+
+    backface-visibility: hidden;
+    transform: translateZ(0); 
+    will-change: transform;   
+    transform-origin: center center;
 }
 input {
     padding-left: calc(var(--button-margin) * 2);
@@ -120,11 +125,16 @@ indicator.active {
     height: var(--icon-button-height);
     width: var(--icon-button-height);
     justify-content: center;
+    overflow: hidden;
 }
 .icon-button svg {
     width: var(--icon-button-size);
     height: var(--icon-button-size);
 }
+.icon-button img {
+    width: calc(var(--icon-button-height) - (var(--border-width) * 2));
+    height: calc(var(--icon-button-height) - (var(--border-width) * 2));
+}
 button:hover, input:hover {
     background-color: rgba(255, 255, 255, 0.1);
 }
@@ -340,4 +350,9 @@ herotitle {
 
 .submit-button:hover {
     background-color: rgba(255, 255, 255, 0.5);
+}
+
+
+.bottom-element {
+    margin-top: auto;
 }