set up wireframe side panel

web/dataendpoints.templ

@@ -58,12 +58,36 @@ templ account_summary_rows(accounts *[]types.TwoIntsItem){
 }
 
 templ transaction_quick_access() {
-    <div class="c-base h-100">
+    <div id="transaction-quick-access-panel">
-    <p> Hello world </p>
+        <div class="t-header">
+            <button
+                class="borderless-btn btn-sm mx-auto c-green ch-teal"
+                style="color: var(--pf-base);"
+            >
+                <i class="" data-feather="plus"></i>
+                Add New
+            </button>
+            <div class="m-auto d-flex">
+                <input id="show-pending-transactions" type="checkbox"></input>
+                <label for="show-pending-transactions">
+                    Show Pending
+                </label>
+            </div>
+        </div>
+        <div class="t-list">
+            <div class="tab-div">
+                <button id="open-draft">
+                    <i data-feather="file-plus"></i>
+                </button>
+            </div>
+            <div class="t-list-container">
+
+            </div>
+        </div>
     </div>
 }
 
 templ right_panel_quick_access() {
-    <div class="c-base h-100">
+    <div id="quick-access-panel">
     </div>
 }

web/sass/nav.scss

@@ -48,3 +48,71 @@ nav {
     }
 }
 
+#transaction-quick-access-panel {
+    height: 100%;
+    display:flex;
+    flex-direction: column;
+
+    .t-header {
+        display: flex;
+        margin-top: 10px;
+        margin-bottom: 20px;
+        input {
+            margin-top: auto;
+            margin-bottom: auto;
+            margin-left: 5px;
+            margin-right: 8px;
+            border-radius: 0.25rem;
+            border: 1px solid var(--#{$prefix}-text);
+            width: 1.25em;
+            height: 1.25em;
+        }
+    }
+
+    .t-list {
+        display: flex;
+        flex-grow: 1;
+        margin-left: 10px;
+        margin-right: 10px;
+        .tab-div {
+            height: 100%;
+            width: 50px;
+            display: flex;
+            #open-draft {
+                border-top-left-radius: $border-radius;
+                border-bottom-left-radius: $border-radius;
+                background-color: var(--#{$prefix}-base);
+                color: var(--#{$prefix}-text);
+                border: 2px solid var(--#{$prefix}-overlay1);
+                border-right-color: transparent;
+                margin-top: 40px;
+                margin-left: auto;
+                margin-right: -3px;
+                height: 50px;
+                width: 50px;
+                display:flex;
+                z-index: 1;
+                svg {
+                    margin: auto;
+                }
+            }
+        }
+        .t-list-container {
+            overflow-y: scroll;
+            border: 2px solid var(--#{$prefix}-surface1);
+            margin: 5px;
+            margin-left: 0px;
+            background-color: var(--#{$prefix}-base);
+            height: 100%;
+            flex-grow: 1;
+            border-radius: $border-radius;
+        }
+    }
+}
+
+#quick-access-panel {
+    background-color: var(--#{$prefix}-base);
+    border-radius: $border-radius;
+    height: 100%;
+    border: 2px solid var(--#{$prefix}-surface1);
+}

web/transactions.templ

@@ -59,14 +59,6 @@ templ transactions_page(userID int, accounts *[]string) {
             <button class="ms-5 borderless-btn">
                 <span class="my-auto mx-3">No Filters</span>
             </button>
-
-            <button
-                class="borderless-btn ms-auto me-3 c-green ch-teal"
-                style="color: var(--pf-base);"
-            >
-                <i class="" data-feather="plus"></i>
-                Add New
-            </button>
         </div>
 
         <div class="row mt-5">