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>
<div class="flex gap-x-1">
<UButton
color="gray"
variant="ghost"
icon="i-uil-github"
aria-label="Github repo"
class="w-8 h-8"
target="_blank"
to="https://github.com/pihkaal/simple-qr"
/>
<ClientOnly>
<div class="flex gap-x-1 animate-fadeIn">
<UButton
color="gray"
variant="ghost"
icon="i-uil-github"
aria-label="Github repo"
class="w-8 h-8"
target="_blank"
to="https://github.com/pihkaal/simple-qr"
/>
<ThemeSwitcher />
</div>
<ThemeSwitcher />
</div>
</ClientOnly>
</div>
</template>
<style scoped>
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.animate-fadeIn {
animation: fadeIn 200ms ease-in-out forwards;
}
</style>