<script lang="ts" setup>
  const y = useState("root_y", () => 0);

  const scrollClasses = computed(() => {
    if (y.value > 20) {
      return "sticky top-3 rounded-full shadow-xl border-none w-[90%] mx-auto"
    }
    else
      return "w-full rounded-lg relative"
  })
</script>

<template>
  <UHeader toggle-side="left" :class="'bg-stone-950 max-w-full transition-all duration-300 ' + scrollClasses">
    <template #left>
      <h1 class="text-xl font-bold">Title:</h1>

    </template>
    <template #toggle>
      <UDashboardSidebarToggle class="rounded-xl"/>
    </template> 
    <template #right>
      <h1>{{ y }}</h1>
    </template>
  </UHeader>
 
</template>


<style>

</style>