update to nuxt 4

app/components/AccountSidebar.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="flex grow flex-col gap-y-5 overflow-y-auto px-6 py-4">
+    <span class="inline-flex items-center gap-x-2 font-semibold text-zinc-100">
+      <UserIcon class="size-5" /> {{ $t("account.title") }}
+    </span>
+    <nav class="flex flex-1 flex-col">
+      <ul role="list" class="flex flex-1 flex-col gap-y-7">
+        <li>
+          <ul role="list" class="-mx-2 space-y-1">
+            <li v-for="(item, itemIdx) in navigation" :key="item.route">
+              <NuxtLink
+                :href="item.route"
+                :class="[
+                  itemIdx == currentPageIndex
+                    ? 'bg-zinc-800 text-white'
+                    : 'text-zinc-400 hover:bg-zinc-800 hover:text-white',
+                  'group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold',
+                ]"
+              >
+                <component
+                  :is="item.icon"
+                  class="size-6 shrink-0"
+                  aria-hidden="true"
+                />
+                {{ item.label }}
+                <span
+                  v-if="item.count !== undefined"
+                  class="ml-auto w-9 min-w-max whitespace-nowrap rounded-full bg-zinc-900 px-2.5 py-0.5 text-center text-xs/5 font-medium text-white ring-1 ring-inset ring-zinc-700"
+                  aria-hidden="true"
+                  >{{ item.count }}</span
+                >
+              </NuxtLink>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  BellIcon,
+  HomeIcon,
+  LockClosedIcon,
+  DevicePhoneMobileIcon,
+  WrenchScrewdriverIcon,
+  CodeBracketIcon,
+} from "@heroicons/vue/24/outline";
+import { UserIcon } from "@heroicons/vue/24/solid";
+import type { Component } from "vue";
+
+const notifications = useNotifications();
+const { t } = useI18n();
+
+const navigation: (NavigationItem & { icon: Component; count?: number })[] = [
+  { label: t("home"), route: "/account", icon: HomeIcon, prefix: "/account" },
+  {
+    label: t("security"),
+    route: "/account/security",
+    prefix: "/account/security",
+    icon: LockClosedIcon,
+  },
+  {
+    label: t("account.devices.title"),
+    route: "/account/devices",
+    prefix: "/account/devices",
+    icon: DevicePhoneMobileIcon,
+  },
+  {
+    label: t("account.notifications.notifications"),
+    route: "/account/notifications",
+    prefix: "/account/notifications",
+    icon: BellIcon,
+    count: notifications.value.length,
+  },
+  {
+    label: t("account.token.title"),
+    route: "/account/tokens",
+    prefix: "/account/tokens",
+    icon: CodeBracketIcon,
+  },
+  {
+    label: t("account.settings"),
+    route: "/account/settings",
+    prefix: "/account/settings",
+    icon: WrenchScrewdriverIcon,
+  },
+];
+
+const currentPageIndex = useCurrentNavigationIndex(navigation);
+</script>