From 5eda5fbb76bf8db6b1d254df6f3ca4a10ba79b54 Mon Sep 17 00:00:00 2001
From: Stevan Freeborn <65925598+StevanFreeborn@users.noreply.github.com>
Date: Wed, 11 Mar 2026 05:47:34 -0500
Subject: [PATCH] feat(web): try to make pretty

---
 .../src/components/NavSidebar.vue             | 89 +++++++++++++++----
 .../src/components/ProtectedLayout.vue        |  7 ++
 .../icons/RightArrowBracketIcon.vue           | 10 +++
 .../src/views/TransactionsView.vue            |  1 +
 4 files changed, 90 insertions(+), 17 deletions(-)
 create mode 100644 src/FiscalOS.Web/src/components/icons/RightArrowBracketIcon.vue

diff --git a/src/FiscalOS.Web/src/components/NavSidebar.vue b/src/FiscalOS.Web/src/components/NavSidebar.vue
index a2c3370..7b514f1 100644
--- a/src/FiscalOS.Web/src/components/NavSidebar.vue
+++ b/src/FiscalOS.Web/src/components/NavSidebar.vue
@@ -4,6 +4,7 @@
   import { useUserStore } from '@/stores/userStore';
   import { computed } from 'vue';
   import { RouterLink, useRouter } from 'vue-router';
+  import RightArrowBracketIcon from './icons/RightArrowBracketIcon.vue';
 
   const userStore = useUserStore();
   const router = useRouter();
@@ -58,6 +59,7 @@
           type="button"
           @click="handleLogout"
         >
+          <RightArrowBracketIcon />
           Logout
         </button>
       </div>
@@ -88,20 +90,6 @@
     }
   }
 
-  aside.collapsed {
-    width: calc(0.125rem + var(--button-size) / 2);
-  }
-
-  aside.collapsed .toggle-button {
-    transform: rotate(180deg);
-  }
-
-  aside.collapsed .sidebar-content {
-    opacity: 0;
-    visibility: hidden;
-    pointer-events: none;
-  }
-
   .sidebar-content {
     display: flex;
     flex-direction: column;
@@ -117,12 +105,64 @@
     transition-timing-function: var(--transition-function);
   }
 
-  .logout-button {
-    background: var(--bg-element);
-    padding: 0.25rem 0.5rem;
+  .top {
+    padding: 1rem;
+  }
+
+  nav ul {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  nav a {
+    display: flex;
+    width: 100%;
+    padding: 0.5rem 1rem;
     border-radius: 0.25rem;
   }
 
+  nav a.router-link-exact-active,
+  nav a:hover {
+    background: var(--bg-element);
+  }
+
+  nav a.router-link-exact-active {
+    position: relative;
+  }
+
+  nav a.router-link-exact-active::before {
+    content: ' ';
+
+    position: absolute;
+    left: 0;
+    height: 1.25rem;
+    background: red;
+    border: 2px solid var(--brand-primary);
+  }
+
+  .bottom {
+    padding: 1rem;
+  }
+
+  .logout-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    width: 100%;
+    background: var(--bg-element);
+    padding: 0.5rem 1rem;
+    border-radius: 0.25rem;
+  }
+
+  .logout-button svg {
+    --size: 1.5rem;
+    width: var(--size);
+    height: var(--size);
+    fill: var(--text-primary);
+  }
+
   .toggle-button {
     display: flex;
     align-items: center;
@@ -143,5 +183,20 @@
     --size: 1rem;
     width: var(--size);
     height: var(--size);
+    fill: var(--text-primary);
+  }
+
+  aside.collapsed {
+    width: calc(0.125rem + var(--button-size) / 2);
+  }
+
+  aside.collapsed .toggle-button {
+    transform: rotate(180deg);
+  }
+
+  aside.collapsed .sidebar-content {
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
   }
 </style>
diff --git a/src/FiscalOS.Web/src/components/ProtectedLayout.vue b/src/FiscalOS.Web/src/components/ProtectedLayout.vue
index 41f6869..cda6a6d 100644
--- a/src/FiscalOS.Web/src/components/ProtectedLayout.vue
+++ b/src/FiscalOS.Web/src/components/ProtectedLayout.vue
@@ -22,9 +22,16 @@
   main {
     flex: 1;
     padding: 1rem;
+    padding-right: 0rem;
     overflow: auto;
     scroll-behavior: smooth;
     scrollbar-color: var(--bg-surface) var(--bg-app);
     scrollbar-gutter: stable;
   }
+
+  @media screen and (max-width: 48rem) {
+    main {
+      margin-right: 1rem;
+    }
+  }
 </style>
diff --git a/src/FiscalOS.Web/src/components/icons/RightArrowBracketIcon.vue b/src/FiscalOS.Web/src/components/icons/RightArrowBracketIcon.vue
new file mode 100644
index 0000000..25bf027
--- /dev/null
+++ b/src/FiscalOS.Web/src/components/icons/RightArrowBracketIcon.vue
@@ -0,0 +1,10 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 640 640"
+  >
+    <path
+      d="M224 160C241.7 160 256 145.7 256 128C256 110.3 241.7 96 224 96L160 96C107 96 64 139 64 192L64 448C64 501 107 544 160 544L224 544C241.7 544 256 529.7 256 512C256 494.3 241.7 480 224 480L160 480C142.3 480 128 465.7 128 448L128 192C128 174.3 142.3 160 160 160L224 160zM566.6 342.6C579.1 330.1 579.1 309.8 566.6 297.3L438.6 169.3C426.1 156.8 405.8 156.8 393.3 169.3C380.8 181.8 380.8 202.1 393.3 214.6L466.7 288L256 288C238.3 288 224 302.3 224 320C224 337.7 238.3 352 256 352L466.7 352L393.3 425.4C380.8 437.9 380.8 458.2 393.3 470.7C405.8 483.2 426.1 483.2 438.6 470.7L566.6 342.7z"
+    />
+  </svg>
+</template>
diff --git a/src/FiscalOS.Web/src/views/TransactionsView.vue b/src/FiscalOS.Web/src/views/TransactionsView.vue
index b475440..1502111 100644
--- a/src/FiscalOS.Web/src/views/TransactionsView.vue
+++ b/src/FiscalOS.Web/src/views/TransactionsView.vue
@@ -41,5 +41,6 @@
     display: flex;
     flex-direction: column;
     gap: 1rem;
+    padding: 1rem;
   }
 </style>