fix(devtools): use iconify icon for sidebar

Author: onmax

docs/app/components/OgImage/OgImageDocs.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+defineProps<{
+  title?: string
+  description?: string
+  headline?: string
+}>()
+</script>
+
+<template>
+  <div class="w-full h-full flex flex-col p-12 relative" style="background: #0a0505; color: white;">
+    <!-- Main container with border -->
+    <div class="flex flex-col flex-1 border-2 border-white/20 p-10 relative">
+      <!-- Corner decorations -->
+      <svg class="absolute -top-2 -left-2" width="17" height="17" fill="none">
+        <path d="M7 1a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 1-1 1H1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h2a1 1 0 0 1 1 1v2a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V8a1 1 0 0 1 1-1h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H8a1 1 0 0 1-1-1V1z" fill="#cacaca" />
+      </svg>
+      <svg class="absolute -top-2 -right-2" width="17" height="17" fill="none">
+        <path d="M7 1a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 1-1 1H1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h2a1 1 0 0 1 1 1v2a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V8a1 1 0 0 1 1-1h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H8a1 1 0 0 1-1-1V1z" fill="#cacaca" />
+      </svg>
+      <svg class="absolute -bottom-2 -left-2" width="17" height="17" fill="none">
+        <path d="M7 1a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 1-1 1H1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h2a1 1 0 0 1 1 1v2a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V8a1 1 0 0 1 1-1h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H8a1 1 0 0 1-1-1V1z" fill="#cacaca" />
+      </svg>
+      <svg class="absolute -bottom-2 -right-2" width="17" height="17" fill="none">
+        <path d="M7 1a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 1-1 1H1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h2a1 1 0 0 1 1 1v2a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V8a1 1 0 0 1 1-1h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H8a1 1 0 0 1-1-1V1z" fill="#cacaca" />
+      </svg>
+
+      <!-- Content -->
+      <div class="flex flex-col flex-1 py-6">
+        <!-- Logo -->
+        <svg width="100" height="75" viewBox="0 0 60 45" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H15V15H30V30H15V45H0V30V15V0ZM45 30V15H30V0H45H60V15V30V45H45H30V30H45Z" fill="white" />
+        </svg>
+
+        <!-- Type indicator -->
+        <div class="flex items-center gap-2 mt-8 text-xl uppercase font-semibold text-white/80">
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
+            <path fill="currentColor" fill-rule="evenodd" d="M4.172 3.172C3 4.343 3 6.229 3 10v4c0 3.771 0 5.657 1.172 6.828S7.229 22 11 22h2c3.771 0 5.657 0 6.828-1.172S21 17.771 21 14v-4c0-3.771 0-5.657-1.172-6.828S16.771 2 13 2h-2C7.229 2 5.343 2 4.172 3.172M8 9.25a.75.75 0 0 0 0 1.5h8a.75.75 0 0 0 0-1.5zm0 4a.75.75 0 0 0 0 1.5h5a.75.75 0 0 0 0-1.5z" clip-rule="evenodd" />
+          </svg>
+          <span>{{ headline || 'Documentation' }}</span>
+        </div>
+
+        <!-- Title -->
+        <div class="mt-4 text-5xl font-bold leading-tight max-w-[70%]" :class="title && title.length > 50 ? 'text-4xl' : 'text-5xl'">
+          {{ (title || 'Nuxt Better Auth').slice(0, 80) }}
+        </div>
+
+        <!-- Description -->
+        <div v-if="description" class="mt-4 text-2xl text-white/70 max-w-[70%] leading-snug">
+          {{ description.slice(0, 120) }}
+        </div>
+      </div>
+
+      <!-- Footer -->
+      <div class="flex items-center justify-between">
+        <div class="text-xl font-semibold">
+          Nuxt Better Auth
+        </div>
+        <div class="flex items-center gap-2 text-xl text-white/80">
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
+            <path fill="currentColor" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2" />
+          </svg>
+          <span>github.com/onmax/nuxt-better-auth</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

docs/app/components/docs/DocsSidebar.vue

@@ -2,8 +2,6 @@
 const route = useRoute()
 const { sections, standaloneLinks } = useSidebarConfig()
 
-const openSection = ref<string>('')
-
 function isActive(href: string) {
   if (href.startsWith('http'))
     return false
@@ -14,6 +12,16 @@ function isSectionActive(sectionIndex: number) {
   return sections[sectionIndex]?.items.some(item => isActive(item.href)) ?? false
 }
 
+const openSection = ref<string>('')
+
+// Update open section when route changes (immediate: fires on mount + navigation)
+watch(() => route.path, () => {
+  const activeIndex = sections.findIndex((_, index) => isSectionActive(index))
+  if (activeIndex !== -1) {
+    openSection.value = String(activeIndex)
+  }
+}, { immediate: true })
+
 // Build accordion items from sections
 const accordionItems = computed(() =>
   sections.map((section, index) => ({
@@ -25,22 +33,6 @@ const accordionItems = computed(() =>
     slot: `item-${index}` as const,
   })),
 )
-
-// Set initial open section based on current route
-onMounted(() => {
-  const activeIndex = sections.findIndex((_, index) => isSectionActive(index))
-  if (activeIndex !== -1) {
-    openSection.value = String(activeIndex)
-  }
-})
-
-// Update open section when route changes
-watch(() => route.path, () => {
-  const activeIndex = sections.findIndex((_, index) => isSectionActive(index))
-  if (activeIndex !== -1) {
-    openSection.value = String(activeIndex)
-  }
-})
 </script>
 
 <template>

docs/public/favicon.svg

@@ -1,7 +1,7 @@
+import { navigateTo } from '#imports'
 import { passkeyClient } from '@better-auth/passkey/client'
 import { adminClient, multiSessionClient, twoFactorClient } from 'better-auth/client/plugins'
 import { createAuthClient } from 'better-auth/vue'
-import { navigateTo } from '#imports'
 
 export function createAppAuthClient(baseURL: string) {
   return createAuthClient({

docs/public/og.png

@@ -43,7 +43,7 @@ const { user, loggedIn, ready, signOut } = useUserSession()
                 <span class="text-sm text-muted-foreground">{{ user?.name || user?.email }}</span>
                 <button
                   class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 px-3"
-                  @click="signOut()"
+                  @click="signOut({ onSuccess: () => navigateTo('/login') })"
                 >
                   Sign Out
                 </button>

playground/app/auth.client.ts

@@ -3,11 +3,9 @@ const { client } = useUserSession()
 const toast = useToast()
 
 // Type assertion for admin plugin methods
+type AsyncFn = (...args: unknown[]) => Promise<unknown>
 const adminClient = client as typeof client & {
-  admin: {
-    listUsers: Function, createUser: Function, banUser: Function
-    unbanUser: Function, impersonateUser: Function, removeUser: Function
-  }
+  admin: { listUsers: AsyncFn, createUser: AsyncFn, banUser: AsyncFn, unbanUser: AsyncFn, impersonateUser: AsyncFn, removeUser: AsyncFn }
 }
 
 // Users
@@ -28,7 +26,8 @@ async function loadUsers() {
 }
 
 const filteredUsers = computed(() => {
-  if (!search.value) return users.value
+  if (!search.value)
+    return users.value
   const s = search.value.toLowerCase()
   return users.value.filter(u => u.email?.toLowerCase().includes(s) || u.name?.toLowerCase().includes(s))
 })
@@ -125,7 +124,9 @@ async function impersonate(userId: string) {
 
 // Delete user
 async function deleteUser(userId: string) {
-  if (!confirm('Are you sure you want to delete this user?')) return
+  // eslint-disable-next-line no-alert
+  if (!confirm('Are you sure you want to delete this user?'))
+    return
   try {
     await adminClient?.admin.removeUser({ userId })
     toast.add({ title: 'User deleted', color: 'success' })
@@ -144,7 +145,9 @@ onMounted(loadUsers)
     <UCard>
       <template #header>
         <div class="flex justify-between items-center gap-4">
-          <h1 class="text-xl font-semibold">Admin Dashboard</h1>
+          <h1 class="text-xl font-semibold">
+            Admin Dashboard
+          </h1>
           <div class="flex gap-2">
             <UInput v-model="search" placeholder="Search users..." class="w-48" />
             <UButton @click="createOpen = true">
@@ -193,7 +196,9 @@ onMounted(loadUsers)
 
     <!-- Create User Modal -->
     <UModal v-model:open="createOpen">
-      <template #header>Create New User</template>
+      <template #header>
+        Create New User
+      </template>
       <template #body>
         <div class="space-y-4 p-4">
           <UFormField label="Email">
@@ -208,14 +213,18 @@ onMounted(loadUsers)
           <UFormField label="Role">
             <USelect v-model="createForm.role" :options="['user', 'admin']" />
           </UFormField>
-          <UButton block :loading="createLoading" @click="createUser">Create User</UButton>
+          <UButton block :loading="createLoading" @click="createUser">
+            Create User
+          </UButton>
         </div>
       </template>
     </UModal>
 
     <!-- Ban User Modal -->
     <UModal v-model:open="banOpen">
-      <template #header>Ban User</template>
+      <template #header>
+        Ban User
+      </template>
       <template #body>
         <div class="space-y-4 p-4">
           <UFormField label="Reason (optional)">
@@ -224,7 +233,9 @@ onMounted(loadUsers)
           <UFormField label="Duration (hours, leave empty for permanent)">
             <UInput v-model="banForm.expiresIn" type="number" placeholder="e.g. 24" />
           </UFormField>
-          <UButton block color="error" :loading="banLoading" @click="banUser">Ban User</UButton>
+          <UButton block color="error" :loading="banLoading" @click="banUser">
+            Ban User
+          </UButton>
         </div>
       </template>
     </UModal>