ADD: Config section toggle

src/components/config/ConfigSection.vue

@@ -1,10 +1,21 @@
 <template>
   <Collapsible v-model:open="collapse" :default-open="true">
-    <CollapsibleTrigger class="w-full bg-zinc-900 flex items-center px-4">
-      <component :is="iconComponent" class="h-4 w-4" />
-      <h2 class="text-sm px-2 py-4">{{ title }}</h2>
-      <ChevronLeft class="chevrot h-4 w-4 mb-0.5 transition-transform ml-auto text-muted-foreground" />
-    </CollapsibleTrigger>
+    <div class="w-full bg-zinc-900 flex">
+      <div
+        class="flex-1 flex items-center px-4"
+        :class="{'cursor-pointer hover:bg-zinc-800': showToggle}"
+        @click="toggle = !toggle">
+        <component :is="iconComponent" class="h-4 w-4" />
+        <h2 class="text-sm px-2 py-4">{{ title }}</h2>
+        <Switch
+          v-if="showToggle" :checked="toggle"
+          class="ml-auto" @click.stop="toggle=!toggle" />
+      </div>
+
+      <CollapsibleTrigger class="flex items-center justify-center h-12 aspect-square hover:bg-zinc-800">
+        <ChevronLeft class="chevrot h-4 w-4 mt-0.5 transition-transform text-muted-foreground" />
+      </CollapsibleTrigger>
+    </div>
     <CollapsibleContent>
       <slot />
     </CollapsibleContent>
@@ -14,9 +25,15 @@
 import { ChevronLeft } from 'lucide-vue-next'
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible/index.js'
 import { ref } from 'vue'
+import { Switch } from '@/components/ui/switch/index.js'
 
 const collapse = ref(true)
 
+const toggle = defineModel({
+  type: Boolean,
+  default: true,
+})
+
 defineProps({
   title: {
     type: String,
@@ -26,6 +43,10 @@ defineProps({
     type: [String, Object],
     default: 'div',
   },
+  showToggle: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 </script>