Add a floating configurator
This commit is contained in:
21
src/components/FloatingConfigurator.vue
Normal file
21
src/components/FloatingConfigurator.vue
Normal 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>
|
||||
Reference in New Issue
Block a user