From 16316b06b21eac123ace5e726fe994f382524371 Mon Sep 17 00:00:00 2001
From: Thomas Dickson <modscrat+github@gmail.com>
Date: Sat, 9 Nov 2024 21:24:30 +1300
Subject: [PATCH] feat: added pinned months to budget groups

---
 src/app/components/feature/BudgetGroups.vue | 25 ++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/app/components/feature/BudgetGroups.vue b/src/app/components/feature/BudgetGroups.vue
index b99ed4f..eaf45f6 100644
--- a/src/app/components/feature/BudgetGroups.vue
+++ b/src/app/components/feature/BudgetGroups.vue
@@ -9,7 +9,14 @@
     <span
       v-for="(month, index) of months"
       :key="month"
-      :class="[$style.month, { [$style.current]: isCurrentMonth(index) }]"
+      :class="[
+        $style.month,
+        {
+          [$style.current]: isCurrentMonth(index),
+          [$style.start]: index === 0,
+          [$style.end]: index === 11
+        }
+      ]"
     >
       <span>{{ month }}</span>
     </span>
@@ -137,6 +144,12 @@ const reorder = (evt: ReorderEvent) => {
   padding-right: 20px;
   padding-bottom: 5px;
 
+  position: sticky;
+  position: -webkit-sticky;
+  top: 0px;
+  background: var(--app-background);
+  border: 2px var(--app-background);
+
   &.current {
     font-weight: var(--font-weight-l);
   }
@@ -149,6 +162,16 @@ const reorder = (evt: ReorderEvent) => {
       margin-top: 0;
     }
   }
+
+  &.start {
+    border-bottom-left-radius: var(--border-radius-l);
+    padding-left: 8px;
+  }
+
+  &.end {
+    border-bottom-right-radius: var(--border-radius-l);
+    padding-right: 8px;
+  }
 }
 
 .addGroupBtn {