worked on monthpicker

src/components/MonthPicker.vue

@@ -1,16 +1,14 @@
 <template>
 <div class="d-flex justify-content-center">
-    <button type="button" class="btn btn-outline-secondary" @click="state = 'open'" v-show="state === 'closed'">
+    <div class="accordion" id="accMonthPicker">
+        <div class="accordion-item">
+            <h2 class="accordion-header" id="headingMonthSelector">
+                <button class="accordion-button collapsed bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#collapseMonthPicker">
                     Startmonat: {{months[selectedMonth]}} {{selectedYear}}
                 </button>
-
+            </h2>
-    <div v-show="state === 'open'" class="card">
+            <div id="collapseMonthPicker" class="accordion-collapse collapse" data-bs-parent="#accMonthPicker">
-        <div class="card-body">
+                <div class="accordion-body">
-            <div class="row">
-                <div class="col d-flex flex-row-reverse mb-3">
-                    <button @click="state = 'closed'" type="button" class="btn-close" aria-label="Close"></button>
-                </div>
-            </div>
                     <div class="row">
                         <div class="col">
                             <button type="button" class="btn btn-outline-secondary" @click="selectedYear--"><i class="bi bi-caret-left" /></button>
@@ -27,7 +25,7 @@
                         <tbody>
                             <tr v-for="n in 3">
                                 <td v-for="m in 4" @click="selectedMonth = m+4*n-5" :class="{ 'table-active': selectedMonth === (m+4*n-5)}">
-                            {{months[m+4*n-5]}}
+                                    {{monthsShort[m+4*n-5]}}
                                 </td>
                             </tr>
                         </tbody>
@@ -35,11 +33,13 @@
                 </div>
             </div>
         </div>
+    </div>
+</div>
 
 </template>
 
 <script setup lang="ts">
-    import { ref, watch, Ref } from 'vue'
+    import { ref, watch, Ref, ComputedRef, computed } from 'vue'
 
     const props = defineProps<{
         selectedMonth: number,
@@ -51,12 +51,29 @@
     const selectedYear : Ref<number> = ref(props.selectedYear)
     const state : Ref<'closed'|'open'> = ref(props.state)
 
-    const months : string[] = [
+    const monthsShort : string[] = [
         'Jan', 'Feb', 'Mrz', 'Apr', 
         'Mai', 'Jun', 'Jul', 'Aug',
         'Sept', 'Okt', 'Nov', 'Dez'
     ]
 
+    const months : string[] = [
+        'Januar', 'Februar', 'März',
+        'April', 'Mai', 'Juni', 'Juli',
+        'August', 'September', 'Oktober',
+        'November', 'Dezember'
+    ]
+
+    function toggleState() {
+        if(state.value === 'open') state.value = 'closed'
+        else state.value = 'open'
+    }
+
+    const btnCloseBg : ComputedRef<string> = computed(() => {
+        if(state.value === 'open') return ''
+        else return ''
+    })
+
     const emit = defineEmits<{
         (e: 'getYear', year: number): number
         (e: 'getMonth', month: number): number
@@ -74,8 +91,30 @@
         cursor: pointer
     }
 
-    .selected {
+    .accordion {
-        background-color: rgb(108,117,125);
+        width: 370px
-        color: #fff;
     }
+    .accordion-button.bg-light {
+        color:black;
+    }
+    .accordion-button.bg-light::after {
+        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")
+    }
+
+    /* Chrome, Safari, Edge, Opera */
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+
+    /* Firefox */
+    input[type=number] {
+        -moz-appearance: textfield;
+    }
+
+    button.btn-outline-secondary {
+        border-color: #ced4da;
+    }
+    
 </style>