hide tooblar butn

src/components/MagicoSection.vue

@@ -1,7 +1,11 @@
 <template>
   <div>
-    <div :class="component_mode ? 'position-relative' : 'card mb-2'">
-      <div :class="component_mode ? '' : 'card-header '" class="d-flex justify-content-between">
+    <div class="text-end">
+
+      <i @click="toolbar=!toolbar" class="bi bi-three-dots"></i>
+    </div>
+    <div v-if="toolbar" :class="component_mode ? 'position-relative' : 'card mb-2'">
+      <div :class="component_mode ? '' : 'card-header '" class="d-flex justify-content-between p-1 ">
         <h5 class="d-flex align-items-center" v-if="!component_mode">
           {{ name }}
           <div v-if="loading" class="spinner-border spinner-border-sm ml-2" role="status">
@@ -192,6 +196,7 @@ export default {
   data() {
     return {
       val: '',
+      toolbar:false,
       section_id: 0,
       loading: false,
       editMode: false,

src/components/SectionRow.vue

@@ -59,7 +59,7 @@
                 <template #item="{ element, index }">
                   <div class="list-group mb-2">
                     <div
-                      class="list-group-item ps-2 pe-1"
+                      class="list-group-item bg-light ps-2 pe-1"
                       @click="handleElementClick($event, element, column)"
                     >
                       <label class="mb-1" v-if="!editMode">{{ element.name }}</label