diff --git a/frontend/src/components/Toggler.vue b/frontend/src/components/Toggler.vue
new file mode 100644
index 00000000..01060875
--- /dev/null
+++ b/frontend/src/components/Toggler.vue
@@ -0,0 +1,24 @@
+<template>
+  <slot v-bind="{ opened, open, close, toggle }"></slot>
+</template>
+<script setup>
+import { ref } from 'vue'
+const props = defineProps({
+  isOpened: {
+    type: Boolean,
+    default: true,
+  },
+})
+function toggle() {
+  opened.value = !opened.value
+}
+
+function open() {
+  opened.value = true
+}
+
+function close() {
+  opened.value = false
+}
+let opened = ref(props.isOpened)
+</script>