bivashy
fb932170b6
Reviewed-on: #2 Co-authored-by: bivashy <botyrbojey@gmail.com> Co-committed-by: bivashy <botyrbojey@gmail.com>
37 lines
1.2 KiB
Vue
37 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { Icon } from '@iconify/vue'
|
|
import Button from '../button/Button.vue'
|
|
import { NuxtLink } from '#components'
|
|
|
|
const colorMode = useColorMode()
|
|
|
|
function toggleColorMode(): void {
|
|
const currentColorMode = colorMode.value
|
|
if (currentColorMode === 'light') {
|
|
colorMode.preference = 'dark'
|
|
}
|
|
if (currentColorMode === 'dark') {
|
|
colorMode.preference = 'light'
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex justify-around items-center p-2 border-b-2 backdrop-blur">
|
|
<NuxtLink to="/" class="self-start">
|
|
<h3 class="scroll-m-20 text-2xl font-semibold tracking-tight select-none">
|
|
Anyame
|
|
</h3>
|
|
</NuxtLink>
|
|
<div class="self-end">
|
|
<Button variant="outline" @click="toggleColorMode()">
|
|
<Icon icon="radix-icons:moon"
|
|
class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
|
|
<Icon icon="radix-icons:sun"
|
|
class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
|
|
<span class="sr-only">Toggle theme</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</template>
|