create-mantiq 0.7.0 → 0.7.2

package/stubs/tailwind-only/svelte/src/style.css.stub

@@ -0,0 +1,127 @@
+@import "tailwindcss";
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.067);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.067);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.animate-fade-up { animation: fadeUp 0.4s ease-out; }

package/stubs/tailwind-only/vue/src/components/layout/AppSidebar.vue.stub

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { Command } from 'lucide-vue-next'
+import NavGroup from './NavGroup.vue'
+import NavUser from './NavUser.vue'
+import type { NavUserUser } from './NavUser.vue'
+import { sidebarData } from './sidebar-data'
+
+const props = defineProps<{
+  user: NavUserUser
+  appName: string
+  activePath: string
+  navigate: (href: string) => void
+  onLogout: () => void
+  collapsed?: boolean
+}>()
+</script>
+
+<template>
+  <aside
+    class="flex h-full flex-col border-r border-sidebar-border bg-sidebar text-sidebar-foreground transition-[width] duration-200"
+    :class="collapsed ? 'w-14' : 'w-64'"
+  >
+    <!-- Header -->
+    <div class="flex h-14 items-center gap-2 border-b border-sidebar-border px-3">
+      <button
+        class="flex items-center gap-2 rounded-md p-1.5 hover:bg-sidebar-accent"
+        :title="appName"
+        @click="navigate('/dashboard')"
+      >
+        <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+          <Command class="h-4 w-4" />
+        </span>
+        <template v-if="!collapsed">
+          <span class="grid flex-1 text-left text-sm leading-tight">
+            <span class="truncate font-semibold">{{ appName }}</span>
+            <span class="truncate text-xs text-muted-foreground">Admin Panel</span>
+          </span>
+        </template>
+      </button>
+    </div>
+
+    <!-- Content -->
+    <nav class="flex-1 overflow-y-auto py-2">
+      <NavGroup
+        v-for="group in sidebarData"
+        :key="group.title"
+        :group="group"
+        :active-path="activePath"
+        :navigate="navigate"
+        :collapsed="collapsed"
+        class="mb-2"
+      />
+    </nav>
+
+    <!-- Footer -->
+    <div class="border-t border-sidebar-border p-2">
+      <NavUser :user="user" :navigate="navigate" :on-logout="onLogout" :collapsed="collapsed" />
+    </div>
+  </aside>
+</template>

package/stubs/tailwind-only/vue/src/components/layout/AuthenticatedLayout.vue.stub

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { ref, provide, onMounted, onUnmounted } from 'vue'
+import { post } from '@/lib/api'
+import AppSidebar from './AppSidebar.vue'
+
+const props = withDefaults(defineProps<{
+  currentUser?: { name: string; email: string; role?: string } | null
+  appName?: string
+  navigate: (href: string) => void
+  activePath: string
+}>(), {
+  appName: 'Mantiq',
+})
+
+const mobileOpen = ref(false)
+
+function toggleMobileSidebar() {
+  mobileOpen.value = !mobileOpen.value
+}
+
+provide('toggleMobileSidebar', toggleMobileSidebar)
+
+async function handleLogout() {
+  await post('/logout', {})
+  props.navigate('/login')
+}
+
+const user = props.currentUser ?? { name: 'User', email: 'user@example.com' }
+
+function onClickOutside(e: MouseEvent) {
+  const target = e.target as HTMLElement
+  if (mobileOpen.value && !target.closest('[data-sidebar]')) {
+    mobileOpen.value = false
+  }
+}
+
+onMounted(() => document.addEventListener('click', onClickOutside))
+onUnmounted(() => document.removeEventListener('click', onClickOutside))
+</script>
+
+<template>
+  <div class="flex min-h-screen">
+    <!-- Desktop sidebar -->
+    <div class="hidden md:flex" data-sidebar>
+      <AppSidebar
+        :user="user"
+        :app-name="appName"
+        :active-path="activePath"
+        :navigate="navigate"
+        :on-logout="handleLogout"
+      />
+    </div>
+
+    <!-- Mobile sidebar overlay -->
+    <div v-if="mobileOpen" class="fixed inset-0 z-40 md:hidden">
+      <div class="fixed inset-0 bg-black/50" @click="mobileOpen = false" />
+      <div class="fixed inset-y-0 left-0 z-50 w-64" data-sidebar @click.stop>
+        <AppSidebar
+          :user="user"
+          :app-name="appName"
+          :active-path="activePath"
+          :navigate="(href: string) => { mobileOpen = false; navigate(href) }"
+          :on-logout="handleLogout"
+        />
+      </div>
+    </div>
+
+    <!-- Main content -->
+    <div class="flex flex-1 flex-col">
+      <slot />
+    </div>
+  </div>
+</template>

package/stubs/tailwind-only/vue/src/components/layout/Header.vue.stub

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { ref, inject, onMounted, onUnmounted } from 'vue'
+import { cn } from '@/lib/utils'
+import { PanelLeft } from 'lucide-vue-next'
+import ThemeToggle from './ThemeToggle.vue'
+
+const props = defineProps<{
+  fixed?: boolean
+  class?: string
+  navigate?: (href: string) => void
+}>()
+
+const toggleMobileSidebar = inject<() => void>('toggleMobileSidebar', () => {})
+
+const offset = ref(0)
+
+function onScroll() {
+  offset.value = document.body.scrollTop || document.documentElement.scrollTop
+}
+
+onMounted(() => {
+  document.addEventListener('scroll', onScroll, { passive: true })
+})
+
+onUnmounted(() => {
+  document.removeEventListener('scroll', onScroll)
+})
+</script>
+
+<template>
+  <header
+    :class="cn(
+      'flex h-16 shrink-0 items-center gap-2',
+      fixed && 'sticky top-0 z-10 bg-background',
+      offset > 10 && fixed ? 'border-b' : '',
+      props.class,
+    )"
+  >
+    <div class="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
+      <button
+        class="-ml-1 inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-accent-foreground md:hidden"
+        @click="toggleMobileSidebar"
+      >
+        <PanelLeft class="h-4 w-4" />
+        <span class="sr-only">Toggle sidebar</span>
+      </button>
+      <div class="mx-1 hidden h-4 w-px bg-border md:block" />
+      <slot />
+      <div class="ms-auto flex items-center gap-2">
+        <ThemeToggle />
+      </div>
+    </div>
+  </header>
+</template>

package/stubs/tailwind-only/vue/src/components/layout/Main.vue.stub

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  fixed?: boolean
+  class?: string
+}>()
+</script>
+
+<template>
+  <main
+    :class="cn(
+      'peer-[.header-fixed]/header:mt-16',
+      fixed && 'flex flex-grow flex-col overflow-hidden',
+      props.class,
+    )"
+  >
+    <div class="px-4 py-6 lg:px-6">
+      <slot />
+    </div>
+  </main>
+</template>

package/stubs/tailwind-only/vue/src/components/layout/NavGroup.vue.stub

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ChevronRight, ExternalLink } from 'lucide-vue-next'
+import type { NavGroup as NavGroupData } from './sidebar-data'
+
+const props = defineProps<{
+  group: NavGroupData
+  activePath: string
+  navigate: (href: string) => void
+  collapsed?: boolean
+}>()
+
+const expandedItems = ref<Record<string, boolean>>({})
+
+function isActive(itemUrl: string, activePath: string): boolean {
+  if (itemUrl === activePath) return true
+  const itemBase = itemUrl.split('?')[0]
+  const activeBase = activePath.split('?')[0]
+  return itemBase === activeBase
+}
+
+function isGroupActive(items: NavGroupData['items'][number]['items'], activePath: string): boolean {
+  if (!items) return false
+  return items.some((sub) => isActive(sub.url, activePath))
+}
+
+function toggleExpanded(title: string) {
+  expandedItems.value[title] = !expandedItems.value[title]
+}
+
+function isExpanded(item: NavGroupData['items'][number]): boolean {
+  if (expandedItems.value[item.title] !== undefined) return expandedItems.value[item.title]
+  return isGroupActive(item.items, props.activePath)
+}
+</script>
+
+<template>
+  <div class="space-y-1 px-2">
+    <p v-if="!collapsed" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+      {{ group.title }}
+    </p>
+    <template v-for="item in group.items" :key="item.title">
+      <!-- Items with sub-items: collapsible -->
+      <template v-if="item.items && item.items.length > 0">
+        <div>
+          <button
+            class="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm font-medium transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+            :class="isGroupActive(item.items, activePath) ? 'bg-sidebar-accent text-sidebar-accent-foreground' : 'text-sidebar-foreground'"
+            :title="item.title"
+            @click="toggleExpanded(item.title)"
+          >
+            <component :is="item.icon" class="h-4 w-4 shrink-0" />
+            <span v-if="!collapsed" class="flex-1 truncate text-left">{{ item.title }}</span>
+            <ChevronRight
+              v-if="!collapsed"
+              class="h-4 w-4 shrink-0 transition-transform duration-200"
+              :class="isExpanded(item) && 'rotate-90'"
+            />
+          </button>
+          <div v-if="!collapsed && isExpanded(item)" class="ml-4 mt-0.5 space-y-0.5 border-l border-sidebar-border pl-2">
+            <button
+              v-for="sub in item.items"
+              :key="sub.title"
+              class="flex w-full items-center rounded-md px-2 py-1 text-sm transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+              :class="isActive(sub.url, activePath) ? 'bg-sidebar-accent text-sidebar-accent-foreground font-medium' : 'text-muted-foreground'"
+              @click.prevent="navigate(sub.url)"
+            >
+              {{ sub.title }}
+            </button>
+          </div>
+        </div>
+      </template>
+
+      <!-- External link -->
+      <a
+        v-else-if="item.external"
+        :href="item.url"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm font-medium text-sidebar-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+        :title="item.title"
+      >
+        <component :is="item.icon" class="h-4 w-4 shrink-0" />
+        <span v-if="!collapsed" class="flex-1 truncate">{{ item.title }}</span>
+        <ExternalLink v-if="!collapsed" class="ml-auto h-3 w-3 text-muted-foreground" />
+      </a>
+
+      <!-- Regular item -->
+      <button
+        v-else
+        class="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm font-medium transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+        :class="isActive(item.url, activePath) ? 'bg-sidebar-accent text-sidebar-accent-foreground' : 'text-sidebar-foreground'"
+        :title="item.title"
+        @click.prevent="navigate(item.url)"
+      >
+        <component :is="item.icon" class="h-4 w-4 shrink-0" />
+        <span v-if="!collapsed" class="flex-1 truncate text-left">{{ item.title }}</span>
+        <span
+          v-if="item.badge && !collapsed"
+          class="ml-auto rounded-full bg-secondary px-1.5 py-0 text-[10px] font-medium text-secondary-foreground"
+        >
+          {{ item.badge }}
+        </span>
+      </button>
+    </template>
+  </div>
+</template>

package/stubs/tailwind-only/vue/src/components/layout/NavUser.vue.stub

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import {
+  ChevronsUpDown,
+  LogOut,
+  User,
+  Settings,
+} from 'lucide-vue-next'
+
+export interface NavUserUser {
+  name: string
+  email: string
+  role?: string
+}
+
+const props = defineProps<{
+  user: NavUserUser
+  navigate: (href: string) => void
+  onLogout: () => void
+  collapsed?: boolean
+}>()
+
+const menuOpen = ref(false)
+
+function getInitials(name: string) {
+  return name
+    .split(' ')
+    .map((n) => n[0])
+    .join('')
+    .toUpperCase()
+    .slice(0, 2)
+}
+
+function onClickOutside(e: MouseEvent) {
+  const target = e.target as HTMLElement
+  if (!target.closest('[data-nav-user]')) {
+    menuOpen.value = false
+  }
+}
+
+onMounted(() => document.addEventListener('click', onClickOutside))
+onUnmounted(() => document.removeEventListener('click', onClickOutside))
+</script>
+
+<template>
+  <div class="relative" data-nav-user>
+    <button
+      class="flex w-full items-center gap-2 rounded-md p-2 text-left text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+      @click.stop="menuOpen = !menuOpen"
+    >
+      <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-muted text-xs font-semibold">
+        {{ getInitials(user.name) }}
+      </span>
+      <template v-if="!collapsed">
+        <span class="grid flex-1 text-left text-sm leading-tight">
+          <span class="truncate font-semibold">{{ user.name }}</span>
+          <span class="truncate text-xs text-muted-foreground">{{ user.email }}</span>
+        </span>
+        <ChevronsUpDown class="ml-auto h-4 w-4 text-muted-foreground" />
+      </template>
+    </button>
+
+    <div
+      v-if="menuOpen"
+      class="absolute bottom-full left-0 z-50 mb-1 min-w-[14rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md"
+    >
+      <!-- User info -->
+      <div class="px-2 py-1.5">
+        <div class="flex items-center gap-2">
+          <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-muted text-xs font-semibold">
+            {{ getInitials(user.name) }}
+          </span>
+          <span class="grid flex-1 text-left text-sm leading-tight">
+            <span class="truncate font-semibold">{{ user.name }}</span>
+            <span class="truncate text-xs text-muted-foreground">{{ user.email }}</span>
+          </span>
+        </div>
+      </div>
+      <div class="my-1 h-px bg-border" />
+      <button
+        class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground"
+        @click="menuOpen = false; navigate('/account/profile')"
+      >
+        <User class="h-4 w-4" />
+        Account
+      </button>
+      <button
+        class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground"
+        @click="menuOpen = false; navigate('/account/preferences')"
+      >
+        <Settings class="h-4 w-4" />
+        Settings
+      </button>
+      <div class="my-1 h-px bg-border" />
+      <button
+        class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-destructive outline-none hover:bg-destructive/10"
+        @click="menuOpen = false; onLogout()"
+      >
+        <LogOut class="h-4 w-4" />
+        Sign out
+      </button>
+    </div>
+  </div>
+</template>

package/stubs/tailwind-only/vue/src/components/layout/ThemeToggle.vue.stub

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Sun, Moon } from 'lucide-vue-next'
+
+const isDark = ref(
+  typeof document !== 'undefined'
+    ? document.documentElement.classList.contains('dark')
+    : false,
+)
+
+function toggleTheme() {
+  const dark = document.documentElement.classList.toggle('dark')
+  localStorage.setItem('theme', dark ? 'dark' : 'light')
+  isDark.value = dark
+}
+</script>
+
+<template>
+  <button
+    class="inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+    title="Toggle theme"
+    @click="toggleTheme"
+  >
+    <Sun v-if="isDark" class="h-4 w-4" />
+    <Moon v-else class="h-4 w-4" />
+    <span class="sr-only">Toggle theme</span>
+  </button>
+</template>

package/stubs/tailwind-only/vue/src/components/layout/TopNav.vue.stub

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import { cn } from '@/lib/utils'
+import { Menu } from 'lucide-vue-next'
+
+export interface TopNavLink {
+  title: string
+  href: string
+  isActive?: boolean
+  disabled?: boolean
+}
+
+const props = defineProps<{
+  links: TopNavLink[]
+  class?: string
+}>()
+
+const emit = defineEmits<{
+  linkClick: [href: string]
+}>()
+
+const mobileOpen = ref(false)
+
+function handleClick(e: MouseEvent, href: string) {
+  e.preventDefault()
+  emit('linkClick', href)
+}
+
+function onClickOutside(e: MouseEvent) {
+  const target = e.target as HTMLElement
+  if (!target.closest('[data-top-nav-mobile]')) {
+    mobileOpen.value = false
+  }
+}
+
+onMounted(() => document.addEventListener('click', onClickOutside))
+onUnmounted(() => document.removeEventListener('click', onClickOutside))
+</script>
+
+<template>
+  <!-- Desktop navigation -->
+  <nav
+    :class="cn('hidden items-center gap-4 md:flex lg:gap-6', props.class)"
+  >
+    <a
+      v-for="link in links"
+      :key="link.href"
+      :href="link.href"
+      :class="cn(
+        'text-sm font-medium transition-colors hover:text-primary',
+        link.isActive ? 'text-foreground' : 'text-muted-foreground',
+        link.disabled && 'pointer-events-none opacity-50',
+      )"
+      @click="handleClick($event, link.href)"
+    >
+      {{ link.title }}
+    </a>
+  </nav>
+
+  <!-- Mobile navigation -->
+  <div class="relative md:hidden" data-top-nav-mobile>
+    <button
+      class="inline-flex h-8 w-8 items-center justify-center rounded-md border border-input bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+      @click.stop="mobileOpen = !mobileOpen"
+    >
+      <Menu class="h-4 w-4" />
+      <span class="sr-only">Toggle navigation</span>
+    </button>
+    <div
+      v-if="mobileOpen"
+      class="absolute left-0 top-full z-50 mt-1 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md"
+    >
+      <button
+        v-for="link in links"
+        :key="link.href"
+        :disabled="link.disabled"
+        class="flex w-full items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
+        @click="mobileOpen = false; emit('linkClick', link.href)"
+      >
+        <span :class="cn(!link.isActive && 'text-muted-foreground')">
+          {{ link.title }}
+        </span>
+      </button>
+    </div>
+  </div>
+</template>