57 lines
1.4 KiB
Vue
57 lines
1.4 KiB
Vue
<template>
|
|
<Transition name="menu">
|
|
<div
|
|
v-if="isSideMenuVisible"
|
|
class="flex absolute top-[1px] right-0 z-10 flex-col p-2 w-[50%] h-full bg-stone-300 dark:bg-stone-900 border-l border-l-cyan-500">
|
|
<div class="h-12">
|
|
<button @click="isSideMenuVisible = false">
|
|
<IconClose class="absolute top-0 right-1 h-12 text-xl btn" />
|
|
</button>
|
|
</div>
|
|
<div class="flex flex-col flex-1 content-center items-center text-sm">
|
|
<div class="h-12" />
|
|
<InputSwitch
|
|
class="mb-4"
|
|
id="toggleNight"
|
|
lbl-left="Day"
|
|
lbl-right="Night"
|
|
v-model="darkMode" />
|
|
<InputSwitch
|
|
class=""
|
|
id="toggleLocale"
|
|
lbl-left="English"
|
|
lbl-right="Français"
|
|
v-model="isLocaleFrench" />
|
|
</div>
|
|
|
|
<div class="text-xs text-stone-500 dark:text-stone-600">
|
|
Build {{ buildDate }}
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.menu-move,
|
|
.menu-enter-active,
|
|
.menu-leave-active {
|
|
transition: all 0.5s ease;
|
|
}
|
|
|
|
.menu-enter-from,
|
|
.menu-leave-to {
|
|
/* opacity: 0; */
|
|
transform: translateX(100%);
|
|
}
|
|
</style>
|
|
|
|
<script setup lang="ts">
|
|
import { darkMode, isLocaleFrench } from '@/composables/settings'
|
|
import { isSideMenuVisible } from '@/composables/side-menu'
|
|
import IconClose from '~icons/ph/x'
|
|
|
|
import InputSwitch from './common/InputSwitch.vue'
|
|
|
|
const buildDate = import.meta.env.VITE_BUILD_DATE
|
|
</script>
|