DashboardToolbar

<template>
  <UDashboardToolbar>
    <template #left>
      <UButton label="New" icon="i-heroicons-plus" />
    </template>
    
    <template #right>
      <UButton icon="i-heroicons-funnel" variant="ghost" />
      <UButton icon="i-heroicons-magnifying-glass" variant="ghost" />
    </template>
  </UDashboardToolbar>
</template>

<UDashboardToolbar>
  <div class="flex items-center justify-between w-full">
    <div class="flex gap-2">
      <UButton label="Action 1" />
      <UButton label="Action 2" />
    </div>
    
    <div class="flex gap-2">
      <UInput placeholder="Search..." />
    </div>
  </div>
</UDashboardToolbar>

<UDashboardToolbar>
  <template #left>
    <UBreadcrumb :items="breadcrumbs" />
  </template>
  
  <template #right>
    <UButton label="Settings" icon="i-heroicons-cog-6-tooth" variant="ghost" />
  </template>
</UDashboardToolbar>

<script setup lang="ts">
const breadcrumbs = [
  { label: 'Home', to: '/' },
  { label: 'Dashboard', to: '/dashboard' },
  { label: 'Settings' }
]
</script>

<UDashboardToolbar>
  <template #left>
    <h2 class="text-lg font-semibold">Projects</h2>
  </template>
  
  <template #right>
    <UButtonGroup>
      <UButton label="List" icon="i-heroicons-list-bullet" />
      <UButton label="Grid" icon="i-heroicons-squares-2x2" />
    </UButtonGroup>
    
    <UButton label="New Project" color="primary" />
  </template>
</UDashboardToolbar>

<UDashboardToolbar>
  <template #left>
    <USelectMenu
      v-model="selectedStatus"
      :options="statusOptions"
      placeholder="Filter by status"
    />
    <USelectMenu
      v-model="selectedTag"
      :options="tagOptions"
      placeholder="Filter by tag"
    />
  </template>
  
  <template #right>
    <UInput
      v-model="searchQuery"
      icon="i-heroicons-magnifying-glass"
      placeholder="Search..."
    />
  </template>
</UDashboardToolbar>

<script setup lang="ts">
const selectedStatus = ref(null)
const selectedTag = ref(null)
const searchQuery = ref('')

const statusOptions = ['Active', 'Completed', 'Archived']
const tagOptions = ['Important', 'Bug', 'Feature']
</script>

<template>
  <div class="flex flex-col h-screen">
    <UDashboardNavbar title="Dashboard" />
    
    <div class="flex flex-1">
      <UDashboardSidebar>
        <!-- Sidebar content -->
      </UDashboardSidebar>
      
      <main class="flex-1 flex flex-col">
        <UDashboardToolbar>
          <template #left>
            <h1 class="text-xl font-bold">My Projects</h1>
          </template>
          
          <template #right>
            <UButton label="New" icon="i-heroicons-plus" color="primary" />
          </template>
        </UDashboardToolbar>
        
        <div class="flex-1 p-4">
          <!-- Main content -->
        </div>
      </main>
    </div>
  </div>
</template>