From 6620393e54e3b1d4aa0466f1661e0ee4e8fe411a 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 | 30 ++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/app/components/feature/BudgetGroups.vue b/src/app/components/feature/BudgetGroups.vue
index b99ed4f..31746c5 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>
@@ -131,12 +138,23 @@ const reorder = (evt: ReorderEvent) => {
   margin-bottom: 4px;
 }
 
+.empty {
+  all: unset;
+}
+
 .month {
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-m);
   padding-right: 20px;
   padding-bottom: 5px;
 
+  position: sticky;
+  position: -webkit-sticky;
+  top: 0px;
+  background: var(--app-background);
+  border: 2px var(--app-background);
+  /* box-shadow: var(--app-scroll-box-shadow); */
+
   &.current {
     font-weight: var(--font-weight-l);
   }
@@ -149,6 +167,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 {