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

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

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

const pages = ref([
  { id: "1", label: "Getting Started", icon: "i-lucide-book-open" },
  { id: "2", label: "Architecture", icon: "i-lucide-layers" },
  { id: "3", label: "API Reference", icon: "i-lucide-code" },
  { id: "4", label: "Changelog", icon: "i-lucide-history" },
])
</script>

<template>
  <USidebar
    v-model:open="open"
    collapsible="icon"
    :ui="{ header: 'border-b border-default' }"
  >
    <template #header="{ state }">
      <div class="flex items-center gap-2 px-2 py-1 min-w-0">
        <UButton
          icon="i-lucide-panels-top-left"
          color="neutral"
          variant="ghost"
          size="sm"
          @click="open = !open"
        />
        <span v-if="state !== 'collapsed'" class="font-semibold text-sm truncate">
          My Workspace
        </span>
      </div>
    </template>

    <!-- Navigation items -->
    <div class="flex flex-col gap-0.5 p-2">
      <UButton
        v-for="page in pages"
        :key="page.id"
        :icon="page.icon"
        :label="page.label"
        color="neutral"
        variant="ghost"
        size="sm"
        class="justify-start w-full"
      />
    </div>

    <template #footer="{ state }">
      <div class="p-2 border-t border-default">
        <UButton
          icon="i-lucide-plus"
          :label="state !== 'collapsed' ? 'New Page' : undefined"
          color="neutral"
          variant="soft"
          size="sm"
          class="w-full justify-start"
        />
      </div>
    </template>
  </USidebar>
</template>