Migrate to Nuxt 4.0.0

app/components/ui/navbar/Navbar.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import Button from '../button/Button.vue'
+
+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">
+        <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>
+</template>

app/components/ui/navbar/index.ts

@@ -0,0 +1 @@
+export { default as Navbar } from './Navbar.vue'