feat(nuxt): nuxt3 -> nuxt4

app/components/header/AppHeader.vue

@@ -0,0 +1,38 @@
+<template>
+  <div
+    class="pb-1.5 border-b border-gray-100 dark:border-gray-800 flex justify-between items-center"
+  >
+    <h1 class="text-2xl sm:text-4xl font-bold">Simple QRCode</h1>
+
+    <ClientOnly>
+      <div class="flex gap-x-1 animate-fadeIn">
+        <UButton
+          color="neutral"
+          variant="ghost"
+          icon="i-uil-github"
+          aria-label="Git repo"
+          class="w-8 h-8"
+          target="_blank"
+          to="https://github.com/pihkaal/simple-qr"
+        />
+
+        <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>

app/components/header/ThemeSwitcher.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const colorMode = useColorMode();
+
+const isDark = computed({
+  get() {
+    return colorMode.value === "dark";
+  },
+  set() {
+    colorMode.preference = colorMode.value === "dark" ? "light" : "dark";
+  },
+});
+</script>
+
+<template>
+  <UButton
+    :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
+    color="neutral"
+    variant="ghost"
+    aria-label="Theme"
+    class="w-8 h-8"
+    @click="isDark = !isDark"
+  />
+</template>