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"
>
+
Logout
@@ -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;
}
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;
+ }
+ }
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 @@
+
+
+
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;
}