animated transactions pane

web/dashboard.templ

@@ -76,7 +76,7 @@ templ dashboard() {
 }
 
 templ new_transaction_pane() {
-    <div style="position: absolute; width: 500px; height: 500px" class="c-green">
+    <div id="new_transaction_pane" style="opacity: 0;" class="cr-all c-base">
         
     </div>
 }

web/sass/nav.scss

@@ -122,3 +122,11 @@ nav {
     height: 100%;
     border: 2px solid var(--#{$prefix}-surface1);
 }
+
+#new_transaction_pane {
+    height: 75vh;
+    width: 50vw;
+    position: absolute;
+    transition: left 0.35s ease-in, top 0.35s ease-in, opacity 0.35s linear;
+    outline: solid var(--#{$prefix}-surface1);
+}

web/static/index.js

@@ -1,5 +1,6 @@
 import {fill_chart} from "./chart_functions.js";
 import {register_dropdowns} from "./dropdowns.js";
+import {open_new_transaction_pane, close_new_transaction_pane} from "./new_transactions.js";
 
 
 function debounce(func, delay) {
@@ -14,7 +15,12 @@ function debounce(func, delay) {
   };
 }
 
+/*
+ * Change highlighted navbar element
+ * @param {MouseEvent}
+ */
 function switch_nav(event) {
+    console.log(`It is a: ${event}`);
     var active_anchor = document.querySelector("nav a.active");
     active_anchor.classList.remove("active");
 
@@ -22,9 +28,21 @@ function switch_nav(event) {
     clicked.classList.add("active");
 }
 
-function open_drafts() {
-    console.log("Opening drafts panel");
+/** @type {boolean} */
+var drafts_is_open = false;
+/*
+    * toggle the new transaction pane
+*/
+function toggle_drafts() {
+    if (drafts_is_open) {
+        close_new_transaction_pane();
+        drafts_is_open = false;
+    } else {
+        open_new_transaction_pane();
+        drafts_is_open = true;
+    }
 }
+const open_drafts = debounce(toggle_drafts);
 
 function register_nav_links() {
     var navAnchors = document.querySelectorAll("nav a");
@@ -40,6 +58,7 @@ function register_handlers() {
     //fill_charts();
     register_dropdowns();
     document.querySelector("#open-draft").addEventListener("click", open_drafts);
+    close_new_transaction_pane();
 }
 
 function load_in_table() {

web/static/new_transactions.js

@@ -0,0 +1,51 @@
+import {
+    computePosition,
+    offset,
+} from 'https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.5.4/+esm';
+
+const centerOffset = offset(({rects}) => {
+    return -rects.reference.height / 2 - rects.floating.height / 2;
+});
+
+function open_new_transaction_pane() {
+    let center = document.querySelector("#main-body-content");
+    let new_tp = document.querySelector("#new_transaction_pane");
+
+    new_tp.style.opacity = "1";
+
+    let center_width = center.offsetWidth;
+    center_width = center_width - (center_width / 10);
+    new_tp.style.width = center_width + "px";
+
+    computePosition(center, new_tp, {
+        placement: "bottom",
+        middleware: [
+            centerOffset,
+        ],
+    }).then(({x, y}) => {
+        Object.assign(new_tp.style, {
+            left: `${x}px`,
+            top: `${y}px`,
+        });
+    });
+}
+
+function close_new_transaction_pane() {
+    let right_column = document.querySelector("#right-col");
+    let new_tp = document.querySelector("#new_transaction_pane");
+    new_tp.style.opacity = "0";
+    computePosition(right_column, new_tp, {
+        placement: "right",
+        middleware: [
+           offset(40),      
+        ],
+    }).then(({x, y}) => {
+        Object.assign(new_tp.style, {
+            left: `${x}px`,
+            top: `${y}px`,
+        });
+    });
+
+}
+
+export {open_new_transaction_pane, close_new_transaction_pane}