Add a floating configurator

This commit is contained in:
Cagatay Civici
2024-07-30 00:31:51 +03:00
parent 72ef6a60b6
commit 4711b6868c
7 changed files with 49 additions and 16 deletions

View File

@@ -0,0 +1,21 @@
<script setup>
import AppConfigurator from '@/layout/AppConfigurator.vue';
import { useLayout } from '@/layout/composables/layout';
const { toggleDarkMode, isDarkTheme } = useLayout();
</script>
<template>
<div class="fixed flex gap-4 top-8 right-8">
<Button type="button" @click="toggleDarkMode" rounded :icon="{ 'pi pi-moon': isDarkTheme, 'pi pi-sun': !isDarkTheme }" severity="secondary" />
<div class="relative">
<Button
icon="pi pi-palette"
v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }"
type="button"
rounded
/>
<AppConfigurator />
</div>
</div>
</template>