Adam Bem
ea83e95a00
Reviewed-on: #277 Reviewed-by: Mikolaj Widla <widlam@noreply.example.com> Co-authored-by: Adam Bem <adam.bem@zoho.eu> Co-committed-by: Adam Bem <adam.bem@zoho.eu>
26 lines
949 B
Vue
26 lines
949 B
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
|
|
const emit = defineEmits([
|
|
"update:visible"
|
|
])
|
|
|
|
const areTooltipsHidden = ref(true)
|
|
|
|
function toggleTooltips() {
|
|
areTooltipsHidden.value = !areTooltipsHidden.value;
|
|
emit("update:visible", !areTooltipsHidden.value)
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="areTooltipsHidden ? 'w-fit' : 'w-5/12'" class="hidden xl:flex items-stretch p-2 flex-row rounded-xl shadow-lg bg-gradient-to-r from-blue-400 to-blue-300 dark:from-sky-600 dark:to-sky-800 ">
|
|
<button :class="{'mr-2' : !areTooltipsHidden }" class="text-xl w-6 dark:text-slate-100" @click="toggleTooltips()">
|
|
T<br/>o<br/>o<br/>l<br/>t<br/>i<br/>p<br/>s
|
|
</button>
|
|
<div id="content" :class="{'hidden' : areTooltipsHidden}" class="w-full flex flex-col gap-4 p-2 overflow-auto rounded-xl dark:text-white bg-indigo-50 dark:bg-gray-700" >
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
</template> |