anyame/anyame-frontend-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

More blurriness, and stylish

Browse Source
This commit is contained in:
bivashy
2025-06-27 01:26:05 +05:00
parent ef68e4a84d
commit b7e8a033c3
8 changed files with 153 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
components/ui/navbar/Navbar.vue
View File

@ -1,32 +1,34 @@
<script setup lang="ts">
import { Icon } from '@iconify/vue'
import { Icon } from '@iconify/vue'
const colorMode = useColorMode()
const colorMode = useColorMode()
function toggleColorMode(): void {
function toggleColorMode(): void {
const currentColorMode = colorMode.value
if (currentColorMode === 'light') {
colorMode.preference = 'dark'
colorMode.preference = 'dark'
}
if (currentColorMode === 'dark') {
colorMode.preference = 'light'
colorMode.preference = 'light'
}
}
}
</script>
<template>
<div class="absolute w-screen flex justify-around items-center p-2 border-b-2">
<div class="self-start">
<h3 class="scroll-m-20 text-2xl font-semibold tracking-tight select-none">
Anyame
</h3>
<div class="flex justify-around items-center p-2 border-b-2 backdrop-blur">
<div class="self-start">
<h3 class="scroll-m-20 text-2xl font-semibold tracking-tight select-none">
Anyame
</h3>
</div>
<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>
<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>
</template>