feat(web): try to make pretty

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 {
+  .top {
-    background: var(--bg-element);
+    padding: 1rem;
-    padding: 0.25rem 0.5rem;
+  }
+
+  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>

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>

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>

src/FiscalOS.Web/src/views/TransactionsView.vue

@@ -41,5 +41,6 @@
     display: flex;
     flex-direction: column;
     gap: 1rem;
+    padding: 1rem;
   }
 </style>