pihkaal/simple-qr
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): fade in client only elements

Browse Source
This commit is contained in:
Pihkaal
2024-10-16 02:28:56 +02:00
parent 6e5480c923
commit 0edae901af
2 changed files with 37 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
components/header/AppHeader.vue
View File

@@ -4,18 +4,35 @@
> >
<h1 class="text-4xl font-bold">Simple QRCode Generator</h1> <h1 class="text-4xl font-bold">Simple QRCode Generator</h1>
<div class="flex gap-x-1"> <ClientOnly>
<UButton <div class="flex gap-x-1 animate-fadeIn">
color="gray" <UButton
variant="ghost" color="gray"
icon="i-uil-github" variant="ghost"
aria-label="Github repo" icon="i-uil-github"
class="w-8 h-8" aria-label="Github repo"
target="_blank" class="w-8 h-8"
to="https://github.com/pihkaal/simple-qr" target="_blank"
/> to="https://github.com/pihkaal/simple-qr"
/>
<ThemeSwitcher /> <ThemeSwitcher />
</div> </div>
</ClientOnly>
</div> </div>
</template> </template>
<style scoped>
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.animate-fadeIn {
animation: fadeIn 200ms ease-in-out forwards;
}
</style>

21
components/header/ThemeSwitcher.vue
View File

@@ -12,17 +12,12 @@ const isDark = computed({
</script> </script>
<template> <template>
<ClientOnly> <UButton
<UButton :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
:icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'" color="gray"
color="gray" variant="ghost"
variant="ghost" aria-label="Theme"
aria-label="Theme" class="w-8 h-8"
class="w-8 h-8" @click="isDark = !isDark"
@click="isDark = !isDark" />
/>
<template #fallback>
<div class="w-8 h-8" />
</template>
</ClientOnly>
</template> </template>