editor/apps/tauri/src/components/AppRightSidebar.vue

<script setup lang="ts">
import { ref } from "vue"

const open = defineModel<boolean>("open", { required: true })

const tabs = ref([
  { label: "References", icon: "i-lucide-link", value: "refs" },
  { label: "Search", icon: "i-lucide-search", value: "search" },
])
const activeTab = ref("refs")
</script>

<template>
  <USidebar
    v-model:open="open"
    collapsible="offcanvas"
    side="right"
    :ui="{ width: 'w-80' }"
    rail
  >
    <template #header>
      <UTabs
        v-model="activeTab"
        :items="tabs"
        size="sm"
        color="neutral"
        variant="link"
        class="w-full"
      />
    </template>

    <div v-if="activeTab === 'refs'" class="p-3 text-sm text-muted">
      <p>References will appear here once you start linking pages.</p>
    </div>

    <div v-if="activeTab === 'search'" class="p-3">
      <UInput
        placeholder="Search pages..."
        size="sm"
        color="neutral"
        variant="outline"
      />
      <p class="mt-3 text-sm text-muted">
        Search results appear here.
      </p>
    </div>
  </USidebar>
</template>